/* Fishy! - hoja de estilos compartida por las cuatro paginas.
   Se extrajo del archivo unico el 2026-09-09, al separar el sitio.
   Las rutas img/ son relativas a este archivo, que vive en la raiz. */

/* ============================================================
   Fishy! — sitio comercial

   Paleta muestreada del logo. Jerarquia de color, a proposito:
     ORO  = marca y enfasis. No es interactivo.
     AZUL = interfaz: enlaces, botones, foco, bordes activos.
     ROJO / NARANJO / VERDE = riesgo, y solo riesgo. Nunca decoran.

   Sin JavaScript: la demo funciona con radio + :checked.
   ============================================================ */
:root{
  --fondo:#16100B; --fondo-2:#1E1611; --superficie:#2A1F17; --borde:#5E4C3A;
  --crema:#F3E7D2; --crema-2:#E2D2B6; --papel:#FBF4E6; --borde-claro:#C9B48D;
  --texto-oscuro:#1E1611; --texto-oscuro-2:#6B5744; --texto-claro-2:#A8937A;
  --oro:#CC9C3C; --oro-claro:#E4B448;
  --azul:#3C6CA8; --azul-claro:#6FA0D8; --azul-hondo:#37628F;
  --cafe:#784830;
  --r0:#4CAF50; --r1:#FF9800; --r2:#F44336; --r3:#B71C1C;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --cuerpo:"Figtree","Segoe UI",system-ui,sans-serif;
  --ancho:1080px; --r-caja:14px;
}
/* ---------- Definicion de las cajas (2026-09-10) ----------
   Oscar dijo "aun siento que algo no se ve bien". Los contrastes de TEXTO estaban
   todos sobre 5:1, con holgura; el problema era otro y era medible: las tarjetas
   no se separaban de su fondo.

     tarjeta --superficie sobre --fondo-2 ....... 1.11:1
     su borde --borde (#3D2E22) sobre --fondo-2 . 1.37:1
     tarjeta --papel sobre --crema .............. 1.12:1
     borde --crema-2 sobre --papel .............. 1.36:1

   A 1.1 el borde es invisible y la pagina se ve plana. El RELLENO no se puede
   separar mas: los cafes oscuros del sitio viven todos en un rango de luminancia
   minusculo, y aclarar la tarjeta cambiaria el caracter de la marca. Lo que si se
   puede mover es el BORDE:

     --borde     #3D2E22 -> #5E4C3A   1.37:1 -> 2.18:1 sobre --fondo-2
     --borde-claro (nuevo) #C9B48D    1.36:1 -> 1.85:1 sobre --papel

   --borde se usa 24 veces y SIEMPRE como borde, asi que cambiarlo es seguro.
   --crema-2 NO se toco porque en .barra-riel es un FONDO, no un borde; por eso
   los bordes sobre fondo claro pasaron a --borde-claro en vez de mover --crema-2. */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--fondo);color:var(--crema);font-family:var(--cuerpo);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;}

/* ---------- Bloques en preparacion ----------
   Todo lo que lleve class="pendiente" esta OCULTO por defecto, para que el
   sitio no se publique nunca con un hueco a medio hacer (la rubrica descuenta
   por "ausencia de contenido"). Para verlos mientras se trabaja, la etiqueta
   body lleva class="borrador": sacar esa palabra deja el sitio listo para
   publicar. Al completar un bloque hay que sacarle su class="pendiente". */
.pendiente{display:none;}
body.borrador .pendiente{display:revert;}
body.borrador::after{content:"BORRADOR · hay bloques pendientes";position:fixed;
  right:14px;bottom:14px;z-index:90;background:var(--r1);color:#221A12;font-size:12px;
  font-weight:700;letter-spacing:.06em;padding:7px 13px;border-radius:999px;
  pointer-events:none;}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.08;text-wrap:balance;font-weight:800;}
p{margin:0;}
:focus-visible{outline:3px solid var(--azul-claro);outline-offset:3px;border-radius:6px;}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 28px;}
.bloque{padding:96px 0;}
.claro{background:var(--crema);color:var(--texto-oscuro);}
.alterno{background:var(--fondo-2);}
.claro .bajada{color:var(--texto-oscuro-2);}
.rotulo{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--azul-claro);margin-bottom:14px;}
.claro .rotulo{color:var(--azul-hondo);}
.titulo{font-size:clamp(28px,4.2vw,44px);margin-bottom:18px;}
.bajada{font-size:19px;color:var(--texto-claro-2);max-width:62ch;}
@media (max-width:760px){ .bloque{padding:64px 0;} .wrap{padding:0 20px;}
  .bosque .wrap{padding-top:64px;}
  .bajada,.portada .bajada{font-size:17.5px;} }

/* ---------- Botones ---------- */
.cta{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;
  padding:15px 26px;border-radius:999px;text-decoration:none;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;}
