/* Salto de Delfines — hojas: VIDRIO DE MAR (hoja modal turquesa translúcida con orilla de espuma arriba), "Todos los
   datos" (la caracola de la fiesta), el formulario de la manada, la manada de delfines, el visor de fotos y el aviso
   del demo. Mismos colores que base.css: turquesa, aqua, coral suave, arena, lila y nácar. */
.sd .hoja { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sd .hoja-fondo { position: absolute; inset: 0; background: rgba(4, 30, 46, .5); opacity: 0; transition: opacity .28s; }
.sd .hoja.is-in .hoja-fondo { opacity: 1; }
.sd .hoja.is-out .hoja-fondo { opacity: 0; }
.sd .hoja-vidrio { position: relative; width: 100%; max-height: calc(100% - var(--safe-t) - 20px); overflow: auto; overscroll-behavior: contain; padding: 32px 16px calc(var(--safe-b) + 20px);
  border-radius: 30px 30px 0 0; transform: translateY(105%); transition: transform .42s cubic-bezier(.25, 1.15, .4, 1);
  background: radial-gradient(120% 40% at 80% 0%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #ECFDFB, #CDEFEC 70%, #BFE8E6);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), 0 -10px 40px rgba(4, 30, 46, .4); scrollbar-width: thin; }
.sd .hoja.is-full .hoja-vidrio { height: calc(100% - var(--safe-t) - 12px); }
.sd .hoja.is-in .hoja-vidrio { transform: none; }
.sd .hoja.is-out .hoja-vidrio { transform: translateY(105%); transition-duration: .26s; transition-timing-function: ease-in; }
/* la espuma de la orilla: ondas y burbujas blancas sobre el canto de arriba */
.sd .espuma { position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none; border-radius: 30px 30px 0 0; background:
  radial-gradient(14px 10px at 14px 0, #FFFFFF 98%, transparent 100%) 0 0 / 28px 12px repeat-x,
  radial-gradient(circle at 6px 15px, rgba(255, 255, 255, .95) 0 2.6px, transparent 3.4px) 3px 0 / 23px 22px repeat-x,
  radial-gradient(circle at 15px 18px, rgba(255, 255, 255, .8) 0 1.8px, transparent 2.6px) 9px 0 / 31px 22px repeat-x; }
.sd .hoja-vidrio .espuma { position: sticky; display: block; top: -32px; margin: -32px -16px 6px; height: 26px; z-index: 2; }
.sd .fin .espuma { border-radius: 28px 28px 0 0; }
.sd .hoja-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sd .hoja-cabeza.is-solo { justify-content: flex-end; margin-bottom: 0; }
.sd .hoja-k { margin: 0; font: 800 14px/1.3 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--mar); }
.sd .hoja-titulos h2 { margin: 0; font: 400 clamp(25px, 7.6cqw, 31px)/1.3 var(--f-playa); color: var(--tinta); }
.sd .hoja-x { flex: none; }

/* ---------- "Todos los datos": la caracola de la fiesta ---------- */
.sd .tb-lead { margin: 0 0 12px; padding: 10px 14px; border-radius: 18px; background: var(--nacar); box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .2); font: 800 17px/1.35 var(--f-texto); text-align: center; }
.sd .tb-sec { margin: 0 0 12px; padding: 12px 14px 14px; border-radius: 20px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .18), 0 3px 8px rgba(6, 30, 50, .08); display: flex; flex-direction: column; gap: 10px; }
.sd .tb-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 19px/1.2 var(--f-texto); color: var(--tinta); }
.sd .tb-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #063B44; background: radial-gradient(circle at 32% 28%, #E4FFFB, var(--aqua) 60%); box-shadow: inset 0 0 0 1.5px #0B6E73; }
.sd .tb-sec p { margin: 0; font: 600 16px/1.45 var(--f-texto); }
.sd .tb-big { font-weight: 800 !important; font-size: 19px !important; }
.sd .tb-faq { border-radius: 14px; background: rgba(141, 238, 230, .18); box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .16); }
.sd .tb-faq summary { min-height: 44px; display: flex; align-items: center; padding: 6px 12px; font: 800 16px/1.3 var(--f-texto); cursor: pointer; }
.sd .tb-faq p { padding: 0 12px 10px; }
.sd .regalos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sd .regalos li { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .18); }
.sd .regalos li.is-destacado { background: var(--nacar); box-shadow: inset 0 0 0 2px var(--turquesa); }
.sd .rg-txt { flex: 1; display: flex; flex-direction: column; font: 600 15px/1.3 var(--f-texto); }
.sd .rg-txt strong { font-size: 16.5px; font-weight: 800; }
.sd .fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sd .foto { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; background: var(--arena); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 1.5px rgba(11, 59, 74, .3); }
.sd .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd .foto span { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, .92); font: 800 13px/1.5 var(--f-texto); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd .tb-cta { display: flex; flex-direction: column; gap: 6px; margin: 18px 0 8px; }
.sd .limite { margin: 0; text-align: center; font: 700 15px/1.4 var(--f-texto); color: var(--tinta-2); }
.sd .tb-anfitriones { margin: 6px 0 0; text-align: center; font: 400 22px/1.4 var(--f-playa); color: var(--mar-d); }

