/* scoped */
/* ====================================================================
   Ocasia · Módulo de secciones estándar (secciones.css)
   Se copia dentro de assets/ de cada invitación. Los colores y
   tipografías salen de config.js → secciones.tema (variables --oc-*).
   ==================================================================== */
:root{
  --oc-principal:#2f3a4a;
  --oc-acento:#b8965f;
  --oc-fondo:transparent;
  --oc-superficie:#ffffff;
  --oc-texto:#2b2a27;
  --oc-suave:#6b6660;
  --oc-borde:rgba(0,0,0,.12);
  --oc-boton-texto:#ffffff;
  --oc-fuente-titulo:Georgia, 'Times New Roman', serif;
  --oc-fuente-texto:inherit;
  --oc-titulo-tam:clamp(2rem, 7vw, 2.8rem);
}

section.oc-section.oc-section{
  position:relative;
  background:var(--oc-fondo);
  color:var(--oc-texto);
  font-family:var(--oc-fuente-texto);
  padding:72px 22px;
  text-align:center;
  box-sizing:border-box;
}
section.oc-section.oc-section *, section.oc-section.oc-section *::before, section.oc-section.oc-section *::after{ box-sizing:border-box; }
section.oc-section .oc-inner{ max-width:560px; margin:0 auto; }
section.oc-section .oc-title{
  margin:0 0 6px;
  font-family:var(--oc-fuente-titulo);
  font-weight:400;
  font-size:var(--oc-titulo-tam);
  line-height:1.15;
  color:var(--oc-principal);
}
section.oc-section .oc-sub{ margin:0 auto 26px; max-width:420px; font-size:1rem; line-height:1.55; color:var(--oc-suave); }
section.oc-section .oc-rule{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 14px; color:var(--oc-acento); }
section.oc-section .oc-rule::before, section.oc-section .oc-rule::after{ content:''; width:46px; height:1px; background:currentColor; opacity:.6; }
section.oc-section .oc-rule i{ width:6px; height:6px; background:currentColor; transform:rotate(45deg); }
section.oc-section .oc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border:none; border-radius:999px; cursor:pointer;
  background:var(--oc-principal); color:var(--oc-boton-texto);
  font:inherit; font-size:.88rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; transition:opacity .25s ease, transform .25s ease;
}
section.oc-section .oc-btn:hover{ opacity:.9; transform:translateY(-1px); }
section.oc-section .oc-btn.is-ghost{ background:transparent; color:var(--oc-principal); box-shadow:inset 0 0 0 1px var(--oc-principal); }
section.oc-section .oc-btn svg{ width:16px; height:16px; flex:none; }
section.oc-section .oc-card{ background:var(--oc-superficie); border:1px solid var(--oc-borde); border-radius:18px; padding:24px 20px; }
.oc-hidden.oc-hidden{ display:none !important; }
/* reveal */
.oc-reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.oc-reveal.oc-reveal.is-in{ opacity:1; transform:none; }@media (prefers-reduced-motion: reduce){ .oc-reveal{ opacity:1; transform:none; transition:none; } }
/* ---------- carrusel ---------- */
.oc-carousel{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:6px 22px 14px; margin:0 -22px;
}
section.oc-section .oc-carousel::-webkit-scrollbar{ display:none; }
section.oc-section .oc-carousel > *{ scroll-snap-align:center; flex:none; }
section.oc-section .oc-dots{ display:flex; justify-content:center; gap:7px; margin-top:10px; }
section.oc-section .oc-dots button{ width:7px; height:7px; padding:0; border:none; border-radius:50%; background:var(--oc-borde); cursor:pointer; transition:all .3s ease; }
section.oc-section .oc-dots button.active{ width:20px; border-radius:4px; background:var(--oc-acento); }
/* ---------- música ---------- */
.oc-player{ display:flex; align-items:center; gap:16px; max-width:360px; margin:18px auto 0; }
section.oc-section .oc-play{
  flex:none; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--oc-principal); color:var(--oc-boton-texto);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px var(--oc-superficie), 0 0 0 5px var(--oc-acento);
}
section.oc-section .oc-play svg{ width:20px; height:20px; }
section.oc-section .oc-play .i-pause{ display:none; }
section.oc-section .oc-player.is-playing .oc-play .i-play{ display:none; }
section.oc-section .oc-player.is-playing .oc-play .i-pause{ display:block; }
section.oc-section .oc-track{ flex:1; min-width:0; text-align:left; }
section.oc-section .oc-bar{ position:relative; height:3px; border-radius:3px; background:var(--oc-borde); cursor:pointer; }
section.oc-section .oc-bar::before{ content:''; position:absolute; inset:-10px 0; }
section.oc-section .oc-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px; background:var(--oc-acento); }
section.oc-section .oc-times{ display:flex; justify-content:space-between; margin-top:8px; font-size:.78rem; color:var(--oc-suave); }
section.oc-section .oc-song{ font-family:var(--oc-fuente-titulo); font-size:1.5rem; color:var(--oc-principal); }
section.oc-section .oc-artist{ font-size:.9rem; font-style:italic; color:var(--oc-suave); }
/* ---------- ubicación ---------- */
.oc-places{ display:grid; gap:16px; }
section.oc-section .oc-place h3{ margin:0; font-family:var(--oc-fuente-titulo); font-weight:400; font-size:1.7rem; color:var(--oc-principal); }
section.oc-section .oc-place .oc-p-time{ margin-top:4px; font-size:1.05rem; color:var(--oc-texto); }
section.oc-section .oc-place .oc-p-name{ margin-top:10px; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; color:var(--oc-texto); }
section.oc-section .oc-place .oc-p-addr{ margin-top:4px; font-size:.95rem; color:var(--oc-suave); }
section.oc-section .oc-place .oc-p-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; }
section.oc-section .oc-map{ width:100%; height:190px; border:0; border-radius:12px; margin-top:14px; filter:grayscale(.2); }
/* ---------- dress code ---------- */
.oc-dress-figs{ display:flex; justify-content:center; gap:30px; margin:6px 0 10px; color:var(--oc-suave); }
section.oc-section .oc-dress-figs svg{ width:64px; height:110px; }
section.oc-section .oc-dress-type{
  display:inline-block; margin-top:6px; padding:8px 0;
  border-top:1px solid var(--oc-acento); border-bottom:1px solid var(--oc-acento);
  font-family:var(--oc-fuente-titulo); font-size:1.4rem; letter-spacing:.32em; text-indent:.32em; text-transform:uppercase;
  color:var(--oc-texto);
}
section.oc-section .oc-palette{ display:flex; justify-content:center; gap:10px; margin-top:16px; }
section.oc-section .oc-palette span{ width:30px; height:30px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
/* ---------- galería ---------- */
.oc-gallery.oc-carousel{ display:flex; align-items:stretch; gap:14px; }
section.oc-section .oc-gallery button{ flex:0 0 min(76%, 320px); width:min(76%, 320px); padding:0; border:1px solid var(--oc-borde); cursor:zoom-in; background:var(--oc-superficie); aspect-ratio:4/5; overflow:hidden; border-radius:16px; box-shadow:0 12px 28px rgba(0,0,0,.18); }
section.oc-section .oc-gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
section.oc-section .oc-gallery button:hover img{ transform:scale(1.05); }
section.oc-section .oc-gallery .oc-ph{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--oc-suave); font-size:.8rem; }
.oc-lightbox.oc-lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(10,10,10,.92); display:flex; align-items:center; justify-content:center; padding:20px; }
.oc-lightbox.oc-lightbox img{ max-width:100%; max-height:88vh; border-radius:6px; }
.oc-lightbox.oc-lightbox button{ position:absolute; top:14px; right:16px; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:1.4rem; cursor:pointer; }
/* ---------- itinerario ---------- */
.oc-timeline{ position:relative; max-width:380px; margin:0 auto; text-align:left; padding-left:96px; }
section.oc-section .oc-timeline::before{ content:''; position:absolute; left:74px; top:6px; bottom:6px; width:1px; background:var(--oc-acento); opacity:.6; }
section.oc-section .oc-t-item{ position:relative; padding:0 0 26px; }
section.oc-section .oc-t-item:last-child{ padding-bottom:0; }
section.oc-section .oc-t-time{ position:absolute; left:-96px; width:62px; text-align:right; top:0; font-size:.95rem; color:var(--oc-suave); }
section.oc-section .oc-t-item::before{ content:''; position:absolute; left:-26px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--oc-superficie); box-shadow:0 0 0 1.5px var(--oc-acento); }
section.oc-section .oc-t-what{ font-family:var(--oc-fuente-titulo); font-size:1.2rem; color:var(--oc-principal); line-height:1.25; }
section.oc-section .oc-t-desc{ font-size:.92rem; color:var(--oc-suave); margin-top:2px; }
/* ---------- regalos ---------- */
.oc-tabs{ display:inline-flex; padding:4px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--oc-borde); margin-bottom:18px; }
section.oc-section .oc-tabs button{ border:none; cursor:pointer; padding:8px 18px; border-radius:999px; background:transparent; color:var(--oc-suave); font:inherit; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; }
section.oc-section .oc-tabs button[aria-selected="true"]{ background:var(--oc-principal); color:var(--oc-boton-texto); }
section.oc-section .oc-gift-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--oc-borde); text-align:left; font-size:.95rem; }
section.oc-section .oc-gift-row:last-of-type{ border-bottom:none; }
section.oc-section .oc-gift-row .k{ color:var(--oc-suave); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
section.oc-section .oc-gift-row .v{ color:var(--oc-texto); text-align:right; word-break:break-word; }
section.oc-section .oc-gift-store{ font-family:var(--oc-fuente-titulo); font-size:1.7rem; color:var(--oc-principal); }
section.oc-section .oc-gift-num{ font-size:1.6rem; letter-spacing:.12em; color:var(--oc-texto); margin:4px 0 6px; }
/* ---------- calendario (ilustración) ---------- */
.oc-cal{ max-width:320px; margin:0 auto; }
section.oc-section .oc-cal-head{ font-family:var(--oc-fuente-titulo); font-size:1.5rem; color:var(--oc-principal); margin-bottom:12px; text-transform:capitalize; }
section.oc-section .oc-cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; font-size:.9rem; }
section.oc-section .oc-cal-grid .dow{ font-size:.7rem; letter-spacing:.08em; color:var(--oc-suave); text-transform:uppercase; padding-bottom:6px; }
section.oc-section .oc-cal-grid span{ display:flex; align-items:center; justify-content:center; height:34px; color:var(--oc-texto); }
section.oc-section .oc-cal-grid span.is-day{ position:relative; color:var(--oc-boton-texto); font-weight:600; }
section.oc-section .oc-cal-grid span.is-day::before{
  content:''; position:absolute; width:34px; height:34px; z-index:-1;
  background:var(--oc-principal);
  clip-path:path('M17 31C9 25 2 19 2 11.5 2 6.5 6 3 10.3 3c2.9 0 5.2 1.6 6.7 3.9C18.5 4.6 20.8 3 23.7 3 28 3 32 6.5 32 11.5 32 19 25 25 17 31Z');
}
section.oc-section .oc-cal-grid span.is-day{ isolation:isolate; }
section.oc-section .oc-cal-time{ margin-top:14px; font-size:1rem; letter-spacing:.06em; color:var(--oc-suave); }
/* ---------- cuenta regresiva ---------- */
.oc-count{ display:flex; justify-content:center; gap:6px; flex-wrap:nowrap; }
section.oc-section .oc-count div{ flex:1 1 0; max-width:86px; }
section.oc-section .oc-count b{ display:block; font-family:var(--oc-fuente-titulo); font-weight:400; font-size:clamp(1.9rem, 9vw, 2.6rem); line-height:1; color:var(--oc-principal); }
section.oc-section .oc-count small{ display:block; margin-top:6px; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--oc-suave); }
section.oc-section .oc-count .sep{ flex:0 0 auto; font-size:1.6rem; color:var(--oc-acento); padding-top:4px; }
/* ---------- confirmación ---------- */
.oc-rsvp{ text-align:left; display:grid; gap:18px; }
section.oc-section .oc-field label{ display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oc-suave); margin-bottom:8px; }
section.oc-section .oc-field input[type="text"]{ width:100%; padding:10px 2px; border:none; border-bottom:1px solid var(--oc-borde); background:transparent; font:inherit; font-size:1.05rem; color:var(--oc-texto); outline:none; }
section.oc-section .oc-field input[type="text"]:focus{ border-bottom-color:var(--oc-principal); }
section.oc-section .oc-choices{ display:flex; gap:10px; flex-wrap:wrap; }
section.oc-section .oc-choices label{ flex:1 1 140px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--oc-borde); cursor:pointer; font-size:.98rem; letter-spacing:0; text-transform:none; color:var(--oc-texto); margin:0; }
section.oc-section .oc-choices input{ accent-color:var(--oc-principal); }
section.oc-section .oc-choices label:has(input:checked){ box-shadow:inset 0 0 0 1.5px var(--oc-principal); }
section.oc-section .oc-rsvp .oc-btn{ width:100%; padding:15px; }
section.oc-section .oc-error{ color:#b3261e; font-size:.85rem; min-height:1em; }
/* ---------- mensaje ---------- */
.oc-quote{ max-width:480px; margin:0 auto; font-family:var(--oc-fuente-titulo); font-size:clamp(1.25rem, 4.8vw, 1.6rem); line-height:1.5; color:var(--oc-texto); font-style:italic; }
section.oc-section .oc-sign{ margin-top:16px; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oc-suave); }
/* ---------- agendar ---------- */
.oc-save-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
/* ---------- video ---------- */
.oc-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#111; }
section.oc-section .oc-video iframe, section.oc-section .oc-video video{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
section.oc-section .oc-video-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#fff; background-size:cover; background-position:center; }
section.oc-section .oc-video-ph::before{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.45); }
section.oc-section .oc-video-ph > *{ position:relative; }
section.oc-section .oc-video-ph .oc-play{ width:64px; height:64px; }
/* ---------- hospedaje ---------- */
.oc-hotel{ width:min(76vw, 300px); text-align:center; display:flex; flex-direction:column; align-items:center; }
section.oc-section .oc-hotel svg{ width:80px; height:62px; color:var(--oc-suave); }
section.oc-section .oc-hotel .tag{ margin-top:8px; padding:4px 12px; border-radius:999px; background:var(--oc-borde); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oc-principal); }
section.oc-section .oc-hotel h3{ margin:12px 0 0; font-family:var(--oc-fuente-titulo); font-weight:400; font-size:1.35rem; color:var(--oc-principal); }
section.oc-section .oc-hotel .stars{ color:var(--oc-acento); letter-spacing:.2em; font-size:.85rem; margin-top:2px; }
section.oc-section .oc-hotel .addr{ margin-top:6px; font-size:.92rem; color:var(--oc-suave); }
section.oc-section .oc-hotel .note{ margin-top:10px; padding-top:10px; border-top:1px solid var(--oc-borde); font-size:.9rem; color:var(--oc-texto); }
section.oc-section .oc-hotel .oc-btn{ margin-top:16px; }
/* ---------- clima ---------- */
.oc-w-now{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:18px; }
section.oc-section .oc-w-now svg{ width:54px; height:54px; }
section.oc-section .oc-w-now b{ font-family:var(--oc-fuente-titulo); font-weight:400; font-size:2.8rem; line-height:1; color:var(--oc-texto); }
section.oc-section .oc-w-now .d{ text-align:left; font-size:.92rem; color:var(--oc-suave); line-height:1.35; }
section.oc-section .oc-w-now .d strong{ display:block; color:var(--oc-principal); font-weight:600; }
section.oc-section .oc-w-day{ width:92px; padding:14px 6px 12px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--oc-borde); background:var(--oc-superficie); display:flex; flex-direction:column; align-items:center; gap:4px; }
section.oc-section .oc-w-day.is-event{ box-shadow:inset 0 0 0 1.5px var(--oc-acento); }
section.oc-section .oc-w-day .n{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--oc-suave); }
section.oc-section .oc-w-day .f{ font-size:.95rem; color:var(--oc-texto); }
section.oc-section .oc-w-day svg{ width:30px; height:30px; margin:4px 0; }
section.oc-section .oc-w-day .t{ font-size:.92rem; color:var(--oc-texto); }
section.oc-section .oc-w-day .t span{ color:var(--oc-suave); font-size:.85em; }
section.oc-section .oc-w-day .r{ font-size:.74rem; color:var(--oc-acento); }
section.oc-section .oc-w-note{ margin-top:14px; font-size:.85rem; font-style:italic; color:var(--oc-suave); }
/* ---------- menú flotante (docs/SPEC_MENU_FLOTANTE.md) ---------- */
.oc-nav{ position:fixed; top:12px; left:12px; z-index:900; opacity:1; visibility:visible; transform:none; font-family:var(--oc-fuente-texto); }
.oc-nav-pill.oc-nav-pill{ display:flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; border:1px solid var(--oc-borde); background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 6px 16px -6px rgba(0,0,0,.3); color:var(--oc-principal); font:inherit; font-size:12px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.oc-nav-pill.oc-nav-pill svg{ width:15px; height:15px; color:var(--oc-acento); }
.oc-nav-pill.oc-nav-pill .chev{ width:12px; height:12px; color:var(--oc-suave); transition:transform .2s ease; }
.oc-nav-pill.oc-nav-pill[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.oc-nav-drop.oc-nav-drop{ position:absolute; top:100%; left:0; margin-top:8px; width:240px; max-height:82vh; overflow-y:auto; padding:10px; border-radius:18px; border:1px solid var(--oc-borde); background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 24px 48px -16px rgba(0,0,0,.35); }
.oc-nav-drop.oc-nav-drop[hidden]{ display:none; }
.oc-nav-head.oc-nav-head{ display:flex; justify-content:space-between; align-items:center; padding:6px 12px 8px; margin-bottom:6px; border-bottom:1px solid var(--oc-borde); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--oc-principal); font-weight:700; }
.oc-nav-head.oc-nav-head i{ width:8px; height:8px; border-radius:50%; background:var(--oc-acento); }
.oc-nav-drop.oc-nav-drop a{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; color:#3a3a3a; text-decoration:none; font-size:14px; }
.oc-nav-drop.oc-nav-drop a:hover{ background:rgba(0,0,0,.04); color:var(--oc-principal); }
.oc-nav-drop.oc-nav-drop a svg{ width:15px; height:15px; color:var(--oc-acento); flex:none; }
.oc-nav-drop.oc-nav-drop a.is-cta{ margin-top:4px; background:var(--oc-principal); color:var(--oc-boton-texto); font-weight:600; }
.oc-nav-drop.oc-nav-drop a.is-cta svg{ color:var(--oc-boton-texto); }

/* Alternancia cromática de las secciones añadidas: la tipografía mantiene contraste. */
section.oc-section.oc-section[data-oc-tone="claro"]{
  --oc-principal:var(--color-primary);
  --oc-acento:var(--color-primary-light);
  --oc-superficie:rgb(255 255 255 / 72%);
  --oc-texto:var(--color-paper-text);
  --oc-suave:color-mix(in srgb, var(--color-paper-text) 70%, transparent);
  --oc-borde:color-mix(in srgb, var(--color-primary) 16%, transparent);
  --oc-boton-texto:#fff;
}
section.oc-section.oc-section[data-oc-tone="oscuro"]{
  --oc-principal:var(--color-accent);
  --oc-acento:var(--color-accent);
  --oc-superficie:rgb(255 255 255 / 7%);
  --oc-texto:var(--color-text);
  --oc-suave:var(--color-muted);
  --oc-borde:var(--color-border);
  --oc-boton-texto:var(--color-bg);
}

/* Línea joya degradada para separar los bloques sin cubrir sus fotos. */
section.oc-section::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  left:50%;
  width:min(84%, 520px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--oc-acento) 18%, var(--oc-principal) 50%, var(--oc-acento) 82%, transparent);
  opacity:.7;
  pointer-events:none;
}