.cta:hover{transform:translateY(-2px);}
.cta-a{background:var(--azul);color:#fff;}
.cta-a:hover{background:var(--azul-claro);color:var(--texto-oscuro);}
.cta-b{border:2px solid var(--borde);color:var(--crema);}
.cta-b:hover{border-color:var(--azul-claro);}
.claro .cta-b{border-color:var(--borde-claro);color:var(--texto-oscuro);}
/* Icono dentro de un boton: hereda el color del texto, asi sigue al hover
   de .cta-a (que cambia de blanco a oscuro) sin reglas aparte. */
.cta .ico{width:18px;height:18px;flex:0 0 auto;fill:currentColor;}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:40;background:rgba(22,16,11,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--borde);}
.barra{max-width:var(--ancho);margin:0 auto;padding:12px 28px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;}
.marca-logo{height:34px;width:auto;}
.menu{display:flex;gap:24px;align-items:center;font-size:15px;font-weight:600;}
.menu a{text-decoration:none;color:var(--texto-claro-2);}
.menu a:hover{color:var(--oro-claro);}
.menu .cta{padding:9px 18px;font-size:15px;color:#fff;}
.menu .cta:hover{color:var(--texto-oscuro);}
/* Telefono: los tres enlaces no caben al lado del logo, asi que bajan a una
   segunda fila de la misma barra y el boton de contacto se ancla arriba a la
   derecha. Antes se ocultaban, y en el telefono no quedaba manera de cambiar
   de pagina sin bajar hasta el pie. */
@media (max-width:900px){
  .barra{position:relative;flex-wrap:wrap;gap:0;padding:10px 20px 11px;}
  .marca-logo{height:30px;}
  .menu{width:100%;justify-content:space-between;gap:10px;font-size:14.5px;
    margin-top:10px;padding-top:10px;border-top:1px solid var(--borde);}
  .menu .cta{position:absolute;top:9px;right:20px;padding:8px 16px;font-size:14.5px;}
}

/* ---------- Portada ---------- */
/* El arte del juego de fondo, bajo un velo oscuro.
   El velo NO es decorativo: sin el, la bajada (--texto-claro-2) sobre las flores
   amarillas del dibujo queda en 2.5:1 y deja de leerse. Medido sobre esta misma
   imagen: la mitad izquierda necesita 86% y la derecha 80% para pasar AA, asi que
   el degradado va de 93% a 80% y las dos quedan con margen.
   NO aclararlo sin volver a medir el contraste. */
.portada{
  background:
    linear-gradient(100deg, rgba(22,16,11,.93) 0%, rgba(22,16,11,.88) 50%, rgba(22,16,11,.80) 100%),
    url("img/portada-bosque.jpg") 50% 42%/cover no-repeat;
  padding:76px 0 88px;}
.portada-alto{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;}
.portada h1{font-size:clamp(34px,5.2vw,56px);margin-bottom:20px;}
.portada h1 em{font-style:normal;color:var(--oro-claro);}
.portada .bajada{font-size:20px;}
.botones{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.otto{width:100%;max-width:360px;margin:0 auto;filter:drop-shadow(0 18px 34px rgba(0,0,0,.5));}
.otto-pie{text-align:center;font-size:14px;color:var(--texto-claro-2);margin-top:10px;}
.sellos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;}
.sello{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-caja);padding:22px;}
.sello b{display:block;font-family:var(--display);font-size:19px;margin-bottom:6px;color:var(--oro-claro);}
.sello span{font-size:15.5px;color:var(--texto-claro-2);}
@media (max-width:900px){ .portada-alto{grid-template-columns:1fr;} .sellos{grid-template-columns:1fr;}
  /* Apilado, el texto ya no vive solo a la izquierda: puede caer sobre cualquier
     parte del ancho, asi que el velo se empareja en el valor mas exigente. */
  .portada{background:
    linear-gradient(180deg, rgba(22,16,11,.90) 0%, rgba(22,16,11,.93) 100%),
    url("img/portada-bosque.jpg") 50% 42%/cover no-repeat;} }

/* ---------- Problema ---------- */
.problema{background:var(--fondo-2);}
.problema-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:34px;}
.cita{font-family:var(--display);font-size:clamp(22px,3vw,30px);font-weight:700;
  line-height:1.28;color:var(--crema);border-left:4px solid var(--oro);padding-left:22px;margin:0;}
/* Definicion de "groomer", bajo la cita. Caja oscura sobre seccion oscura:
   el color va explicito igual, por si la seccion pasa algun dia a .claro. */
.definicion{margin:26px 0 0;padding:18px 20px;background:var(--superficie);
  border:1px solid var(--borde);border-radius:14px;color:var(--texto-claro-2);
  font-size:16px;line-height:1.55;}
