/* Crucero de la familia — hoja de estilo única */
:root{
  --mar:#03294a; --mar-2:#0a4372; --turquesa:#0fb5c9; --turquesa-claro:#7fe3ee;
  --coral:#ff6b5e; --sol:#ffc247; --arena:#f6e7d2;
  --crema:#fbf8f3; --tinta:#12222e; --gris:#5d6f7c; --linea:#e6ddd0;
  --blanco:#fff; --sombra:0 10px 40px rgba(3,41,74,.10); --sombra-fuerte:0 18px 60px rgba(3,41,74,.20);
  --r:20px; --max:1120px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--tinta);background:var(--crema);
  -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3{line-height:1.08;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.4rem,6.6vw,4.6rem);font-weight:800}
h2{font-size:clamp(1.8rem,4.2vw,2.9rem);font-weight:800}
h3{font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.centro{text-align:center}
.sub{color:var(--gris);font-size:1.06rem;max-width:62ch}
.centro .sub{margin-left:auto;margin-right:auto}
section{padding:clamp(56px,8vw,104px) 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--turquesa);background:rgba(15,181,201,.10);
  padding:7px 14px;border-radius:999px;margin-bottom:16px;
}

/* ───── Navegación ───── */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(251,248,243,.82);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.nav.scrolled{border-color:var(--linea);box-shadow:0 2px 20px rgba(3,41,74,.05)}
.nav-in{max-width:var(--max);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;text-decoration:none}
.marca .barquito{font-size:1.35rem;animation:flota 4s ease-in-out infinite}
.nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-links a{text-decoration:none;font-size:.94rem;font-weight:600;color:var(--gris);transition:color .2s}
.nav-links a:hover{color:var(--mar)}
@media(max-width:860px){.nav-links a:not(.btn){display:none}}

/* ───── Botones ───── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;
  padding:14px 26px;font-weight:700;font-size:1rem;text-decoration:none;letter-spacing:-.01em;
  background:var(--mar);color:#fff;box-shadow:0 8px 24px rgba(3,41,74,.22);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .18s;
}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 34px rgba(3,41,74,.3)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.coral{background:linear-gradient(135deg,var(--coral),#ff8a52);box-shadow:0 8px 26px rgba(255,107,94,.4)}
.btn.claro{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.5);box-shadow:none}
.btn.claro:hover{background:rgba(255,255,255,.28)}
.btn.fina{background:transparent;color:var(--mar);border:1.5px solid var(--linea);box-shadow:none;padding:12px 22px}
.btn.fina:hover{border-color:var(--mar)}
.btn.mini{padding:9px 16px;font-size:.88rem}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ───── Hero ───── */






