/* ═══════════════════════════════════════════════════════════════════════════
   REVISOR DEL CATÁLOGO · el estilo
   El libro de marca: tinta, hondo, deep, teal, salvia (sólo relleno), crema y blanco. Marcellus para exhibir,
   Figtree para el texto, sin negrita ni itálica. Arriba la foto con su velo y el cristal; debajo, láminas hondas.
   Tres temas: sobre la foto no cambia nada; debajo, sólo cambian las variables.
   Lo que falta se marca con crema 70 % y un rombo de contorno; lo propuesto, con relleno deep y filete teal.
   ═══════════════════════════════════════════════════════════════════════════ */
:root, :root[data-tema="oscuro"]{
  --suelo:#141D27; --hoja:#222E3A; --lamina1:#101822; --lamina2:#121C26; --lamina3:#0E151E;
  --texto:#EADFCE; --suave:rgba(234,223,206,.72); --tenue:rgba(234,223,206,.5); --titulo:#FFFFFF;
  --filete:rgba(234,223,206,.16); --raya:rgba(234,223,206,.07); --sombra:0 30px 70px -18px rgba(26,38,51,.62);
  --cab1:#18232e; --cab2:#0e3640; --cab3:#1f2a1d; --fijo:#121b25; --celda-ia:rgba(0,109,130,.06); --celda-it:rgba(125,155,91,.05);
  --reco:rgba(0,85,101,.28); --reco-filete:#006D82; --control:rgba(234,223,206,.06);
}
:root[data-tema="teal"]{
  --suelo:#046477; --hoja:#0a5363; --lamina1:#05505f; --lamina2:#064d5b; --lamina3:#044552;
  --cab1:#064856; --cab2:#03404c; --cab3:#1c4a3d; --fijo:#054b59; --celda-ia:rgba(234,223,206,.04); --celda-it:rgba(125,155,91,.08);
  --reco:rgba(20,29,39,.32); --reco-filete:#EADFCE;
}
:root[data-tema="claro"]{
  --suelo:#F6F3ED; --hoja:#FFFFFF; --lamina1:#FFFFFF; --lamina2:#FFFFFF; --lamina3:#FBF9F5;
  --texto:#1A2633; --suave:rgba(26,38,51,.72); --tenue:rgba(26,38,51,.5); --titulo:#005565;
  --filete:rgba(26,38,51,.12); --raya:#E5E7E9; --sombra:0 24px 50px -24px rgba(26,38,51,.28);
  --cab1:#EEF1F2; --cab2:#E3EEF0; --cab3:#EBF0E4; --fijo:#FFFFFF; --celda-ia:rgba(0,109,130,.035); --celda-it:rgba(125,155,91,.05);
  --reco:rgba(0,109,130,.09); --reco-filete:#006D82; --control:rgba(26,38,51,.05);
}
html, body, *{ scrollbar-width:none; -ms-overflow-style:none }
*::-webkit-scrollbar{ width:0; height:0 }
*{ box-sizing:border-box }
html{ background:var(--suelo) }
body{ margin:0; background:var(--suelo); color:var(--texto); font:400 14px/1.5 Figtree, system-ui, sans-serif; -webkit-font-smoothing:antialiased }
b, strong{ font-weight:400; color:var(--titulo) }
button{ font:inherit; color:inherit }
[hidden]{ display:none !important }
.versalitas{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; padding-left:.28em }
.monumental{ font-family:Marcellus, Georgia, serif; font-weight:400; font-size:clamp(40px, 6vw, 78px); line-height:1; margin:10px 0 0; color:#fff }
.cristal{ background:rgba(20,29,39,.55); border:1px solid rgba(255,255,255,.14); border-radius:14px; backdrop-filter:blur(26px) saturate(1.15); -webkit-backdrop-filter:blur(26px) saturate(1.15) }
.material-icons-outlined{ font-size:18px; vertical-align:-4px }

/* ── la portada: la foto manda (igual en los tres temas) ── */
.portada{ position:relative; min-height:68svh; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; isolation:isolate;
  padding:110px clamp(16px, 4vw, 56px) 36px; overflow:hidden }
.portada__foto{ position:absolute; inset:0; z-index:-1; background:url(fotos/portada-perezoso.webp) center 40%/cover; animation:acercar 11s cubic-bezier(.2,.7,.2,1) both }
.portada::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,29,39,.35) 0%, rgba(20,29,39,0) 16%, rgba(20,29,39,0) 45%, rgba(20,29,39,.45) 78%, var(--suelo) 100%) }
:root[data-tema="claro"] .portada::after{ background:linear-gradient(180deg, rgba(20,29,39,.35) 0%, rgba(20,29,39,0) 16%, rgba(20,29,39,0) 45%, rgba(20,29,39,.45) 80%, rgba(20,29,39,.45) 100%) }
@keyframes acercar{ from{ transform:scale(1.12) } to{ transform:scale(1) } }
.portada__texto{ text-shadow:0 2px 6px rgba(11,20,28,.72), 0 12px 38px rgba(11,20,28,.55); max-width:1200px }
.portada__frase{ max-width:620px; color:rgba(255,255,255,.8); font-size:16px; margin:12px 0 24px }
.portada__lugar{ position:absolute; right:clamp(16px, 4vw, 56px); bottom:14px; color:rgba(255,255,255,.8); margin:0; font-size:10px }
.barra{ position:absolute; top:16px; left:clamp(16px, 4vw, 56px); right:clamp(16px, 4vw, 56px); display:flex; align-items:center; gap:14px; padding:8px 12px 8px 14px; z-index:3 }
.barra__estrella{ width:22px; height:22px }
.barra__ambiente{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:2px 10px }
.barra__gente{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.8) }
.cara{ width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; font-size:11px; color:#141D27; border:2px solid rgba(20,29,39,.8); margin-left:-8px }
.cara:first-child{ margin-left:0 }
.cifras{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px }
.cifra{ padding:14px 16px; text-shadow:none }
.cifra b{ display:block; font-family:Marcellus, serif; font-size:28px; color:#fff; font-variant-numeric:tabular-nums }
.cifra span{ font-size:12px; color:rgba(255,255,255,.8) }
.barrita{ height:3px; border-radius:2px; background:rgba(255,255,255,.15); margin-top:8px; overflow:hidden }
.barrita i{ display:block; height:100%; background:#7D9B5B }

/* ── la hoja de trabajo ── */
.hoja{ padding:8px clamp(16px, 4vw, 56px) 80px }
.pestanas{ display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 12px }
.pest{ border:1px solid var(--filete); background:transparent; border-radius:999px; padding:7px 14px; cursor:pointer; color:var(--suave); display:inline-flex; gap:8px; align-items:center; transition:border-color .2s }
.pest:hover{ border-color:var(--suave) }
.pest em{ font-style:normal; font-size:11px; color:var(--tenue) }
.pest.on{ background:#005565; border-color:#005565; color:#fff }
.pest.on em{ color:rgba(255,255,255,.75) }
.pest .caras{ display:inline-flex }
.pest .cara{ width:20px; height:20px; font-size:9px; border-width:1px }
.pest--sep{ width:1px; background:var(--filete); margin:4px 6px }
.herramientas{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; color:var(--suave); font-size:13px }
.campo{ background:var(--control); border:1px solid var(--filete); border-radius:9px; color:var(--texto); padding:8px 12px; font:inherit; min-width:0 }
.campo:focus{ outline:none; border-color:#006D82 }
textarea.campo{ width:100%; min-height:120px; resize:vertical; line-height:1.5 }
.interruptor{ display:inline-flex; gap:8px; align-items:center; cursor:pointer }
.leyenda{ display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--suave); margin-left:auto }
.leyenda i{ display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:-1px }
.l-falta{ border:1px solid var(--suave); transform:rotate(45deg) scale(.8) }
.l-reco{ background:var(--reco); border:1px solid var(--reco-filete); border-radius:3px }
.l-ok{ background:#7D9B5B; border-radius:50% }
.l-otro{ border:2px solid #006D82; border-radius:3px }

.lamina{ position:relative; border-radius:22px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, var(--lamina1) 0%, var(--lamina2) 55%, var(--lamina3) 100%); border:1px solid var(--filete); box-shadow:var(--sombra) }
.lamina::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:5;
  background:linear-gradient(90deg, rgba(234,223,206,0), rgba(234,223,206,.45) 22%, rgba(0,109,130,.55) 52%, rgba(125,155,91,.45) 74%, rgba(234,223,206,0)) }
.rueda{ overflow:auto; max-height:calc(100svh - 120px) }
table.tabla{ border-collapse:separate; border-spacing:0; width:max-content }
.tabla th, .tabla td{ padding:10px 12px; vertical-align:top; text-align:left; border-bottom:1px solid var(--raya); width:200px; min-width:150px; max-width:260px }
.tabla thead th{ position:sticky; z-index:3 }
.tabla tr.bloq th{ top:0; font-family:Marcellus, serif; font-weight:400; font-size:15px; color:var(--titulo); padding:14px 14px 8px; cursor:pointer; white-space:nowrap }
.tabla tr.bloq th small{ display:block; font-family:Figtree, sans-serif; font-size:11px; color:var(--suave) }
.tabla tr.camp th{ top:58px; font-size:11px; font-weight:500; color:var(--suave); text-transform:uppercase; letter-spacing:.06em; background:var(--cab1) }
.b-control{ background:var(--cab1) } .b-ia{ background:var(--cab2) } .b-itinerario{ background:var(--cab3) }
.tabla tr.camp th.b-ia{ background:var(--cab2) } .tabla tr.camp th.b-itinerario{ background:var(--cab3) }
.tabla td.b-ia{ background:var(--celda-ia) } .tabla td.b-itinerario{ background:var(--celda-it) }
.tabla .fijo{ position:sticky; left:0; z-index:2; width:250px; min-width:250px; background:var(--fijo) !important; box-shadow:1px 0 0 var(--filete) }
.tabla thead .fijo{ z-index:4 }
.tabla td.fijo .nombre{ font-family:Marcellus, serif; font-size:16px; color:var(--titulo); line-height:1.25 }
.mini{ font-size:11px; color:var(--tenue) }
.plegado{ width:44px !important; min-width:44px !important; padding:10px 6px !important; writing-mode:vertical-rl; color:var(--suave) }
td.celda{ cursor:pointer; transition:background-color .2s }
td.celda:hover{ box-shadow:inset 0 0 0 1px var(--filete) }
td.celda.solo{ cursor:default }
td.celda.solo:hover{ box-shadow:none }
.valor{ white-space:pre-line; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden }
.en{ display:block; margin-top:4px; font-size:12px; color:var(--tenue) }
.falta{ color:var(--suave) }
.falta::before{ content:""; display:inline-block; width:7px; height:7px; border:1px solid currentColor; transform:rotate(45deg); margin-right:8px; vertical-align:1px }
.ok-punto::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#7D9B5B; margin-right:6px; vertical-align:1px }
.reco{ margin-top:8px; padding:9px 10px; border-radius:9px; background:var(--reco); border:1px solid var(--reco-filete) }
.reco + .reco{ margin-top:6px }
.reco__de{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--suave); display:block; margin-bottom:4px }
.reco__txt{ white-space:pre-line; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden }
.acciones{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px }
.boton{ border-radius:999px; padding:5px 12px; font-size:12px; cursor:pointer; border:1px solid var(--filete); background:transparent; color:var(--texto); transition:border-color .2s, background-color .2s }
.boton:hover{ border-color:var(--suave) }
.boton--si{ background:#005565; border-color:#005565; color:#fff }
.boton--si:hover{ background:#006D82; border-color:#006D82 }
.boton--fantasma{ color:#fff; border-color:rgba(255,255,255,.3) }
.boton--grande{ padding:9px 18px; font-size:13px }
.buscar-safari{ margin-top:8px; display:inline-flex; gap:6px; align-items:center; font-size:12px; color:var(--suave); border:1px dashed var(--filete); border-radius:9px; padding:5px 10px; background:transparent; cursor:pointer }
.ocupada{ box-shadow:inset 0 0 0 2px #006D82 !important }
.ocupada__quien{ display:block; font-size:11px; color:var(--suave); margin-top:4px }
.recien{ animation:recien 2.2s ease-out }
@keyframes recien{ from{ background-color:rgba(125,155,91,.35) } to{ background-color:transparent } }
.fotos{ display:flex; gap:4px; flex-wrap:wrap }
.foto{ width:56px; height:40px; border-radius:7px; background:var(--control) center/cover; position:relative; overflow:hidden }
.foto i{ position:absolute; left:0; right:0; bottom:0; font-style:normal; font-size:9px; line-height:1.4; padding:0 3px; background:rgba(20,29,39,.72); color:#EADFCE }
.foto.baja{ box-shadow:0 0 0 1px var(--suave); opacity:.6 }
.chip{ display:inline-block; font-size:11px; padding:2px 9px; border-radius:999px; background:var(--control); margin:0 4px 4px 0 }
.chip--hecho{ background:rgba(125,155,91,.25) }
.cargando{ padding:60px; text-align:center; color:var(--suave) }
.vacio{ padding:50px; text-align:center; color:var(--suave) }

/* ── las ventanas (cristal sobre el velo) ── */
.velo{ position:fixed; inset:0; z-index:50; background:rgba(11,20,28,.55); display:grid; place-items:center; padding:16px; animation:aparecer .25s cubic-bezier(.2,.7,.2,1) }
.ventana{ width:min(920px, 100%); max-height:calc(100svh - 32px); overflow:auto; border-radius:22px; padding:22px 24px; color:var(--texto);
  background:linear-gradient(180deg, var(--lamina1), var(--lamina3)); border:1px solid var(--filete); box-shadow:0 30px 70px -18px rgba(0,0,0,.6) }
.ventana--chica{ width:min(620px, 100%) }
.ventana h2{ font-family:Marcellus, serif; font-weight:400; font-size:24px; margin:0 0 4px; color:var(--titulo) }
.ventana .sub{ color:var(--suave); margin:0 0 16px }
.ventana label{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--suave); margin:14px 0 6px }
.ventana .pie{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap }
@keyframes aparecer{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.aviso{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80; padding:10px 18px; border-radius:999px; background:#005565; color:#fff; font-size:13px; box-shadow:var(--sombra) }
.aviso.mal{ background:#B3261E }
.rejilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px }
.tarjeta-carpeta{ border:1px solid var(--filete); border-radius:14px; overflow:hidden; cursor:pointer; background:var(--control); text-align:left; padding:0 }
.tarjeta-carpeta .portadita{ height:96px; background:var(--hoja) center/cover }
.tarjeta-carpeta span{ display:block; padding:8px 10px 2px; font-size:13px }
.tarjeta-carpeta small{ display:block; padding:0 10px 9px; font-size:11px; color:var(--suave) }
.elegible{ position:relative; border-radius:9px; overflow:hidden; cursor:pointer; border:2px solid transparent; background:var(--control) }
.elegible img{ width:100%; height:110px; object-fit:cover; display:block }
.elegible.on{ border-color:#006D82 }
.elegible small{ display:block; font-size:10px; padding:3px 6px; color:var(--suave) }
.camino{ display:flex; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--suave); margin-bottom:12px }
.camino button{ background:none; border:none; color:var(--texto); cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px }

/* ── Safari y tarifas ── */
.fichas{ display:grid; gap:14px }
.ficha{ display:grid; grid-template-columns:1fr 1fr 260px; border-radius:22px; overflow:hidden; border:1px solid var(--filete); background:linear-gradient(180deg, var(--lamina1), var(--lamina3)) }
.ficha > div{ padding:16px 18px; min-width:0 }
.ficha > div + div{ border-left:1px solid var(--raya) }
.ficha h4{ margin:0 0 6px; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.16em; color:var(--suave) }
.ficha .titulo{ font-family:Marcellus, serif; font-size:17px; color:var(--titulo); margin:0 0 6px }
.ficha .largo{ white-space:pre-line; max-height:220px; overflow:auto }
.ficha .propuesta{ background:var(--reco) }
.lista-tarifas td, .lista-tarifas th{ width:auto; max-width:none; min-width:0 }
@media (max-width:760px){
  .ficha{ grid-template-columns:1fr } .ficha > div + div{ border-left:none; border-top:1px solid var(--raya) }
  .barra .versalitas{ display:none } .leyenda{ margin-left:0 }
  .portada{ min-height:78svh }
}
@media (prefers-reduced-motion:reduce){ .portada__foto, .velo, .recien{ animation:none } }