.definicion-rotulo{display:block;margin-bottom:6px;color:var(--oro-claro);
  font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
.definicion dfn{font-style:normal;font-weight:700;color:var(--crema);}
.definicion em{color:var(--crema);}
.lista-limpia{margin:0;padding-left:20px;color:var(--texto-claro-2);font-size:17px;}
.lista-limpia li{margin-bottom:14px;}
.lista-limpia li b{color:var(--crema);}
@media (max-width:900px){ .problema-grid{grid-template-columns:1fr;} }

/* ---------- Banda del bosque ---------- */
/* El cielo del PNG de los arboles es transparente. Detras va el cielo real
   como fondo del marco: los dos archivos son 3000x2000, asi que con el mismo
   encuadre (cover + 50% 35%) el horizonte del cielo calza con el de los arboles.
   Nada de scrim ni degradado encima del arte: mezclado con el cafe de la
   seccion, el azul del cielo se ensucia y queda morado. El borde recto entre
   el bloque de texto y la imagen se lee como corte de seccion, y esta bien. */
.bosque{background:var(--fondo-2);overflow:hidden;}
/* Al separar el sitio, esta seccion quedo PRIMERA en producto.html, justo
   debajo de la cabecera pegajosa. Antes iba a media pagina y le bastaba el
   aire de la seccion anterior; ahora necesita el suyo, el mismo de .bloque. */
.bosque .wrap{text-align:center;padding-top:96px;padding-bottom:46px;}
.bosque .bajada{margin:0 auto;}
.bosque-marco{position:relative;background:url("img/bosque-fondo.jpg") 50% 35%/cover no-repeat;}
.bosque-arte{position:relative;display:block;width:100%;height:auto;max-height:min(900px,82vh);
  object-fit:cover;object-position:50% 35%;}
@media (max-width:760px){ .bosque .wrap{padding-bottom:30px;} }

/* ---------- Demo sin JavaScript ---------- */
.demo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:30px;margin-top:40px;align-items:start;}
.rr{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.fono{background:var(--superficie);border:1px solid var(--borde);border-radius:26px;padding:20px;color:var(--crema);}
.fono-barra{display:flex;align-items:center;gap:12px;padding-bottom:14px;
  border-bottom:1px solid var(--borde);margin-bottom:16px;}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--cafe);color:var(--crema);
  display:grid;place-items:center;font-weight:800;font-family:var(--display);flex:0 0 auto;}
.fono-quien b{display:block;font-size:16px;}
.fono-quien span{font-size:13px;color:var(--texto-claro-2);}
.burbuja{background:var(--fondo);border:1px solid var(--borde);border-radius:16px 16px 16px 4px;
  padding:12px 15px;font-size:15.5px;margin-bottom:10px;}
.opciones-titulo{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--texto-claro-2);margin:22px 0 10px;}
.opcion{display:block;background:var(--fondo);color:var(--crema);
  border:1.5px solid var(--borde);border-radius:12px;padding:13px 15px;font-size:15.5px;
  margin-bottom:9px;cursor:pointer;transition:border-color .15s ease,background .15s ease;}
.opcion:hover{border-color:var(--azul-claro);background:var(--fondo-2);}
#r1:focus-visible~.fono .opcion[for="r1"],
#r2:focus-visible~.fono .opcion[for="r2"],
#r3:focus-visible~.fono .opcion[for="r3"]{outline:3px solid var(--azul-claro);outline-offset:2px;}
#r1:checked~.fono .opcion[for="r1"],
#r2:checked~.fono .opcion[for="r2"],
#r3:checked~.fono .opcion[for="r3"]{border-color:var(--azul-claro);background:#20303F;}
.lectura{background:var(--superficie);color:var(--crema);border:1px solid var(--borde);
  border-radius:var(--r-caja);padding:26px;}
.lectura-cab{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--texto-claro-2);padding-bottom:14px;border-bottom:1px solid var(--borde);margin-bottom:18px;}
.salida{display:none;}
.vacio{color:var(--texto-claro-2);font-size:16px;}
#r1:checked~.lectura .vacio,
#r2:checked~.lectura .vacio,
#r3:checked~.lectura .vacio{display:none;}
#r1:checked~.lectura .s1,
#r2:checked~.lectura .s2,
#r3:checked~.lectura .s3{display:block;}
.chapa{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
  padding:6px 13px;border-radius:999px;margin-bottom:14px;}