/* Flores grandes y divisores tonales para cada sección añadida. */
section.oc-section .oc-transition-flower { position:absolute; z-index:6; top:calc((var(--torn-edge-height, 50px) - var(--transition-flower-height, 345px)) / 2); left:50%; width:min(100vw, 480px); height:var(--transition-flower-height, 345px); transform:translateX(-50%); pointer-events:none; }
section.oc-section .oc-transition-flower img { width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 7px 8px rgba(0,0,0,.14)); }
section.oc-section .oc-inner { position:relative; z-index:2; }
section.oc-section.menu-section-hidden { display:none !important; }
.oc-music-toggle.menu-section-hidden { display:none !important; }
.oc-nav-drop .oc-menu-item { display:flex; align-items:center; gap:4px; }
.oc-nav-drop .oc-menu-item > a { flex:1; min-width:0; }
.oc-nav-drop .oc-menu-item.is-hidden > a { opacity:.52; }
.oc-nav-drop .oc-menu-visibility { flex:none; position:relative; width:34px; height:20px; padding:2px; border:1px solid var(--oc-acento); border-radius:999px; background:transparent; cursor:pointer; }
.oc-nav-drop .oc-menu-visibility span { display:block; width:14px; height:14px; border-radius:50%; background:var(--oc-acento); transition:transform .2s ease; }
.oc-nav-drop .oc-menu-visibility[aria-checked="true"] span { transform:translateX(13px); }
.oc-nav-drop .oc-menu-visibility:focus-visible { outline:2px solid var(--oc-acento); outline-offset:2px; }
/* Todas las secciones añadidas usan el mismo margen y tamaño floral. */
section.oc-section .oc-transition-flower { z-index:6; top:calc((var(--torn-edge-height, 50px) - var(--transition-flower-height, 345px)) / 2); width:min(100vw, 480px); height:var(--transition-flower-height, 345px); }
section.oc-section .oc-inner { z-index:7; }
section.oc-section.oc-video { width:100%; height:auto; aspect-ratio:auto; overflow:visible; border-radius:0; background:var(--oc-section-fondo, var(--oc-fondo, transparent)); padding:var(--section-padding, 72px) 22px; }
div.oc-video { position:relative; width:100%; height:auto; aspect-ratio:16/9; overflow:hidden; border-radius:16px; background:#111; }
@media (max-width:480px) {
  section.oc-section .oc-transition-flower { top:calc((var(--torn-edge-height, 36px) - var(--transition-flower-height, 168.75px)) / 2); width:min(75vw, 360px); height:var(--transition-flower-height, 168.75px); }
}
/* Divisor al inicio de cada sección; ramos horizontales quedan delante. */
section.oc-section::after { content:""; position:absolute; z-index:5; top:-4px; left:50%; width:7px; height:7px; transform:translateX(-50%) rotate(45deg); border:1px solid var(--oc-acento); background:var(--oc-section-fondo, var(--oc-fondo, transparent)); pointer-events:none; }
section.oc-section.oc-section { padding:calc(var(--section-padding, 72px) + 24px) clamp(64px, 10vw, 140px); }
section.oc-section.oc-video { width:100%; height:auto; aspect-ratio:auto; overflow:visible; border-radius:0; background:var(--oc-section-fondo, var(--oc-fondo, transparent)); padding:calc(var(--section-padding, 72px) + 24px) clamp(64px, 10vw, 140px); }
.oc-music-toggle { position:fixed; z-index:1000; top:max(14px, env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right)); display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid var(--color-border); border-radius:50%; background:rgb(18 61 50 / 92%); color:var(--color-paper); box-shadow:0 8px 22px rgba(0,0,0,.24); cursor:pointer; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .2s ease, background .2s ease; }
.oc-music-toggle:hover { transform:scale(1.06); background:var(--color-primary-light); }
.oc-music-toggle:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
.oc-music-toggle svg { width:19px; height:19px; }