/* ---------- formulario: únase a la manada ---------- */
.sd .fm { display: flex; flex-direction: column; gap: 10px; }
.sd .fm-vista { display: flex; flex-direction: column; align-items: center; padding: 10px 10px 8px; border-radius: 22px; background: linear-gradient(180deg, #FFC9A8 0%, #FFE6BE 46%, #4FB8CC 46.5%, #1D7E96 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 1.5px rgba(11, 59, 74, .3); overflow: hidden; }
.sd .fm-vista-delfin { display: block; line-height: 0; filter: drop-shadow(0 6px 4px rgba(6, 30, 50, .35)); animation: sd-flota 2.4s ease-in-out 3; }
@keyframes sd-flota { 50% { transform: translateY(-5px) rotate(-3deg); } }
.sd .fm-vista-nombre { margin-top: 4px; padding: 0 14px; border-radius: 99px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .4); font: 800 16px/1.7 var(--f-texto); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd .fm-l { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 4px 0 -4px; font: 800 16px/1.3 var(--f-texto); color: var(--tinta); }
.sd .fm-cuenta { font: 700 13px var(--f-texto); color: var(--tinta-2); }
.sd .fm input[type="text"], .sd .fm textarea { width: 100%; min-height: 50px; padding: 10px 14px; border: 0; border-radius: 16px; background: #FFFFFF; color: var(--tinta); font: 700 17px/1.35 var(--f-texto); box-shadow: inset 0 0 0 2px rgba(11, 59, 74, .55); resize: vertical; }
.sd .fm input::placeholder, .sd .fm textarea::placeholder { color: #5C7A84; }
.sd .fm-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 99px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .25); }
.sd .fm-seg-b { min-height: 46px; border: 0; border-radius: 99px; background: transparent; font: 800 15.5px/1.15 var(--f-texto); color: var(--tinta); cursor: pointer; }
.sd .fm-seg-b[aria-checked="true"] { background: var(--mar); color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4), 0 3px 0 var(--mar-d); }
.sd .fm-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sd .fm-personas[hidden], .sd .fm-bloque[hidden] { display: none; }
.sd .fm-paso { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .18); }
.sd .fm-paso-l { font: 800 15px var(--f-texto); }
.sd .fm-paso-c { display: flex; align-items: center; gap: 10px; }
.sd .fm-paso-c output { min-width: 26px; text-align: center; font: 800 24px var(--f-texto); }
.sd .fm-mas { width: 44px; height: 44px; }
.sd .fm-mas svg { width: 24px; height: 24px; }
.sd .fm-colores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sd .fm-delfin { display: grid; place-items: center; min-height: 56px; padding: 4px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .18); cursor: pointer; }
.sd .fm-delfin[aria-checked="true"] { background: #FFFFFF; box-shadow: inset 0 0 0 2.5px var(--tinta), 0 0 0 3px var(--aqua-2); }
.sd .fm-error { min-height: 1.2em; margin: 0; color: #8E2A20; font: 800 15.5px var(--f-texto); }
.sd .fm-error:empty { min-height: 0; }

/* ---------- la manada ---------- */
.sd .mn-sub { margin: 0 0 10px; font: 700 16px/1.4 var(--f-texto); }
.sd .mn-mar { position: relative; overflow: hidden; padding: 70px 10px 26px; border-radius: 24px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 1.5px rgba(11, 59, 74, .3);
  background: radial-gradient(28% 22% at 78% 26%, rgba(255, 246, 214, .95), rgba(255, 214, 160, 0) 72%), linear-gradient(180deg, #5B4A9E 0%, #D97FA6 24%, #FFC28A 38%, #3FB0C6 38.5%, #1D7E96 70%, #0A4A60 100%); }
.sd .mn-sol { position: absolute; right: 16%; top: 14%; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, #FFF8DC 0 45%, #FFE2A8 60%, rgba(255, 226, 168, 0) 72%); }
.sd .mn-olas { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: none; background:
  radial-gradient(14px 5px at 50% 0, rgba(255, 255, 255, .5), transparent) 0 52% / 60px 40px repeat-x,
  radial-gradient(18px 5px at 50% 0, rgba(255, 255, 255, .35), transparent) 20px 74% / 80px 40px repeat-x; }
.sd .mn-lider { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin: -36px 0 2px; }
.sd .mn-lider-n { margin-top: -2px; padding: 0 14px; border-radius: 99px; background: var(--nacar); box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .45); font: 800 15px/1.7 var(--f-texto); }
.sd .mn-fila { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px 4px; }
.sd .dm { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sd .dm-delfin { display: block; line-height: 0; filter: drop-shadow(0 5px 3px rgba(4, 24, 40, .35)); }
.sd .is-nadando .dm-delfin { animation: sd-nada 2.6s var(--d, 0s) ease-in-out 3; }
@keyframes sd-nada { 50% { transform: translateY(-6px) rotate(-4deg); } }
.sd .dm-nombre { max-width: 100%; margin-top: -4px; padding: 0 9px; border-radius: 99px; background: rgba(255, 255, 255, .94); box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .35); font: 800 13px/1.6 var(--f-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd .dm.is-mio .dm-nombre { background: var(--aqua); box-shadow: inset 0 0 0 1.5px #0B6E73; }
/* el delfín nuevo salta (arco) y se une a la manada con su salpicadura */
.sd .dm.is-llega .dm-delfin { animation: sd-llega 1.4s .25s cubic-bezier(.35, 0, .4, 1) both; }
@keyframes sd-llega { 0% { transform: translate(140px, 90px) rotate(-55deg); opacity: 0; } 15% { opacity: 1; } 55% { transform: translate(60px, -70px) rotate(0deg); } 85% { transform: translate(0, 6px) rotate(30deg); } 100% { transform: none; } }
.sd .dm { position: relative; }
.sd .dm-salpica { position: absolute; left: 50%; top: 40px; width: 90px; height: 30px; margin-left: -45px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .9); opacity: 0; animation: sd-salpica .8s 1.35s ease-out both; }
@keyframes sd-salpica { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
.sd .mn-cuenta { margin: 12px 0 6px; text-align: center; font: 800 18px var(--f-texto); }
.sd .mn-cuenta strong { font: 400 34px/1 var(--f-playa); color: var(--mar); margin-right: 4px; }
.sd .mn-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.sd .mn-lista li { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 6px; border-radius: 16px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .16); }
.sd .ml-delfin { line-height: 0; flex: none; }
.sd .ml-nombre { flex: 1; font: 800 16px/1.3 var(--f-texto); }
.sd .ml-meta { font: 700 14px var(--f-texto); color: var(--tinta-2); }
.sd .mn-vacio { text-align: center; font: 800 17px var(--f-texto); }
.sd .mn-h3 { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font: 800 18px var(--f-texto); }
.sd .mn-msgs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.sd .mn-msgs li { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 16px; background: #F1FFFC; box-shadow: inset 0 0 0 1.5px rgba(11, 59, 74, .18); font: 600 15.5px/1.4 var(--f-texto); }
.sd .mn-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* ---------- visor de fotos ---------- */
.sd .visor .hoja-cuerpo { position: relative; }
.sd .visor-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sd .visor-img { max-width: 100%; max-height: calc(100cqh - 220px); border-radius: 18px; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4.5px rgba(11, 59, 74, .4), 0 8px 20px rgba(6, 30, 50, .3); }
.sd .visor-pie { margin: 0; font: 400 22px/1.3 var(--f-playa); }
.sd .visor-ant, .sd .visor-sig { position: absolute; top: 40%; }
.sd .visor-ant { left: 4px; } .sd .visor-ant svg { transform: rotate(180deg); }
.sd .visor-sig { right: 4px; }

/* ---------- aviso del demo ---------- */
.sd .demo-nota .hoja-cuerpo { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font: 700 17px/1.45 var(--f-texto); }
.sd .demo-nota p { margin: 0; }
.sd .demo-ic { color: var(--mar); }