.punto{width:8px;height:8px;border-radius:50%;background:currentColor;}
.c-mala{background:rgba(244,67,54,.14);color:#FF8A80;}
.c-media{background:rgba(255,152,0,.14);color:#FFB74D;}
.c-buena{background:rgba(76,175,80,.15);color:#81C784;}
.salida h3{font-size:20px;margin-bottom:10px;}
.salida p{font-size:16px;color:var(--texto-claro-2);margin-bottom:12px;}
.salida p b{color:var(--crema);}
.salida p:last-child{margin-bottom:0;}
@media (max-width:900px){ .demo{grid-template-columns:1fr;} }

/* ---------- Fases ---------- */
.fases{display:grid;gap:14px;margin-top:38px;}
.fase{display:grid;grid-template-columns:104px 1fr;gap:22px;align-items:start;
  background:var(--papel);border:1px solid var(--borde-claro);border-radius:var(--r-caja);padding:24px 26px;}
.fase-num{font-family:var(--display);font-weight:800;font-size:15px;color:var(--azul-hondo);
  letter-spacing:.06em;text-transform:uppercase;padding-top:4px;}
.fase h3{font-size:21px;margin-bottom:8px;}
.fase p{font-size:16.5px;color:var(--texto-oscuro-2);margin-bottom:12px;}
.fase blockquote{margin:0;font-style:italic;font-size:16px;color:var(--texto-oscuro);
  border-left:3px solid var(--r1);padding-left:14px;}
@media (max-width:620px){ .fase{grid-template-columns:1fr;gap:10px;} }

/* ---------- Temas ---------- */
.temas{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:38px;}
.tema{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-caja);padding:26px;}
.tema h3{font-size:21px;margin-bottom:10px;color:var(--oro-claro);}
.tema p{font-size:16px;color:var(--texto-claro-2);}
@media (max-width:760px){ .temas{grid-template-columns:1fr;} }

/* ---------- Mapa ---------- */
.mapa-marco{margin:44px auto 8px;max-width:560px;}
/* El mapa nuevo trae el mar pintado de borde a borde: ya no es una isla
   recortada, asi que se enmarca como lamina en vez de dejarla flotando. */
.mapa{width:100%;height:auto;border-radius:var(--r-caja);
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.55));}
.mapa-pie{text-align:center;font-size:15px;color:var(--texto-claro-2);max-width:52ch;margin:0 auto 6px;}

/* ---------- Modo detective ---------- */
.detective{background:var(--fondo-2);}
.det-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;margin-top:38px;align-items:start;}
.det-paso{border-left:3px solid var(--borde);padding-left:20px;margin-bottom:26px;}
.det-paso:last-child{margin-bottom:0;}
.det-paso b{display:block;font-family:var(--display);font-size:19px;color:var(--oro-claro);margin-bottom:7px;}
.det-paso p{font-size:16px;color:var(--texto-claro-2);}
.det-chat{margin:0;background:var(--superficie);color:var(--crema);
  border:1px solid var(--borde);border-radius:26px;padding:22px;}
.det-cab{display:flex;align-items:center;gap:12px;padding-bottom:14px;
  border-bottom:1px solid var(--borde);margin-bottom:8px;}
.det-cab b{display:block;font-size:16px;}
.det-cab span{font-size:13px;color:var(--texto-claro-2);}
.det-permiso{background:var(--fondo);border:1px dashed var(--borde);border-radius:12px;
  padding:12px 14px;font-size:14.5px;color:var(--texto-claro-2);margin:14px 0 18px;}
.det-permiso b{color:var(--crema);font-weight:600;}
.det-msg{position:relative;max-width:82%;background:var(--fondo);border:1px solid var(--borde);
  border-radius:16px 16px 16px 4px;padding:11px 14px;font-size:15px;margin-bottom:9px;color:var(--crema);}
.det-msg.pudu{margin-left:auto;border-radius:16px 16px 4px 16px;background:#20303F;border-color:#2C4560;}
.det-msg.marcado{border-color:var(--r1);background:rgba(255,152,0,.10);}
/* Flotada, no absoluta: la etiqueta se aparta solo la primera linea del mensaje.
   Absoluta se montaba sobre el texto cuando la burbuja se angostaba (telefono). */
.det-flag{float:right;margin:2px 0 2px 10px;font-size:11px;font-weight:800;
  letter-spacing:.08em;line-height:1.5;color:var(--r1);}
.det-pie{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--borde);font-size:13.5px;color:var(--texto-claro-2);}
.det-pie i{width:9px;height:9px;border-radius:3px;background:var(--r1);flex:0 0 auto;}
@media (max-width:900px){ .det-grid{grid-template-columns:1fr;gap:30px;} }

/* ---------- Comparativa ---------- */
.comp{margin-top:38px;overflow-x:auto;}
.comp table{width:100%;min-width:660px;border-collapse:collapse;font-size:16px;}
.comp th,.comp td{text-align:left;padding:16px 18px;vertical-align:top;
  border-bottom:1px solid var(--borde-claro);}
.comp thead th{font-family:var(--display);font-size:15px;font-weight:800;
  color:var(--texto-oscuro-2);border-bottom:2px solid var(--borde-claro);}