.hero h1 .destello{background:linear-gradient(100deg,var(--sol),#ffe9a8 50%,var(--sol));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:brillo 5s linear infinite}
.hero-lema{font-size:clamp(1.05rem,2.3vw,1.35rem);max-width:44ch;margin:22px 0 34px;color:rgba(255,255,255,.94);text-shadow:0 2px 16px rgba(0,0,0,.3)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-datos{display:flex;gap:34px;flex-wrap:wrap;margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22)}
.dato .n{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;letter-spacing:-.03em;display:block;line-height:1}
.dato .t{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.75);font-weight:600}






/* ───── Tarjetas ───── */
.rejilla{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{
  background:var(--blanco);border-radius:var(--r);padding:28px;box-shadow:var(--sombra);
  border:1px solid rgba(230,221,208,.7);transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sombra-fuerte)}
.card .emoji{font-size:2.1rem;display:block;margin-bottom:14px}
.card h3{margin-bottom:8px}
.card p{color:var(--gris);font-size:.97rem;margin:0}

/* ───── Planes / itinerarios ───── */
.planes{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.plan{
  background:var(--blanco);border-radius:26px;overflow:hidden;box-shadow:var(--sombra);
  display:flex;flex-direction:column;border:1px solid rgba(230,221,208,.7);position:relative;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s;
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--sombra-fuerte)}
.plan-foto{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mar)}
.plan-foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.3,1)}
.plan:hover .plan-foto img{transform:scale(1.07)}
.plan-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,41,74,0) 40%,rgba(3,41,74,.8))}
.plan-foto .rotulo{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;color:#fff}
.plan-foto .rotulo h3{font-size:1.55rem;font-weight:800;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.plan-foto .rotulo span{font-size:.88rem;opacity:.9}
.cinta{
  position:absolute;top:16px;right:16px;z-index:3;background:var(--sol);color:#3a2a00;font-weight:800;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.plan-cuerpo{padding:24px;display:flex;flex-direction:column;gap:16px;flex:1}
.ruta{list-style:none;margin:0;padding:0;position:relative}
.ruta::before{content:"";position:absolute;left:8px;top:12px;bottom:12px;width:2px;background:linear-gradient(var(--turquesa-claro),var(--turquesa),var(--turquesa-claro));border-radius:2px}
.ruta li{position:relative;padding:0 0 14px 30px;font-size:.94rem}
.ruta li:last-child{padding-bottom:0}
.ruta li::before{
  content:"";position:absolute;left:3px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--blanco);border:2.5px solid var(--turquesa);
}
.ruta li.mar::before{border-color:var(--turquesa-claro);background:var(--turquesa-claro)}
.ruta li b{display:block;font-weight:700;letter-spacing:-.01em}
.ruta li span{color:var(--gris);font-size:.88rem}
.plan-precio{
  margin-top:auto;padding-top:16px;border-top:1px dashed var(--linea);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.plan-precio .cifra{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--mar)}
.plan-precio .nota{font-size:.8rem;color:var(--gris)}
.pros{display:flex;flex-wrap:wrap;gap:7px}
.pill{font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--arena);color:#6b4f22}
.pill.ok{background:rgba(15,181,201,.13);color:#0a6a77}
.pill.ojo{background:rgba(255,107,94,.12);color:#a8352a}

/* ───── Día a bordo ───── */
.abordo{background:linear-gradient(180deg,var(--mar) 0%,var(--mar-2) 100%);color:#fff;position:relative;overflow:hidden}
.abordo .sub{color:rgba(255,255,255,.72)}
.abordo .eyebrow{background:rgba(127,227,238,.14);color:var(--turquesa-claro)}
.horas{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:38px}
.hora{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px;backdrop-filter:blur(6px);transition:background .3s,transform .3s}
.hora:hover{background:rgba(255,255,255,.13);transform:translateY(-4px)}
.hora .h{font-size:.82rem;font-weight:800;letter-spacing:.1em;color:var(--sol)}
.hora h3{margin:6px 0 8px;font-size:1.14rem}
.hora p{color:rgba(255,255,255,.75);font-size:.93rem;margin:0}
.mosaico{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:38px}
.mosaico figure{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;position:relative}
.mosaico img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.mosaico figure:hover img{transform:scale(1.08)}
.mosaico figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-size:.86rem;font-weight:600;background:linear-gradient(transparent,rgba(3,41,74,.9))}

/* ───── Edades ───── */
.edades .card{background:linear-gradient(160deg,#fff,#fdf9f2)}
.lista-check{list-style:none;padding:0;margin:12px 0 0;font-size:.93rem;color:var(--gris)}
.lista-check li{padding-left:24px;position:relative;margin-bottom:7px}
.lista-check li::before{content:"⚓";position:absolute;left:0;font-size:.85rem;opacity:.6}

/* ───── Dinero ───── */
.hucha{background:var(--arena);border-radius:26px;padding:clamp(26px,4vw,44px);display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:center}
.hucha .grande{font-size:clamp(2.4rem,6vw,3.6rem);font-weight:800;letter-spacing:-.04em;color:var(--mar);line-height:1}
.barra-meses{display:flex;gap:5px;align-items:flex-end;height:92px;margin-top:18px}
.barra-meses i{flex:1;background:linear-gradient(180deg,var(--turquesa),var(--mar));border-radius:5px 5px 0 0;opacity:.85;transform-origin:bottom;animation:crece .9s cubic-bezier(.2,.9,.3,1) backwards}

/* ───── Fechas / votación ───── */
.opcion{
  background:#fff;border:1px solid var(--linea);border-radius:18px;padding:18px 20px;display:flex;
  gap:16px;align-items:center;flex-wrap:wrap;box-shadow:0 4px 16px rgba(3,41,74,.05);transition:border-color .25s,box-shadow .25s;
}
.opcion:hover{border-color:var(--turquesa-claro);box-shadow:0 8px 26px rgba(3,41,74,.09)}
.opcion .txt{flex:1;min-width:200px}
.opcion .txt b{display:block;font-size:1.06rem;letter-spacing:-.01em}
.opcion .txt span{font-size:.87rem;color:var(--gris)}
.votos{display:flex;gap:8px}
.voto{
  border:1.5px solid var(--linea);background:#fff;border-radius:999px;padding:8px 15px;font-size:.88rem;
  font-weight:700;color:var(--gris);transition:all .18s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;
}
.voto:hover{transform:translateY(-2px);border-color:var(--gris)}
.voto.on[data-v="1"]{background:#0fb5c9;border-color:#0fb5c9;color:#fff}
.voto.on[data-v="0"]{background:var(--sol);border-color:var(--sol);color:#4a3300}
.voto.on[data-v="-1"]{background:#ffe3e0;border-color:#ffb3ac;color:#a8352a}
.marcador{display:flex;gap:4px;align-items:center;font-size:.82rem;font-weight:700;color:var(--gris);min-width:120px}
.barrita{flex:1;height:9px;border-radius:6px;background:#eee6da;overflow:hidden;display:flex;min-width:70px}
.barrita i{display:block;height:100%;transition:width .6s cubic-bezier(.2,.8,.3,1)}
.barrita .s{background:var(--turquesa)}.barrita .q{background:var(--sol)}.barrita .n{background:#ffb3ac}

/* ───── Acceso ───── */
.acceso{background:linear-gradient(150deg,var(--mar),#062f56 60%,#0a4372);color:#fff;border-radius:30px;padding:clamp(30px,5vw,58px);box-shadow:var(--sombra-fuerte);position:relative;overflow:hidden}
.acceso::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(15,181,201,.35),transparent 68%);top:-160px;right:-120px;animation:pulso 8s ease-in-out infinite}
.acceso h2,.acceso p{position:relative;z-index:1}
.acceso .sub{color:rgba(255,255,255,.75)}
form.login{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;position:relative;z-index:1;max-width:640px}
input,select,textarea{
  font:inherit;padding:14px 16px;border-radius:14px;border:1.5px solid var(--linea);background:#fff;
  color:var(--tinta);width:100%;transition:border-color .2s,box-shadow .2s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--turquesa);box-shadow:0 0 0 4px rgba(15,181,201,.18)}
textarea{resize:vertical;min-height:88px}
form.login input{flex:1;min-width:190px;width:auto;border-color:transparent}
label{display:block;font-size:.86rem;font-weight:700;margin-bottom:6px;color:var(--gris)}
.campos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.aviso{margin-top:14px;font-size:.92rem;font-weight:600;min-height:1.2em;position:relative;z-index:1}
.aviso.err{color:#ffb3ac}.aviso.ok{color:var(--turquesa-claro)}

/* ───── Zona familia ───── */
#familia{display:none}
body.dentro #familia{display:block}
body.dentro #acceso-bloque{display:none}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:6px;background:#fff;border:1px solid var(--linea);border-radius:999px;box-shadow:var(--sombra);margin-bottom:30px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;border-radius:999px;padding:11px 20px;font-weight:700;font-size:.94rem;color:var(--gris);white-space:nowrap;transition:all .2s}
.tab.on{background:var(--mar);color:#fff}
.panel{display:none;animation:aparece .4s cubic-bezier(.2,.8,.3,1)}
.panel.on{display:block}
.persona-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--linea);border-radius:999px;padding:7px 14px;font-size:.88rem;font-weight:600}
.persona-chip .punto{width:9px;height:9px;border-radius:50%}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.galeria figure{margin:0;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1;background:#eee6da;cursor:zoom-in}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.galeria figure:hover img{transform:scale(1.06)}
.galeria .autor{position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;font-size:.76rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));font-weight:600}
.galeria .quitar{position:absolute;top:6px;right:6px;border:0;background:rgba(0,0,0,.55);color:#fff;border-radius:50%;width:28px;height:28px;font-size:.9rem;opacity:0;transition:opacity .2s}
.galeria figure:hover .quitar{opacity:1}
.mensaje{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:16px 18px;margin-bottom:12px;position:relative}
.mensaje .cab{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
.mensaje .cab b{font-size:.95rem}
.mensaje .cab time{font-size:.78rem;color:var(--gris)}
.mensaje p{margin:0;white-space:pre-wrap;font-size:.97rem}
.mensaje .quitar{position:absolute;top:12px;right:12px;border:0;background:transparent;color:var(--gris);font-size:1rem;opacity:.5}
.mensaje .quitar:hover{opacity:1;color:var(--coral)}
.tabla{width:100%;border-collapse:collapse;font-size:.93rem;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--sombra)}
.tabla th,.tabla td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--linea)}
.tabla th{background:#f6f1e8;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gris)}
.tabla tr:last-child td{border-bottom:0}
.estado-tag{font-size:.76rem;font-weight:800;padding:4px 10px;border-radius:999px}
.estado-tag.dentro{background:rgba(15,181,201,.15);color:#0a6a77}
.estado-tag.quiza{background:rgba(255,194,71,.22);color:#7a5400}
.estado-tag.fuera{background:#f0eae1;color:var(--gris)}

/* ───── Visor de fotos ───── */
.visor{position:fixed;inset:0;background:rgba(4,20,34,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
.visor.on{display:flex;animation:aparece .25s}
.visor img{max-width:96vw;max-height:88vh;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.visor button{position:absolute;top:20px;right:22px;border:0;background:rgba(255,255,255,.16);color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.3rem}

/* ───── Pie ───── */
footer{background:var(--mar);color:rgba(255,255,255,.62);padding:56px 0 40px;font-size:.86rem}
footer a{color:var(--turquesa-claro)}
footer .creditos{font-size:.74rem;opacity:.55;margin-top:22px;line-height:1.7}

/* ───── Animaciones ───── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.visto{opacity:1;transform:none}
@keyframes flota{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes vaiven{0%,100%{transform:translateX(0)}50%{transform:translateX(-18%)}}
@keyframes zoomLento{from{transform:scale(1.04)}to{transform:scale(1.15)}}
@keyframes brillo{to{background-position:200% center}}
@keyframes pulso{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes crece{from{transform:scaleY(0)}}
@keyframes confeti{to{transform:translateY(105vh) rotate(760deg);opacity:0}}
.confeti{position:fixed;top:-20px;width:11px;height:16px;z-index:300;pointer-events:none;animation:confeti 3.4s linear forwards}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ───── Ajustes de móvil (detectados en el e2e) ───── */
@media(max-width:560px){
  .marca{font-size:.95rem}
  .marca span:not(.barquito){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9.5rem}
  .nav-in{gap:12px;padding:10px 16px}
  .hero{padding:84px 0 130px}
  .hero-datos{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:38px}
  .dato .t{font-size:.72rem;letter-spacing:.06em}
  .opcion{padding:16px}
  .marcador{order:3;width:100%;min-width:0}
  .votos{width:100%}
  .voto{flex:1;padding:10px 8px;text-align:center}
  section{padding:48px 0}
}

/* ───── Tira de fotos de escalas y etiqueta de precio estimado ───── */
.tira-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tira-fotos img{aspect-ratio:1;object-fit:cover;border-radius:10px;transition:transform .5s}
.tira-fotos img:hover{transform:scale(1.05)}
.etiqueta-est{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#7a5400;background:rgba(255,194,71,.28);padding:3px 9px;border-radius:999px;vertical-align:middle;
}
.plan-precio .cifra{display:block}
.nota-precios{
  max-width:78ch;margin:34px auto 0;font-size:.87rem;color:var(--gris);line-height:1.65;
  background:#fff;border:1px dashed var(--linea);border-radius:16px;padding:18px 22px;
}
@media(max-width:640px){
  .card[style*="grid-template-columns:minmax"]{grid-template-columns:1fr!important}
  .card[style*="grid-template-columns:minmax"] > div{padding:0 22px 22px!important}
}

/* ═════════════ MODO DIVERSIÓN ═════════════ */

/* Cinta corredera */
.cinta-corredera{
  background:linear-gradient(90deg,var(--coral),var(--sol) 50%,var(--turquesa));
  color:#2a1500;overflow:hidden;padding:11px 0;font-weight:800;font-size:.92rem;
  letter-spacing:-.01em;border-top:3px solid #2a1500;border-bottom:3px solid #2a1500;
}
.cinta-pista{display:flex;gap:44px;width:max-content;animation:desfila 46s linear infinite;white-space:nowrap}
.cinta-corredera:hover .cinta-pista{animation-play-state:paused}
@keyframes desfila{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Emojis flotando en el hero */
.emojis-flotantes{position:absolute;inset:-40px 0 0;pointer-events:none;z-index:1}
.emojis-flotantes span{position:absolute;font-size:1.9rem;opacity:.85;animation:sube linear infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.emojis-flotantes span:nth-child(1){left:6%;animation-duration:19s;animation-delay:0s}
.emojis-flotantes span:nth-child(2){left:19%;animation-duration:24s;animation-delay:3s}
.emojis-flotantes span:nth-child(3){left:33%;animation-duration:21s;animation-delay:7s}
.emojis-flotantes span:nth-child(4){left:47%;animation-duration:26s;animation-delay:1.5s}
.emojis-flotantes span:nth-child(5){left:61%;animation-duration:18s;animation-delay:9s}
.emojis-flotantes span:nth-child(6){left:74%;animation-duration:23s;animation-delay:5s}
.emojis-flotantes span:nth-child(7){left:86%;animation-duration:27s;animation-delay:11s}
.emojis-flotantes span:nth-child(8){left:94%;animation-duration:20s;animation-delay:14s}
@keyframes sube{
  0%{transform:translateY(105vh) rotate(0);opacity:0}
  8%{opacity:.85}
  92%{opacity:.85}
  100%{transform:translateY(-15vh) rotate(340deg);opacity:0}
}

/* Título que se mueve un poco */
.titulo-baila{animation:balanceo 7s ease-in-out infinite;transform-origin:left center}
@keyframes balanceo{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
.guino{display:inline-block;animation:guino 3.2s ease-in-out infinite}
@keyframes guino{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-18deg) scale(1.15)}96%{transform:rotate(14deg) scale(1.15)}}

/* El reparto */
.reparto-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.ficha{
  background:#fff;border:2.5px solid var(--tinta);border-radius:18px;padding:20px 18px;position:relative;
  box-shadow:5px 5px 0 var(--tinta);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;
  cursor:default;display:flex;flex-direction:column;height:100%;
}
.ficha:hover{transform:translate(-3px,-3px) rotate(-1.6deg);box-shadow:9px 9px 0 var(--tinta)}
.ficha .cara{font-size:2.5rem;display:block;line-height:1;margin-bottom:10px;transition:transform .3s}
.ficha:hover .cara{transform:scale(1.22) rotate(9deg)}
.ficha .quien{font-weight:800;font-size:1.08rem;letter-spacing:-.02em;margin-bottom:2px}
.ficha .apodo{font-size:.82rem;color:var(--gris);font-style:italic;margin-bottom:14px;display:block;line-height:1.35}
.ficha .cargo{
  margin-top:auto;align-self:flex-start;text-align:left;text-wrap:balance;display:inline-block;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  background:var(--sol);color:#3a2a00;padding:5px 10px;border-radius:8px;border:1.5px solid var(--tinta);
}
.ficha.jefe{background:linear-gradient(150deg,#fff,#fff6df)}
.ficha.jefe .cargo{background:var(--coral);color:#fff}

/* Chistes */
.chistera{
  background:linear-gradient(150deg,#fff,#fff4ec);border:2.5px solid var(--tinta);border-radius:22px;
  padding:28px;box-shadow:6px 6px 0 var(--coral);position:relative;overflow:hidden;
}
.chistera::after{content:"🎪";position:absolute;right:-14px;bottom:-18px;font-size:6rem;opacity:.07;transform:rotate(-12deg)}
.chiste{font-size:1.12rem;line-height:1.6;min-height:6.5em;white-space:pre-line;font-weight:500;position:relative;z-index:1}
.chiste.cambia{animation:vuelta .42s cubic-bezier(.2,.8,.3,1)}
@keyframes vuelta{0%{opacity:0;transform:translateY(14px) rotateX(-28deg)}100%{opacity:1;transform:none}}
.contador-chistes{font-size:.8rem;color:var(--gris);font-weight:600}

/* Predicciones */
.prediccion{margin-bottom:14px}
.prediccion .fila{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:5px}
.prediccion .txt{font-size:.94rem;flex:1}
.prediccion .pct{font-weight:800;font-size:1.02rem;color:var(--mar);font-variant-numeric:tabular-nums}
.prediccion .pista{height:10px;border-radius:6px;background:#eee6da;overflow:hidden}
.prediccion .pista i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--turquesa),var(--sol),var(--coral));transition:width 1.1s cubic-bezier(.2,.8,.3,1)}

/* Gaviota que cruza de vez en cuando */
.gaviota{position:fixed;top:12%;left:-80px;font-size:2rem;z-index:55;pointer-events:none;animation:vuela 15s linear;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
@keyframes vuela{
  0%{transform:translateX(0) translateY(0) scaleX(1)}
  25%{transform:translateX(28vw) translateY(-40px) scaleX(1)}
  50%{transform:translateX(55vw) translateY(30px) scaleX(1)}
  75%{transform:translateX(80vw) translateY(-25px) scaleX(1)}
  100%{transform:translateX(112vw) translateY(10px) scaleX(1)}
}

/* Tarjetas con más chispa */
.card:hover .emoji{animation:brinco .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes brinco{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-12deg)}100%{transform:scale(1)}}
.plan:hover .cinta{animation:sello .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes sello{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.14) rotate(-5deg)}100%{transform:scale(1) rotate(0)}}
.voto:active{transform:scale(.9)}
.tab:hover{transform:translateY(-1px)}
.btn.coral:hover{animation:tembleque .45s}
@keyframes tembleque{0%,100%{transform:translateY(-2px) scale(1.02) rotate(0)}25%{transform:translateY(-2px) scale(1.02) rotate(-1.6deg)}75%{transform:translateY(-2px) scale(1.02) rotate(1.6deg)}}

@media(max-width:560px){
  .cinta-corredera{font-size:.82rem;padding:9px 0}
  .reparto-rejilla{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
  .ficha{padding:15px 13px;box-shadow:4px 4px 0 var(--tinta)}
  .ficha .cara{font-size:2rem}
  .ficha .quien{font-size:.96rem}
  .ficha .apodo{font-size:.76rem}
  .ficha .cargo{font-size:.68rem;padding:4px 8px}
  .chistera{padding:20px}
  .chiste{font-size:1rem}
  .emojis-flotantes span{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){
  .cinta-pista,.emojis-flotantes span,.titulo-baila,.guino,.gaviota{animation:none!important}
  .emojis-flotantes,.gaviota{display:none}
}

/* ═════════════ PORTADA v2 ═════════════ */
.eyebrow.chapa{
  background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.4);
  backdrop-filter:blur(6px);
}
.hero-lema{margin-bottom:6px}
.hero-rotativo{
  font-size:clamp(1rem,2.1vw,1.22rem);font-weight:700;color:var(--sol);min-height:1.6em;
  margin:0 0 22px;text-shadow:0 2px 14px rgba(0,0,0,.45);display:flex;align-items:center;gap:3px;
}
.hero-rotativo .cursor{
  display:inline-block;width:2.5px;height:1.05em;background:var(--sol);border-radius:2px;
  animation:parpadea 1.05s steps(2) infinite;
}
@keyframes parpadea{0%,50%{opacity:1}51%,100%{opacity:0}}

/* Plantilla de fichajes en el hero */
.plantilla{
  display:inline-flex;align-items:center;gap:14px;margin-top:24px;padding:11px 20px 11px 14px;
  border-radius:999px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.34);
  backdrop-filter:blur(10px);text-decoration:none;color:#fff;transition:all .25s cubic-bezier(.34,1.56,.64,1);
  max-width:100%;flex-wrap:wrap;
}
.plantilla:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
.plantilla .caras{display:flex}
.plantilla .caras span{
  width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-size:1.02rem;margin-left:-11px;border:2px solid rgba(255,255,255,.85);
  box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .25s;
}
.plantilla .caras span:first-child{margin-left:0}
.plantilla:hover .caras span{transform:translateY(-3px)}
.plantilla:hover .caras span:nth-child(2){transition-delay:.04s}
.plantilla:hover .caras span:nth-child(3){transition-delay:.08s}
.plantilla:hover .caras span:nth-child(4){transition-delay:.12s}
.plantilla:hover .caras span:nth-child(5){transition-delay:.16s}
.plantilla:hover .caras span:nth-child(6){transition-delay:.2s}
.plantilla-txt{font-size:.92rem;font-weight:600}
.plantilla-txt b{font-size:1.05rem}
.plantilla .flecha{display:inline-block;transition:transform .25s}
.plantilla:hover .flecha{transform:translateX(4px)}

/* Plan destacado */
.plan.destacado{border-color:var(--sol);box-shadow:0 0 0 3px rgba(255,194,71,.45),var(--sombra)}
.plan.destacado:hover{box-shadow:0 0 0 3px rgba(255,194,71,.6),var(--sombra-fuerte)}

/* Precios: adulto y niños */
.precio-bloque{display:flex;gap:22px;flex-wrap:wrap}
.plan-precio{flex-direction:column;align-items:flex-start;gap:10px}
.plan-precio .cifra{font-size:1.32rem;display:block}
.plan-precio .cifra.ninos{color:#0a6a77}
.etiqueta-est.ninos{background:rgba(15,181,201,.18);color:#0a6a77}
.plan-precio .nota{font-size:.8rem;line-height:1.55}

/* Tarjeta "aparte" */
.card.aparte{margin-top:30px;display:grid;grid-template-columns:minmax(190px,1fr) 2fr;gap:24px;align-items:center;padding:0;overflow:hidden}
.card.aparte img{height:100%;min-height:190px;object-fit:cover;width:100%}
.card.aparte > div{padding:24px 24px 24px 0}
@media(max-width:640px){
  .card.aparte{grid-template-columns:1fr}
  .card.aparte img{min-height:150px}
  .card.aparte > div{padding:0 22px 22px}
}

/* Polaroids de la portada */
.polaroids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;justify-content:center;max-width:830px;margin:0 auto}
.polaroid{
  background:#fff;padding:10px 10px 34px;border-radius:4px;box-shadow:0 10px 30px rgba(3,41,74,.18);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;position:relative;
}
.polaroid img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:2px;background:#eee6da}
.polaroid:hover{transform:scale(1.06) rotate(0deg)!important;box-shadow:0 18px 44px rgba(3,41,74,.28);z-index:2}
.polaroid::after{
  content:"";position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  width:60px;height:3px;border-radius:2px;background:var(--linea);
}
@media(max-width:560px){
  .polaroids{grid-template-columns:repeat(2,1fr);gap:12px}
  .polaroid{padding:8px 8px 26px}
  .polaroid img{width:100%;height:auto;aspect-ratio:1}
  .plantilla{gap:10px;padding:9px 15px 9px 11px}
  .plantilla .caras span{width:29px;height:29px;font-size:.9rem;margin-left:-9px}
  .plantilla-txt{font-size:.83rem}
  .precio-bloque{gap:16px}
}


/* ═══════════════════ HERO ILUSTRADO ═══════════════════ */
.hero{
  position:relative;overflow:hidden;color:#fff;isolation:isolate;
  padding:54px 0 0;min-height:min(calc(100svh - 66px),860px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0b3b66 0%,#12639b 34%,#3fa3c9 62%,#8fd8e4 82%,#cdeef2 100%);
}
.hero-contenido{
  position:relative;z-index:6;flex:1 0 auto;display:grid;gap:10px 34px;align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-areas:"texto arte" "billete arte";
  align-content:center;padding-bottom:12px;
}
.hero-texto{min-width:0;grid-area:texto}
.hero-arte{min-width:0;grid-area:arte;position:relative;display:flex;align-items:center;justify-content:center}
.billete{grid-area:billete;justify-self:start}
.hero h1{max-width:14ch;font-size:clamp(2.1rem,4.9vw,3.65rem);text-shadow:0 6px 26px rgba(2,26,48,.4)}
.hero h1 .todos{position:relative;display:inline-block}
.hero h1 .punto{color:var(--coral)}
.hero h1 .todos::after{
  content:"";position:absolute;left:-2%;right:8%;bottom:.07em;height:.13em;border-radius:99px;
  background:var(--coral);transform:scaleX(0);transform-origin:left;
  animation:subraya 1s cubic-bezier(.2,.8,.3,1) .7s forwards;
}
@keyframes subraya{to{transform:scaleX(1)}}

/* Cielo */
.escena{position:absolute;inset:0;z-index:1;pointer-events:none}
.sol{position:absolute;top:9%;right:9%;width:120px;height:120px}
.sol i{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,#fff6d0 0%,var(--sol) 55%,rgba(255,194,71,0) 72%);
  box-shadow:0 0 90px 30px rgba(255,194,71,.35);animation:latido 6s ease-in-out infinite;
}
@keyframes latido{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.09);opacity:1}}
.nube{position:absolute;font-size:3.6rem;opacity:.55;filter:blur(.3px);will-change:transform}
.nube.n1{top:13%;animation:deriva 58s linear infinite}
.nube.n2{top:23%;font-size:2.6rem;opacity:.4;animation:deriva 82s linear infinite -20s}
.nube.n3{top:7%;font-size:4.6rem;opacity:.3;animation:deriva 105s linear infinite -60s}
.nube.n4{top:30%;font-size:2rem;opacity:.35;animation:deriva 70s linear infinite -45s}
@keyframes deriva{from{transform:translateX(-22vw)}to{transform:translateX(118vw)}}
.pajaros{position:absolute;top:17%;left:0;width:100%}
.pajaros span{position:absolute;font-size:1.15rem;opacity:.75;animation:pajarea 26s linear infinite}
.pajaros span:nth-child(2){font-size:.9rem;animation-duration:34s;animation-delay:-9s;top:26px}
.pajaros span:nth-child(3){font-size:.75rem;animation-duration:30s;animation-delay:-17s;top:48px}
@keyframes pajarea{
  0%{transform:translate(-10vw,0)}25%{transform:translate(25vw,-26px)}
  50%{transform:translate(55vw,14px)}75%{transform:translate(84vw,-18px)}
  100%{transform:translate(115vw,4px)}
}
.islas{position:absolute;bottom:27%;left:0;width:100%;height:110px;opacity:.28}
.islas path{fill:#062a4a}

/* Mar y barco */
.mar{position:absolute;left:0;right:0;bottom:0;height:30%;z-index:4;pointer-events:none}
.olas{position:absolute;left:0;bottom:0;width:100%;line-height:0}
.olas path{fill:#fbf8f3}
.o-atras{height:26%;bottom:auto;top:16%;opacity:.35}
.o-atras path{fill:#0b4a7d}
.o-media{height:62%;opacity:.5;animation:vaiven 15s ease-in-out infinite}
.o-media path{fill:#7fd0e0}
.o-frente{height:82%;animation:vaiven 11s ease-in-out infinite reverse}
@keyframes vaiven{0%,100%{transform:translateX(0)}50%{transform:translateX(-4%)}}
.olas{width:112%}

.barco{
  position:relative;width:100%;max-width:560px;
  animation:navega 7.5s ease-in-out infinite;transform-origin:center bottom;
}
@keyframes navega{
  0%,100%{transform:translateY(0) rotate(-1.3deg)}
  50%{transform:translateY(-11px) rotate(1.3deg)}
}
.estela{
  position:absolute;left:8%;right:8%;bottom:6px;height:16px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
  animation:latido 5s ease-in-out infinite;
}
/* Agua bajo el barco */
.agua{
  position:absolute;left:-14%;bottom:2px;width:128%;height:66px;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
}
.agua-atras{fill:#5cc0d8;opacity:.85;animation:chapotea 6.5s ease-in-out infinite}
.agua-frente{fill:#8fd8e4;animation:chapotea 4.6s ease-in-out infinite reverse}
@keyframes chapotea{0%,100%{transform:translateX(-2%)}50%{transform:translateX(2%)}}
.barco{z-index:2}
.barco > svg{position:relative;z-index:2}
.barco svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 16px 26px rgba(2,26,48,.32))}
.casco{fill:#fdfcfa}
.franja{fill:var(--coral)}
.cubierta{fill:#fff;stroke:#dfeaf0;stroke-width:2}
.puente{fill:#eaf4f8;stroke:#cfe2ea;stroke-width:2}
.chimenea{fill:var(--mar)}
.chimenea-aro{fill:var(--sol)}
.tobogan{fill:none;stroke:var(--turquesa);stroke-width:7;stroke-linecap:round}
.cuerda{fill:none;stroke:rgba(3,41,74,.35);stroke-width:2}
.ojo{fill:#bfe6f0;stroke:#7fb9cd;stroke-width:1.5}
.ojo-emoji{font-size:13px;text-anchor:middle;dominant-baseline:central}
.bandera{transform-origin:top center;animation:ondea 2.4s ease-in-out infinite}

@keyframes ondea{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* Billete de embarque */
.billete{
  position:relative;z-index:7;display:flex;margin:0;max-width:470px;width:100%;color:var(--tinta);
  transform:rotate(-1.4deg);transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.billete:hover{transform:rotate(0) translateY(-5px) scale(1.02)}
.billete-cuerpo{
  flex:1;background:#fffdf8;border-radius:16px 0 0 16px;padding:16px 20px;
  box-shadow:0 14px 40px rgba(2,26,48,.3);
}
.billete-talon{
  width:118px;background:var(--sol);border-radius:0 16px 16px 0;padding:16px 12px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  box-shadow:0 14px 40px rgba(2,26,48,.3);border-left:3px dashed rgba(3,41,74,.28);color:#3a2a00;
}
.billete-talon span{font-size:.6rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;opacity:.75}
.billete-talon b{font-size:1.9rem;font-weight:800;line-height:1}
.billete-talon .mini{font-size:.55rem;letter-spacing:.03em;text-transform:none;opacity:.8;line-height:1.25;margin-top:3px}
.billete-tag{font-size:.6rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--coral)}
.billete-ruta{display:flex;align-items:center;gap:10px;margin:5px 0 10px}
.billete-ruta b{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--mar)}
.billete-ruta .linea{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--linea) 0 6px,transparent 6px 11px);position:relative}
.billete-ruta .linea i{position:absolute;top:50%;left:0;transform:translateY(-50%);font-size:1.05rem;animation:zarpa 5s ease-in-out infinite}
@keyframes zarpa{0%{left:0}50%{left:calc(100% - 18px)}100%{left:0}}
.billete-datos{display:flex;gap:18px;flex-wrap:wrap}
.billete-datos div{display:flex;flex-direction:column}
.billete-datos span{font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.billete-datos b{font-size:.98rem;font-weight:700}

/* Datos del hero, ahora sobre el mar claro */
.hero-datos{
  position:relative;z-index:6;margin:0 auto;padding:0 20px 26px;border:0;
  display:flex;gap:32px;flex-wrap:wrap;justify-content:center;width:100%;
}
.hero .dato{text-align:center}
.hero .dato .n{color:var(--mar);text-shadow:none}
.hero .dato .t{color:#2b5a75}

.btn.grande{padding:16px 30px;font-size:1.06rem}
.pulso{display:inline-block;animation:brinco 1.6s ease-in-out infinite}

@media(max-width:900px){
  .hero{padding-top:72px;min-height:auto}
  .hero-contenido{grid-template-columns:1fr;grid-template-areas:"texto" "arte" "billete";gap:16px}
  .billete{justify-self:stretch}
  .barco{max-width:min(420px,86vw)}
  .sol{width:84px;height:84px;top:5%;right:6%}
  .hero-datos{gap:20px 26px;padding-bottom:34px}
  .mar{height:24%}
  .islas{bottom:22%}
}
@media(max-width:560px){
  .hero h1{max-width:none}
  .billete{max-width:none;transform:none;margin-top:20px}
  .billete-talon{width:96px}
  .billete-talon b{font-size:1.5rem}
  .barco{max-width:min(340px,92vw)}
  .hero .dato .n{font-size:1.6rem}
  .nube{font-size:2.4rem}
  .islas{bottom:36%;height:70px}
}
@media(prefers-reduced-motion:reduce){
  .nube,.pajaros span,.barco,.o-media,.o-frente,.sol i,.estela,.bandera,.billete-ruta .linea i{animation:none!important}
  .hero h1 .todos::after{animation:none;transform:scaleX(1)}
}

/* Pantallas de portátil bajitas: que la escena quepa entera sin cortar los contadores */
@media(min-width:901px) and (max-height:850px){
  .hero{padding-top:44px}
  .hero h1{font-size:clamp(2rem,4.1vw,3.05rem)}
  .hero-rotativo{margin-bottom:16px;min-height:1.4em}
  .plantilla{margin-top:16px;padding:9px 17px 9px 12px}
  .plantilla .caras span{width:30px;height:30px;font-size:.92rem}
  .hero-contenido{gap:8px 30px;padding-bottom:6px}
  .billete{transform:rotate(-1.4deg) scale(.92);transform-origin:left center}
  .hero-datos{padding-bottom:18px;gap:26px}
  .hero .dato .n{font-size:1.7rem}
  .btn.grande{padding:13px 25px;font-size:1rem}
}

/* Condiciones que filtran las fechas */
.condiciones{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:960px;margin:0 auto}
.condiciones > div{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:18px 20px;box-shadow:0 4px 16px rgba(3,41,74,.05)}
.condiciones .ico{font-size:1.5rem;display:block;margin-bottom:6px}
.condiciones b{display:block;font-size:.98rem;margin-bottom:4px}
.condiciones p{margin:0;font-size:.87rem;color:var(--gris);line-height:1.5}

/* Escenarios de ahorro */
.escenarios{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:14px}
.esc{background:#fff;border:2px solid var(--linea);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column}
.esc.destacado{border-color:var(--sol);background:linear-gradient(150deg,#fff,#fffaf0)}
.esc-t{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.esc b{font-size:2.1rem;font-weight:800;letter-spacing:-.03em;color:var(--mar);line-height:1.05;margin-top:4px}
.esc-p{font-size:.8rem;font-weight:700;color:var(--gris)}
.esc-d{font-size:.84rem;color:#6b4f22;margin-top:9px;line-height:1.5}