.comp thead th.yo{color:var(--texto-oscuro);}
.comp tbody th{font-weight:600;color:var(--texto-oscuro);width:26%;}
.comp td{color:var(--texto-oscuro-2);}
.comp .yo{background:var(--papel);}
.comp td.yo{color:var(--texto-oscuro);font-weight:600;}
.comp tbody tr:last-child th,.comp tbody tr:last-child td{border-bottom:0;}
.comp thead th.yo{border-top:3px solid var(--oro);border-radius:8px 8px 0 0;}
.comp tbody tr:last-child td.yo{border-radius:0 0 8px 8px;}
@media (max-width:760px){
  .comp{overflow-x:visible;}
  .comp table{min-width:0;}
  .comp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .comp tbody tr{display:block;background:var(--papel);border:1px solid var(--borde-claro);
    border-radius:var(--r-caja);padding:18px 20px;margin-bottom:14px;}
  .comp tbody th{display:block;width:auto;padding:0 0 12px;border:0;
    font-family:var(--display);font-weight:800;font-size:18px;}
  .comp tbody td{display:block;padding:10px 0 0;border:0;background:none;}
  .comp tbody td::before{content:attr(data-col);display:block;font-size:12px;
    letter-spacing:.12em;text-transform:uppercase;font-weight:700;
    color:var(--azul-hondo);margin-bottom:3px;}
  .comp tbody td.yo::before{color:var(--texto-oscuro);}
}

/* ---------- Aparicion al hacer scroll ----------
   CSS puro: sin JavaScript. Los navegadores que no soportan
   animation-timeline simplemente muestran todo fijo, que es el
   estado correcto. Se desactiva si el sistema pide menos movimiento. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    /* OJO: nada de aqui puede vivir dentro de un contenedor con overflow
       propio. 'view()' se mide contra el scroll mas cercano, y un
       'overflow-x:auto' (como el de .comp) cuenta como tal: las filas se
       medirian contra la tabla, que no hace scroll vertical, y se quedarian
       congeladas a media opacidad. Por eso se anima .comp entera. */
    .sello,.fase,.tema,.publico,.razon,.persona,.det-paso,
    .comp,.reporte,.det-chat,.mapa-marco,.cita,.lista-limpia,.prop,.video-marco{
      animation:surgir linear both;
      animation-timeline:view();
      /* Se mide contra 'cover', no contra 'entry'. 'entry' termina justo
         cuando el elemento acaba de entrar, o sea pegado al borde de abajo
         de la pantalla: la animacion se acaba donde nadie la esta mirando y
         parece que no hubiera animacion. Con 'cover' el elemento sigue
         apareciendo hasta quedar bien adentro de la pantalla.
         El tope se queda en 32-40% a proposito: mas arriba y los elementos
         del final de la pagina no alcanzan a completarse, porque ya no
         queda scroll, y se quedarian medio transparentes para siempre. */
      animation-range:cover 0% cover 32%;
    }
    /* escalonado dentro de cada grilla */
    .sello:nth-child(2),.tema:nth-child(2),.publico:nth-child(2),.razon:nth-child(2),
    .persona:nth-child(2),.persona:nth-child(5),
    .det-paso:nth-child(2),.prop:nth-child(2){animation-range:cover 4% cover 36%;}
    .sello:nth-child(3),.tema:nth-child(3),.publico:nth-child(3),.razon:nth-child(3),
    .persona:nth-child(3),.persona:nth-child(6),
    .det-paso:nth-child(3){animation-range:cover 8% cover 40%;}
    /* se anima 'translate', no 'transform', para no pisar el :hover de las tarjetas */
    @keyframes surgir{
      from{opacity:0;translate:0 36px;}
      to{opacity:1;translate:none;}
    }
  }
}

/* ---------- Entrada de la portada ----------
   A diferencia de la aparicion por scroll, esta es una animacion normal
   por tiempo: funciona en todos los navegadores, no solo en Chromium.
   Es lo primero que ve quien abre la pagina. */
@media (prefers-reduced-motion: no-preference){
  .portada .rotulo,.portada h1,.portada .bajada,.portada .botones,.portada figure{
    animation:entrar .75s cubic-bezier(.2,.7,.3,1) both;
  }
  .portada .rotulo{animation-delay:.06s;}
  .portada h1{animation-delay:.14s;}
  .portada figure{animation-delay:.20s;}
  .portada .bajada{animation-delay:.28s;}
  .portada .botones{animation-delay:.38s;}
  @keyframes entrar{
    from{opacity:0;translate:0 20px;}
    to{opacity:1;translate:none;}
  }
  /* Otto NO flota. Aqui vivia `animation:flotar 7s ... infinite` y se saco el
     2026-09-09: la rubrica de la Feria descuenta por "animaciones continuas".
     Las de scroll de mas arriba no cuentan, corren una vez y terminan.
     No reponer esta sin cambiar el infinite por un numero de repeticiones. */
}

/* ---------- Para quien es ---------- */
.publicos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;}
.publico{background:var(--papel);border:1px solid var(--borde-claro);border-radius:var(--r-caja);padding:28px;}
.publico h3{font-size:22px;margin-bottom:10px;}
.publico p{font-size:16px;color:var(--texto-oscuro-2);margin-bottom:14px;}
.publico ul{margin:0;padding-left:18px;font-size:15.5px;color:var(--texto-oscuro-2);}
.publico li{margin-bottom:7px;}
@media (max-width:900px){ .publicos{grid-template-columns:1fr;} }

/* ---------- Para adultos ---------- */
.parental{background:var(--fondo-2);}
/* 3 columnas desde el 2026-09-10: eran 4 tarjetas en 2x2 y se elimino la de
   "Funciona sin conexion" por ser FALSA (Oscar). Con 3 en una grilla de 2 quedaba
   una sola en la ultima fila y media fila vacia. */
.razones{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;}
.razon{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r-caja);padding:24px;}
.razon h3{font-size:19px;margin-bottom:9px;color:var(--oro-claro);}
.razon p{font-size:16px;color:var(--texto-claro-2);}
.reporte{margin-top:34px;background:var(--crema);color:var(--texto-oscuro);
  border-radius:var(--r-caja);padding:30px;}
.reporte-cab{font-family:var(--display);font-weight:800;font-size:19px;margin-bottom:6px;}
.reporte-sub{font-size:15.5px;color:var(--texto-oscuro-2);margin-bottom:24px;}
.barra-fila{margin-bottom:22px;}
.barra-fila:last-child{margin-bottom:0;}
.barra-cab{display:flex;justify-content:space-between;font-weight:700;font-size:16px;margin-bottom:7px;}
.barra-riel{height:10px;background:var(--crema-2);border-radius:999px;overflow:hidden;}
.barra-relleno{height:100%;border-radius:999px;}
.barra-nota{font-size:15px;color:var(--texto-oscuro-2);margin-top:8px;}
@media (max-width:900px){ .razones{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .razones{grid-template-columns:1fr;} }

/* ---------- Quienes nos acompanan: cliente y sponsor (2026-09-10) ----------
   Seccion propia. Antes era una franja pegada al final de #nosotros y se leia
   como un apendice del equipo.

   SIN PLACA DETRAS DE LOS LOGOS, A DIFERENCIA DE LA VERSION ANTERIOR. Los dos
   logos son oscuros (Maryland 62% azul marino, Ferrara 64% gris carbon) y la
   seccion es 'claro' (--crema), asi que se leen solos. La placa --papel solo
   hace falta sobre fondo oscuro. Si esta seccion vuelve a fondo oscuro, hay que
   devolverles la placa o Ferrara desaparece.

   Las dos tarjetas comparten una franja de logo de alto fijo (.acomp-logo) para
   que los nombres queden a la misma altura: el escudo es vertical (680x838) y
   el de Ferrara apaisado (315x75), asi que sin ese alto comun las tarjetas
   quedarian desparejas. Se iguala la FRANJA, no la imagen. */
/* La seccion va CENTRADA entera: encabezado y tarjetas. Es la unica del sitio
   que lo esta, y es a proposito. Con el bloque de logos centrado y el h2 pegado
   a la izquierda, el aire de la derecha se lee como un error de maquetado en vez
   de como una decision. Al ser una seccion corta de creditos, centrarla completa
   se lee intencional. */
#respaldo .rotulo,#respaldo .titulo{text-align:center;}
.acompanan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;margin:38px auto 0;max-width:760px;}
.acomp{background:var(--papel);border:1px solid var(--borde-claro);
  border-radius:var(--r-caja);padding:26px 24px;text-align:center;}
.acomp-rotulo{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--azul-hondo);margin:0;}
.acomp-logo{display:flex;align-items:center;justify-content:center;
  height:104px;margin:16px 0 14px;}
.acomp-logo img{width:auto;max-width:100%;display:block;}
.m-cliente{height:96px;}
.m-sponsor{height:38px;}
.acomp-nombre{margin:0;font-size:16px;font-weight:600;color:var(--texto-oscuro);}
@media (max-width:620px){
  .acompanan{grid-template-columns:1fr;gap:16px;}
  .acomp-logo{height:88px;margin:14px 0 12px;}
  .m-cliente{height:80px;}
  .m-sponsor{height:34px;}
}

/* ---------- Equipo (rehecho el 2026-09-10) ----------
   La tarjeta paso de horizontal a VERTICAL para que la foto pueda ser grande:
   antes era un circulo de 54 px al lado del nombre, ahora son 112 px arriba y
   el texto debajo. Los archivos se regeneraron a 288x288 desde los originales
   de 1280x720, recuperando el mismo encuadre sobre la cara que ya tenian (el
   recorte original media entre 330 y 378 px de lado, asi que 288 no inventa
   pixeles). 112 px x 2 = 224, y 288 cubre eso con holgura.

   LA TARJETA YA NO ES UN <a>: son dos destinos (LinkedIn e Instagram) y no se
   pueden anidar enlaces. Por eso el hover ya no puede vivir en la tarjeta como
   estado de enlace; los unicos elementos pinchables son los iconos.

   El circulo con iniciales sigue siendo el estado por defecto si algun dia falta
   una foto: no es un placeholder, es el diseno de reserva. */
/* La grilla se limita a 920 px, mas angosta que los 1080 del .wrap. Con las
   tarjetas a todo el ancho la foto de 184 px quedaba flotando en el centro con
   77 px de aire a cada lado y la tarjeta se leia medio vacia. */
.equipo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:34px;max-width:920px;}
.persona{display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--superficie);border:1px solid var(--borde);border-radius:22px;
  padding:18px 18px 20px;transition:border-color .15s ease,background .15s ease;}
.persona:hover{border-color:var(--azul-claro);background:var(--fondo-2);}
.persona b{display:block;font-size:17px;margin-top:18px;}
.persona .rol{display:block;font-size:14.5px;color:var(--texto-claro-2);margin-top:2px;}
/* CUADRADO MUY REDONDEADO, NO CIRCULO (2026-09-10). Oscar mando de referencia
   arie.feriadesoftware.cl, que usa fotos cuadradas grandes, pero pidio que no
   quedara "tan cuadrado". El radio de 28 sobre 184 px es ~15% del lado: se lee
   redondeado sin volver a ser un circulo.

   EL TAMANO ESTA LIMITADO POR EL ORIGEN, no por el diseno. El recorte mas chico
   disponible es el de Valentina, 330 px de lado, y los JPG del sitio son de 320.
   A 184 px eso da 1.74x, que se ve nitido. Una foto a todo el ancho de la tarjeta
   (~300 px) quedaria a 0.95x, o sea borrosa. Para agrandarla mas hay que pedir
   los originales de nuevo; ver la tabla de recortes en la memoria del proyecto. */
.persona .foto{flex:0 0 auto;width:184px;height:184px;max-width:100%;border-radius:28px;
  overflow:hidden;display:grid;place-items:center;font-size:44px;font-weight:700;
  letter-spacing:.03em;background:var(--fondo-2);border:1px solid var(--borde);
  color:var(--oro-claro);transition:border-color .15s ease;}
.persona:hover .foto{border-color:var(--azul-claro);}
.persona .foto img{width:100%;height:100%;object-fit:cover;}

/* Los iconos son AHORA los unicos elementos pinchables de la tarjeta, asi que
   necesitan area de toque propia: 34x34 con el glifo de 18. Menos que eso queda
   por debajo del minimo comodo en telefono. */
.redes{display:flex;gap:6px;margin-top:14px;}
.redes a{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  transition:background .15s ease;}
.redes a:hover{background:var(--fondo-2);}
.redes .ico{width:18px;height:18px;fill:var(--texto-claro-2);transition:fill .15s ease;}
.redes a:hover .ico{fill:var(--azul-claro);}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* Misma anchura y mismo radio que .equipo-grid, para que la foto grupal y las
   tarjetas se lean como un solo bloque y no como dos cosas sueltas. */
.equipo-foto{margin:20px 0 0;max-width:920px;}
.equipo-foto img{display:block;width:100%;height:auto;border-radius:22px;
  border:1px solid var(--borde);}

.institucion{margin-top:30px;font-size:16px;color:var(--texto-claro-2);}
.institucion a{color:var(--azul-claro);font-weight:600;}
@media (max-width:900px){ .equipo-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .equipo-grid{grid-template-columns:1fr;} }

/* ---------- Proposito: mision y vision ---------- */
.proposito{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:34px 0 0;}
.prop{background:var(--superficie);border:1px solid var(--borde);border-radius:12px;
  padding:24px 26px;border-top:3px solid var(--oro);}
.prop h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--oro-claro);margin:0 0 12px;}
.prop p{margin:0;font-size:17.5px;line-height:1.55;color:var(--crema);}

/* ---------- Mision y vision sobre fondo claro (2026-09-10) ----------
   Oscar paso #nosotros a 'claro' para que mision y vision llamen mas la atencion,
   y son la primera seccion de la pagina.

   ESTO ES LA TRAMPA DE SIEMPRE, AL REVES. La nota del CSS de mas arriba avisa que
   una caja OSCURA dentro de una seccion 'claro' hereda texto oscuro y se vuelve
   ilegible. Aqui el problema es el gemelo: .prop trae fondo --superficie (cafe muy
   oscuro) y texto --crema, asi que sin estas reglas quedaban dos cajas negras
   flotando sobre el crema. Se pasan a --papel, igual que .acomp en #respaldo, que
   es como el sitio resuelve las cajas sobre fondo claro.

   EL ROTULO PASA DE --oro-claro A --azul-hondo, Y ESTA MEDIDO, no elegido a ojo:
   --oro-claro (#E4B448) sobre --papel da 1.9:1 y --oro (#CC9C3C) da 2.3:1; los dos
   reprueban AA por lejos. --azul-hondo (#37628F) da 5.8:1 y es ademas el color que
   .claro .rotulo y .acomp-rotulo ya usan sobre fondo claro. NO devolverlo al dorado.
   El filete dorado de arriba se queda: es decoracion, no texto. */
/* OJO: "border-color" a secas pisa TAMBIEN el borde de arriba, y el filete
   dorado de .prop desaparecia. Hay que reponer border-top-color aparte. */
.claro .prop{background:var(--papel);border-color:var(--borde-claro);
  border-top-color:var(--oro);}
.claro .prop h3{color:var(--azul-hondo);}
.claro .prop p{color:var(--texto-oscuro);}
@media (max-width:760px){ .proposito{grid-template-columns:1fr;} }

/* ---------- Invitacion a la Feria (2026-09-10) ----------
   Cierra #respaldo, bajo las tarjetas de cliente y sponsor (antes cerraba
   #nosotros). Va SIN caja: justo encima estan las dos tarjetas .acomp, y una
   tercera caja habria competido con ellas. Se separa con un filete y basta.
   VA CENTRADA y acotada a los 760 px de .acompanan porque #respaldo es la
   seccion centrada del sitio: alineada a la izquierda bajo tarjetas centradas
   se leeria como error de maquetado (lo mismo que paso con el h2).
   El logo FESW USM trae el texto en negro: depende de que la seccion sea 'claro'.
   Ver el comentario del HTML. */
.invita{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  max-width:760px;margin:40px auto 0;padding-top:32px;border-top:1px solid var(--borde-claro);
  text-align:center;}
.invita img{height:60px;width:auto;flex:0 0 auto;}
.invita p{margin:0;font-size:20px;font-weight:600;color:var(--texto-oscuro);
  max-width:34ch;line-height:1.4;}
@media (max-width:560px){
  .invita{gap:16px;margin-top:32px;padding-top:26px;}
  .invita img{height:48px;}
  .invita p{font-size:18px;}
}

/* ---------- Video comercial ---------- */
.video-marco{position:relative;max-width:900px;margin:36px auto 0;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;border:1px solid var(--borde);background:var(--fondo-2);}
.video-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
/* Caja oscura dentro de una seccion .claro: el color va explicito, si no hereda
   --texto-oscuro y el texto desaparece. Es la trampa del telefono del chat. */
.video-hueco{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:24px;color:var(--texto-claro-2);font-size:16px;}

/* ---------- Banda de cierre ----------
   Al separar el sitio, la seccion de Contacto se llevo el unico CTA del final:
   index, producto y nosotros terminaban directo en el pie. Esta banda devuelve
   la salida a Contacto en las tres.
   NO se anima: los elementos del final de la pagina no alcanzan a completar el
   animation-range porque se acaba el scroll, y quedarian medio transparentes. */
.cierre{background:var(--fondo);padding:64px 0 72px;text-align:center;}
.cierre h2{font-size:clamp(23px,3.2vw,33px);margin-bottom:24px;}

/* ---------- Contacto ---------- */
.contacto{background:linear-gradient(180deg,#1E1611 0%,#16100B 100%);text-align:center;}
.contacto h2{font-size:clamp(30px,4.6vw,46px);margin-bottom:18px;}
.contacto .bajada{margin:0 auto 30px;}
.contacto .botones{justify-content:center;}
.correo{margin-top:28px;font-size:16px;color:var(--texto-claro-2);}
.correo a{color:var(--azul-claro);font-weight:600;}

/* ---------- Pie ---------- */
.pie{background:var(--fondo);border-top:1px solid var(--borde);padding:48px 0 30px;}
.pie-alto{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;}
.pie-logo{height:44px;width:auto;margin-bottom:14px;}
.pie-alto p{font-size:15.5px;color:var(--texto-claro-2);max-width:38ch;}
.pie-col h3{font-size:15px;margin-bottom:12px;color:var(--oro-claro);}
.pie-col a{display:block;font-size:15.5px;color:var(--texto-claro-2);text-decoration:none;margin-bottom:9px;}
.pie-col a:hover{color:var(--crema);}
.pie-bajo{margin-top:34px;padding-top:20px;border-top:1px solid var(--borde);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:14px;color:var(--texto-claro-2);}
@media (max-width:760px){ .pie-alto{grid-template-columns:1fr;} }

/* ---------- Pagina actual en el menu ---------- */
.menu a[aria-current="page"]{color:var(--oro-claro);}