/* Pólizas Express · hoja única · rediseño 2026-10
   Sin Tailwind, sin paso de compilación: este archivo se edita directo.
   Los tokens de área se conmutan con data-area en el <body>. */

:root{
  color-scheme:light;

  /* Comunes */
  --papel:#FFFAF2;
  --blanco:#FFFFFF;
  --tinta:#24182F;
  --gris-texto:#4A5260;
  --linea:rgba(36,24,47,.14);

  /* Acción — idéntica en las dos áreas */
  --mamey:#E8743B;          /* SOLO relleno */
  --mamey-texto:#C04E10;

  /* Área pólizas */
  --morado:#52206B;
  --morado-vivo:#6B2E8F;

  /* Área legal */
  --turquesa:#17A2A2;       /* SOLO relleno */
  --turquesa-texto:#0E6E6E;
  --navy:#0F2847;
  --dorado:#C9A961;         /* SOLO relleno, salvo sobre navy */
  --dorado-claro:#E0CC9A;
  /* Oro de verdad, no beige. El #C9A961 del kit da 2.17:1 sobre papel y como
     contorno se lee marrón apagado. Este es amarillo saturado —el oro de la
     referencia que mandó el despacho— y aun así da 3.15:1 sobre papel y
     3.28:1 sobre blanco, que es lo que WCAG 1.4.11 pide a un objeto gráfico.
     Un amarillo más claro ya no llega: #C08A08 se queda en 2.96:1. */
  --dorado-hondo:#B8860B;

  /* Metales (2026-10-16, reafinados el 17) — SOLO bisel, contorno y
     estrellas. Nunca texto plano.
     Los degradados tienen muchas paradas a propósito: un metal creíble no es
     un claro-a-oscuro, son bandas de luz y sombra alternadas. Es lo que hace
     que al moverse parezca que la luz recorre la pieza. */
  --plata-honda:#7E8894;
  --bisel-plata:linear-gradient(135deg,#FFFFFF 0%,#C3CBD4 12%,#78828E 26%,
                                #F2F6FA 38%,#A9B3BE 50%,#6B7681 64%,
                                #E6EBF0 78%,#929CA8 90%,#C7CFD8 100%);
  --bisel-oro:linear-gradient(135deg,#FFF9D6 0%,#F7CE45 14%,#C98A0A 26%,
                              #FFEFA8 38%,#FFC928 50%,#9A6A06 64%,
                              #FFE68A 78%,#E0A313 90%,#B8860B 100%);

  /* Urgencia. 4.95:1 sobre papel: pasa AA incluso en texto chico, y sigue
     leyéndose como rojo de alarma y no como ladrillo. */
  --rojo:#D12B1F;

  /* Respaldo: una página sin data-area dejaría .btn-soft sin color. */
  --area:var(--morado);
  --area-texto:var(--morado);

  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

/* El área decide el color institucional de la página. Una sola hoja:
   dos hojas gemelas se desincronizan al tercer ajuste. */
[data-area="polizas"]{ --area:var(--morado);   --area-texto:var(--morado); }
[data-area="legal"]  { --area:var(--turquesa); --area-texto:var(--navy);   }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
::selection{background:var(--mamey);color:var(--tinta)}
:focus-visible{outline:3px solid var(--mamey);outline-offset:3px}

.wrap{max-width:1120px;margin:auto;padding:0 6vw}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:650;line-height:1.05}
h1{font-size:clamp(2.6rem,7vw,5.4rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.6rem)}
h3{font-size:1.3rem}
p{margin:0}
.lead{font-size:clamp(1.05rem,2vw,1.28rem);max-width:38rem;color:rgba(36,24,47,.78)}
.muted{color:rgba(36,24,47,.66)}
.tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
     text-transform:uppercase;color:var(--turquesa-texto);margin:0 0 .9rem}

/* Botones. El mamey lleva texto en tinta: blanco da 3.00:1 y reprueba
   justo en el elemento más usado de la página. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:2.8rem;
  padding:.75rem 1.3rem;border-radius:999px;text-decoration:none;
  border:1px solid transparent;font-weight:700;cursor:pointer;
  font-family:var(--sans);font-size:.94rem;
  transition:transform .16s ease,background .16s ease;
}
.btn-main{background:var(--mamey);color:var(--tinta);
          box-shadow:0 12px 30px rgba(232,116,59,.26)}
.btn-main:hover{background:#F2874F;transform:translateY(-1px)}
/* Respaldo antes de color-mix: Chrome < 111 lo ignora y se queda con la
   línea gris, que se ve bien. Sin el respaldo el botón quedaría sin borde. */
.btn-soft{background:transparent;color:var(--area-texto);
          border-color:var(--linea);
          border-color:color-mix(in srgb,var(--area) 30%,transparent)}
.btn-soft:hover{background:rgba(36,24,47,.05)}
.btn-soft:hover{background:color-mix(in srgb,var(--area) 8%,transparent)}

/* Tarjetas de paquete: blancas, borde fino, encabezado del color de área. */
.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);border-radius:10px;
  padding:1.6rem;display:flex;flex-direction:column;
  box-shadow:0 18px 50px rgba(36,24,47,.06);
}
.tarjeta h3{color:var(--morado)}
.tarjeta ul{list-style:none;padding:0;margin:1.1rem 0 1.6rem;display:grid;gap:.65rem;flex:1}
.tarjeta li{font-size:.9rem;color:rgba(36,24,47,.74);padding-left:1.1rem;position:relative}
.tarjeta li::before{content:"";position:absolute;left:0;top:.55em;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--mamey)}

/* La puerta legal. NO es un paquete: sólida contra contorneadas, sin lista.
   Texto navy porque blanco sobre turquesa da 3.12:1 y no alcanza. */
.puerta{
  background:var(--turquesa);color:var(--navy);border-radius:10px;
  padding:1.6rem;display:flex;flex-direction:column;overflow:hidden;
}
.puerta h3{color:var(--navy)}
.puerta .materias{font-size:.86rem;color:rgba(15,40,71,.82);margin:.9rem 0 1.4rem}
/* El dorado no puede ir sobre el turquesa (1.39:1). Necesita esta banda. */
.banda-navy{
  margin:auto -1.6rem -1.6rem;padding:.85rem 1.6rem;background:var(--navy);
  border-top:1px solid var(--dorado);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dorado); /* sobre-navy */
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only:focus{position:static;width:auto;height:auto;margin:0;clip:auto;
  white-space:normal;background:var(--mamey);color:var(--tinta);padding:.5rem 1rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.campo-oculto{display:none}
.campo-visible{display:grid}
.modal-cerrado{display:none}
.modal-abierto{display:flex}
.acordeon{border-top:1px solid var(--linea)}
.acordeon summary{cursor:pointer;padding:1rem 0;font-weight:700;list-style:none;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"+";flex:none;color:var(--mamey-texto);
  font-size:1.3rem;line-height:1}
.acordeon[open] summary::after{content:"−"}

/* Modo demo: marca los datos provisionales. Se apaga al quitar data-demo. */
[data-demo="true"] .s720-falta{
  outline:1px dashed var(--mamey);outline-offset:2px;cursor:help;
}

/* ── Encabezado y hero ─────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,250,242,.88);
  border-bottom:1px solid var(--linea);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--area-texto)}
.marca span{font-family:var(--serif);font-size:1.12rem;font-weight:650}
.links{display:flex;align-items:center;gap:1.25rem;font-size:.92rem}
.links a{text-decoration:none;color:rgba(36,24,47,.76)}
.links a:hover{color:var(--area-texto)}
.menu{display:none;background:transparent;border:0;color:var(--area-texto);font-size:1.7rem}

.hero{
  min-height:calc(100svh - 70px);display:grid;align-items:center;
  background:
    linear-gradient(90deg,rgba(255,250,242,.97) 0 42%,rgba(255,250,242,.58) 58%,transparent 76%),
    url('/assets/hero-polizas.webp');
  background-size:cover;background-position:center right;
}
/* 54% y no 46%: al crecer los tres niveles del hero (2026-10-16) el titular
   se partía en cuatro renglones dentro de la columna vieja. El degradado de
   .hero se corrió al mismo 42/58 para que el texto siga cayendo sobre papel
   sólido y no sobre la fotografía. */
.hero-grid{display:grid;grid-template-columns:minmax(0,54%) 1fr;padding-block:4rem}
.hero-texto h1{color:var(--morado);font-size:clamp(3.1rem,8.4vw,6.4rem)}
.h-mamey{color:var(--mamey-texto);margin-top:.5rem;
  font-size:clamp(2.05rem,4.6vw,3.9rem)}
.h-turquesa{color:var(--turquesa-texto);font-family:var(--sans);
  font-size:clamp(1.22rem,2.4vw,1.7rem);font-weight:700;letter-spacing:.01em;
  margin-top:.9rem;line-height:1.25}
.hero-texto .lead{margin-top:1.3rem}
.hero-acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ── Contorno dorado del titular ───────────────────────────
   El relleno NO cambia: sigue siendo morado (o navy en legal), que es el
   color que la auditoría de contraste mide. El dorado es un contorno que
   se pinta DEBAJO del relleno gracias a paint-order, así que no come glifo
   ni baja el contraste. Sin paint-order (navegadores viejos) el trazo pisa
   el borde de la letra: a .034em sigue legible, solo se ve más grueso. */
.titulo-oro{
  paint-order:stroke fill;
  /* .055em y no .034em: al 34 % el contorno se leía como un filete y la
     referencia que mandaron pide que el oro TENGA cuerpo. */
  -webkit-text-stroke:.055em var(--dorado-hondo);
  /* Sólo relieve, sin halo. El difuminado dorado que había aquí hacía
     justo lo contrario de lo que se le pedía: envolvía el contorno en luz
     del mismo color y se lo comía. El filete claro al pie y la sombra en
     tinta son lo que da el volumen, y ésos se quedan. */
  text-shadow:
    0 .02em 0 var(--dorado-claro),
    0 .035em .02em rgba(36,24,47,.3);
}

/* El plazo. Rojo sólido sobre papel (4.95:1) y un latido discreto: lo que
   tiene que notarse es «en una hora», no la animación. */
.urge{
  color:var(--rojo);font-style:normal;font-weight:800;white-space:nowrap;
  display:inline-block;animation:late 2.4s ease-in-out infinite;
}
@keyframes late{
  0%,72%,100%{ transform:none }
  80%        { transform:scale(1.07) }
  88%        { transform:scale(.99) }
}
@media (prefers-reduced-motion: reduce){
  .titulo-oro,.urge,.metal::before{ animation:none }
}

.franja{
  background:var(--morado);color:var(--blanco);
  text-align:center;font-size:.82rem;padding:.85rem 6vw;margin:0;
}
.franja a{color:var(--blanco)}

@media(max-width:900px){
  .links{display:none}
  .links.open{position:absolute;left:0;right:0;top:70px;display:grid;gap:.5rem;
    background:var(--papel);padding:1rem 6vw;border-bottom:1px solid var(--linea)}
  .menu{display:block}
  .hero-grid{grid-template-columns:1fr}
  /* En celular el degradado gira a vertical: la foto sube y el texto cae sobre
     papel sólido. Un degradado lateral en 390px deja el H1 sobre la cara. */
  .hero{background-position:center top;align-items:end;
    background-image:linear-gradient(180deg,rgba(255,250,242,.08) 0,rgba(255,250,242,.4) 26%,rgba(255,250,242,.97) 46%),
                     url('/assets/hero-polizas.webp')}
  .hero-grid{padding-block:32svh 2.5rem}
}

/* ── Secciones ─────────────────────────────────────────── */
.seccion{padding:5.5rem 0;border-top:1px solid var(--linea)}
.h-area{color:var(--area-texto);max-width:16ch}
.escena{margin:2.5rem 0 0;border-radius:12px;overflow:hidden}
.escena img{display:block;width:100%;height:auto}

/* El PREMIUM pesa más que los otros dos: 1.22fr de rejilla, más aire adentro
   y un desbordamiento vertical de 1.1rem arriba y abajo. Se hace con la
   rejilla y no con transform:scale porque movimiento.js ya usa transform
   para la inclinación al cursor y los dos se pisarían. */
.rejilla-paquetes{display:grid;grid-template-columns:1fr 1.22fr 1fr;
  gap:1.1rem;margin-top:3.2rem;align-items:stretch}
.tarjeta{position:relative}
.tarjeta.destacada{margin-block:-1.1rem;padding:2.2rem 1.9rem 1.9rem}
.tarjeta.destacada h3{font-size:1.75rem}
.tarjeta.destacada li{font-size:.95rem}

/* ── Bisel metálico ────────────────────────────────────────
   El marco va en un ::before enmascarado, no en `border`: un borde no puede
   llevar degradado y `border-image` se lleva mal con border-radius. La
   máscara recorta el centro y deja sólo el filete de 2px.
   El metal es decoración: todo el texto de la tarjeta conserva sus colores
   auditados. */
/* El marco es un ::before enmascarado: un `border` no admite degradado y
   `border-image` se lleva mal con border-radius.

   Sobre el degradado va un moleteado diagonal muy fino —el labrado del canto
   de una moneda, el guilloché de un billete o de un título de propiedad—.
   Es la respuesta a «que los marcos sean de cadenas»: textura metálica real,
   del lenguaje de los documentos de valor, que es el negocio del despacho.
   Una cadena dibujada a 4 px se convierte en papilla gris y además arrastra
   el sitio a la estética de la bisutería.

   El grosor es jerarquía, no decoración: 3 px la plata, 4 px el oro. Esa
   diferencia es lo que hace que el PREMIUM se vea mejor SIN tener que
   gritarlo. */
.metal{border-color:transparent;isolation:isolate}
.metal::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:var(--filete,3px);
  background:
    repeating-linear-gradient(128deg,
      rgba(255,255,255,.5) 0 1px, rgba(0,0,0,.14) 1px 2px, transparent 2px 4px),
    var(--bisel,var(--bisel-plata));
  background-size:auto, 240% 240%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:1;
}
.metal-plata{--bisel:var(--bisel-plata);--filete:3px}
.metal-oro{--bisel:var(--bisel-oro);--filete:4px;
  box-shadow:0 18px 50px rgba(184,134,11,.2),0 0 0 1px rgba(184,134,11,.18)}

/* Sólo el oro respira solo. La plata se queda quieta: si los dos brillan,
   ninguno destaca, y además es un elemento animado menos corriendo todo el
   tiempo en la página. */
.metal-oro::before{ animation:metal-brilla 9s ease-in-out infinite }
@keyframes metal-brilla{
  0%,100%{ background-position:0 0, 0% 50% }
  50%    { background-position:0 0, 100% 50% }
}

.cinta{
  position:absolute;top:-.8rem;left:1.9rem;z-index:2;background:var(--mamey);color:var(--tinta);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;font-weight:700;
  box-shadow:0 0 0 2px var(--blanco),0 0 0 3.5px var(--dorado-hondo);
}
/* El destello que cruza la cinta NO se escribe aquí: ya existe en
   movimiento.css (`.cinta::after` + `cinta-brillo`), que es donde vive la
   capa de gestos. Duplicarlo costaba caro y en silencio: aquella regla anima
   `translate` y una copia con `transform` no la pisa —son propiedades
   distintas—, así que los dos desplazamientos se suman y el brillo se queda
   fuera de cuadro para siempre. El gesto de las estrellas vive allá, junto a
   él, por la misma razón. */

/* Las estrellas son el rango del paquete: una en plata, tres en oro. Van
   aria-hidden porque el rango ya lo dice el nombre del paquete; para un
   lector de pantalla serían tres símbolos sin significado.

   El relleno es el degradado metálico completo —amarillo vivo, no el oro
   apagado— y quien aporta el contraste del objeto gráfico es el CONTORNO,
   que sí está medido. Es como WCAG trata cualquier figura perfilada: el
   relleno puede ser lo que sea si el borde la define. */
.estrellas{display:flex;gap:.22rem;font-size:1.6rem;line-height:1;margin-bottom:.55rem}
.estrellas span{color:var(--contorno-estrella,var(--plata-honda))}
.metal-plata{--contorno-estrella:var(--plata-honda)}
.metal-oro{--contorno-estrella:var(--dorado-hondo)}
.metal-oro .estrellas{font-size:2rem;gap:.26rem}
@supports (-webkit-background-clip:text){
  .estrellas span{
    background:var(--bisel);background-size:260% 100%;background-position:0% 50%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-stroke:.75px var(--contorno-estrella);
  }
}

/* Va aquí y no en el bloque de reduced-motion de arriba: `.metal-oro::before`
   y `.metal::before` tienen la misma especificidad, así que quien gana es el
   último en el archivo. Un reduced-motion escrito antes no apagaría nada. */
@media (prefers-reduced-motion: reduce){
  .metal-oro::before{ animation:none }
}

.etiqueta{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--turquesa-texto);margin-top:.35rem}
.tarjeta.destacada .etiqueta{color:var(--mamey-texto)}
/* «Todos los beneficios del BÁSICO y además:» no es un punto más de la
   lista: es el encabezado de lo que sigue. */
.hereda{font-size:.88rem;font-weight:700;color:var(--morado);
  margin:1.1rem 0 0;padding:.6rem .8rem;border-radius:8px;
  background:rgba(82,32,107,.07)}
.tarjeta .hereda + ul{margin-top:.8rem}

/* La puerta es un enlace entero, no una tarjeta con botón adentro. */
.puerta-enlace{text-decoration:none;transition:transform .18s ease}
.puerta-enlace:hover{transform:translateY(-3px)}
.puerta .btn{align-self:flex-start;margin-top:auto}
.puerta .banda-navy{margin-top:1.4rem}

.nota-sin-iva{font-size:.8rem;margin-top:1.4rem}
/* El asterisco del plazo. Va junto a cada promesa de «una hora», no sólo en
   términos: una afirmación de desempeño sin su condición al lado es
   publicidad engañosa, y aquí el anunciante es un despacho de abogadas. */
.nota-plazo{font-size:.78rem;margin-top:1.3rem;max-width:44ch;line-height:1.5}
.nota-plazo a{color:var(--mamey-texto);text-decoration:underline;
  text-underline-offset:2px}
.hero-texto .nota-plazo{margin-top:1.5rem}
.lista-req{margin:0 0 1.2rem;padding-left:1.1rem;display:grid;gap:.5rem}
.lista-req li{font-size:.9rem;color:rgba(36,24,47,.74)}
.nota-pago{font-size:.8rem;margin-top:1.4rem;border-left:2px solid var(--turquesa);
  padding-left:.9rem}

/* Ejemplos de asuntos dentro de la puerta legal. Siguen siendo texto navy
   sobre turquesa: el blanco ahí da 3.12:1 y no alcanza. */
.materias-ej{list-style:none;padding:0;margin:.4rem 0 1.4rem;display:grid;gap:.5rem}
.materias-ej li{font-size:.82rem;color:rgba(15,40,71,.82);line-height:1.5}
.materias-ej b{color:var(--navy)}

/* ── Beneficios por perfil ─────────────────────────────────
   El filtro que sustituye al párrafo del hero: el visitante se reconoce en
   uno de los tres y sale de ahí al formulario sin pasar por los paquetes.
   Cada panel habla de RESULTADO, nunca de cómo se hace el trámite: el
   procedimiento es lo que la competencia viene a copiar. */
.perfiles{display:grid;gap:.9rem;margin-top:2.4rem}
.perfil{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;
  overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease}
.perfil[open]{border-color:color-mix(in srgb,var(--area) 34%,transparent);
  box-shadow:0 18px 50px rgba(36,24,47,.07)}
.perfil > summary{cursor:pointer;list-style:none;padding:1.15rem 1.5rem;
  display:flex;align-items:center;gap:1rem;font-family:var(--serif);
  font-size:1.22rem;font-weight:650;color:var(--area-texto)}
.perfil > summary::-webkit-details-marker{display:none}
.perfil > summary::after{content:"+";margin-left:auto;flex:none;
  color:var(--mamey-texto);font-family:var(--sans);font-size:1.5rem;line-height:1}
.perfil[open] > summary::after{content:"−"}
.perfil-cuerpo{padding:0 1.5rem 1.5rem}
.perfil-lista{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.85rem}
.perfil-lista li{font-size:.92rem;color:rgba(36,24,47,.78);padding-left:1.7rem;
  position:relative;line-height:1.6}
.perfil-lista li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--turquesa-texto);font-weight:800}
.perfil-lista b{color:var(--tinta)}

/* ── El gancho que ocupa el lugar de los requisitos ────────
   Las tres listas de requisitos dejaron de mostrarse de entrada (ver
   .requisitos abajo). Aquí va lo único que el visitante necesita saber
   antes de dar sus datos. */
.gancho-req{margin-top:2.6rem;padding:1.6rem 1.7rem;border-radius:10px;
  background:var(--blanco);border:1px solid var(--linea);
  display:grid;gap:.9rem;justify-items:start}
.gancho-req h3{color:var(--morado)}
.gancho-req p{font-size:.92rem;color:rgba(36,24,47,.74);max-width:46ch}
.gancho-req .btn{margin-top:.2rem}

/* Los requisitos siguen en el documento —son contenido real del sitio— pero
   sólo se muestran cuando la solicitud ya se envió. Sin JavaScript se ven
   siempre: la regla cuelga de .js, que pone el script del <head>. */
.js .requisitos{display:none}
.js .solicitud-enviada .requisitos{display:block}
.requisitos-intro{margin:2.6rem 0 .6rem;padding:1.1rem 1.3rem;border-radius:10px;
  background:rgba(23,162,162,.1);border-left:3px solid var(--turquesa);
  font-size:.92rem;color:var(--tinta)}
.requisitos-intro b{color:var(--turquesa-texto)}

@media(max-width:900px){
  /* En una columna el desbordamiento vertical del PREMIUM solaparía la
     tarjeta de arriba: el peso extra se lo da el gap, no el margen. */
  .rejilla-paquetes{grid-template-columns:1fr;gap:1.8rem}
  .tarjeta.destacada{margin-block:0;padding:2rem 1.5rem 1.6rem}
  .seccion{padding:4rem 0}
}

/* ── Formulario y contacto ─────────────────────────────── */
.rejilla-contacto{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.75fr);
  gap:3rem;align-items:start;margin-top:2.5rem}
form{display:grid;gap:1rem}
label{font-weight:700;font-size:.9rem}
input,select,textarea{
  width:100%;min-height:2.9rem;border:1px solid rgba(36,24,47,.18);border-radius:8px;
  background:var(--blanco);color:var(--tinta);font:inherit;padding:.72rem .85rem;
}
textarea{min-height:7rem;resize:vertical}
input[type="checkbox"]{width:auto;min-height:0;margin-top:.25rem}
.dos{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.campo-visible{display:grid;gap:1rem}
.casilla{display:flex;gap:.6rem;align-items:flex-start;font-weight:500;font-size:.84rem}
/* Por clase y no por id: desde 2026-10-16 hay dos formularios por página
   (el de la sección y el del modal) y cada uno lleva su propio aviso. */
.toast{font-size:.9rem;margin:0}
.toast-ok{color:var(--turquesa-texto)}
.toast-error{color:var(--mamey-texto)}

.lado{display:grid;gap:1rem;align-content:start}
.caja-aliados,.caja-directo{background:var(--blanco);border:1px solid var(--linea);
  border-radius:10px;padding:1.4rem;display:grid;gap:.8rem}
.caja-directo a{font-size:.9rem}
/* El mensaje para quien busca casa va en morado: es el único bloque de la
   sección que habla a otro público, y el color lo separa. */
.caja-buscas{background:var(--morado);color:var(--blanco);border-radius:10px;padding:1.4rem}
/* 1.35rem = 21.6px en Fraunces 650: califica como texto grande, que es lo que
   la regla del despacho pide sobre fondo morado (grandes en naranja, chicas en
   blanco). A 1.15rem no llegaba al umbral y 3.93:1 habría reprobado. */
.caja-buscas h3{color:var(--mamey); /* grande-sobre-morado */ font-size:1.35rem}
.caja-buscas p{color:var(--blanco);font-size:.9rem;margin-top:.5rem}

.escena-ancha{margin:0;border-radius:0}
.modal{position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;
  padding:1rem;background:rgba(36,24,47,.76)}
.dialogo{width:min(100%,420px);background:var(--papel);border-radius:12px;padding:1.7rem;
  display:grid;gap:1rem;box-shadow:0 24px 80px rgba(0,0,0,.3)}
.dialogo h2{font-size:1.8rem;color:var(--area-texto)}
/* El diálogo de solicitud lleva un formulario: más ancho y con scroll
   propio, porque en un celular apaisado 88svh es todo lo que hay. */
.dialogo-ancho{width:min(100%,540px);max-height:88svh;overflow-y:auto}
.dialogo-ancho form{gap:.85rem}
.dialogo-cerrar{justify-self:end;margin-top:-.4rem}
.modal-nota{font-size:.78rem;color:rgba(36,24,47,.66);margin:0;
  border-left:2px solid var(--mamey);padding-left:.8rem}

@media(max-width:900px){ .rejilla-contacto{grid-template-columns:1fr;gap:2rem} }
@media(max-width:560px){ .dos{grid-template-columns:1fr} }

/* ── Pie ───────────────────────────────────────────────── */
.pie{background:var(--morado);color:rgba(255,255,255,.82);padding:3.5rem 0 2rem;font-size:.88rem}
/* Una regla, las dos páginas: el pie sigue el área del <body>. */
[data-area="legal"] .pie{background:var(--navy)}
.pie-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.5rem}
/* El mamey se queda SOLO en el símbolo: como objeto gráfico le basta 3:1
   (da 3.93 sobre morado y 4.94 sobre navy). El nombre es texto chico y va en
   blanco — en mamey daría 3.93:1 y reprobaría. */
.pie-marca{color:var(--mamey); /* grande-sobre-morado */ margin-bottom:1rem}
.pie-marca span{font-size:1rem;color:var(--blanco)}
.pie-datos{font-size:.8rem;line-height:1.8;color:rgba(255,255,255,.7)}
.pie h3{font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--blanco);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:.8rem}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.pie a{color:rgba(255,255,255,.82);text-decoration:none}
/* Hover a blanco pleno, no a mamey: estos enlaces miden 14px y el mamey
   sobre morado da 3.93:1, que no alcanza para texto chico. */
.pie a:hover{color:var(--blanco);text-decoration:underline}
.pie-cierre{margin-top:2.5rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.76rem;color:rgba(255,255,255,.6)}
.pie-cierre p{margin:0}
@media(max-width:900px){ .pie-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .pie-grid{grid-template-columns:1fr} }

/* ── Entradas al scroll ────────────────────────────────────
   Viven en la hoja base, no en movimiento.css: sitio.js se carga en las seis
   páginas y las legales NO enlazan movimiento.css. Si el par .aparece/.visible
   viviera solo allá, una página sin esa hoja mostraría contenido invisible. */
.aparece{opacity:0;transform:translateY(18px);
  transition:opacity .42s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.4,0,.2,1)}
.aparece.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .aparece{opacity:1;transform:none;transition:none}
}

/* ── Área legal ────────────────────────────────────────── */
.hero-legal{
  background:
    linear-gradient(90deg,rgba(255,250,242,.97) 0 42%,rgba(255,250,242,.58) 58%,transparent 76%),
    url('/assets/hero-legal.webp');
  background-size:cover;background-position:center right;
}
.hero-legal h1{color:var(--navy)}
/* En legal el h2 es la enumeración de materias: no debe competir con el H1. */
.hero-legal .h-mamey{font-size:clamp(1.6rem,3.2vw,2.6rem)}
.franja-legal{background:var(--navy)}

/* Las materias viven sobre navy: es el único fondo donde el dorado existe
   (6.60:1). Sobre papel daría 2.17:1 y sobre turquesa 1.39:1. */
.banda-materias{background:var(--navy);color:rgba(255,255,255,.84);border-top:0}
.banda-materias .tag{color:var(--turquesa); /* sobre-navy */ }
.banda-materias .h-area{color:var(--blanco)}
.rejilla-materias{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2.5rem}
.materia{
  background:rgba(255,255,255,.05);border:1px solid rgba(201,169,97,.35);
  border-radius:10px;padding:1.5rem;
}
.materia h3{color:var(--dorado-claro);margin-bottom:.6rem}
.materia p{font-size:.92rem;color:rgba(255,255,255,.78)}
.escena-lado{margin:0;border-radius:10px;overflow:hidden}

/* ── Logo completo ─────────────────────────────────────────
   Arriba de 48px va la construcción completa (brazo central despegado,
   cortes diagonales); el header, a 22px, se queda con la compacta. Es la
   regla del kit, no una preferencia. overflow visible: al armarse, las
   piezas entran desde fuera del marco. */
.logo-full{display:block;overflow:visible}
.hero-logo{display:block;width:max-content;margin-bottom:1.5rem;color:var(--morado);
  transform-origin:50% 50%}
/* La animación de la E fue lo que más les gustó en la revisión del 13-oct y
   pidieron verla más grande. El clamp la deja crecer hasta 96px sin empujar
   el hero en celular; la intro la escala desde su caja real, así que el
   vuelo al centro sigue calculándose solo. */
.hero-logo .logo-full{width:clamp(66px,7.4vw,96px);height:auto;aspect-ratio:726/1000}
/* En el área legal la E va en dorado sobre navy: el dorado solo existe ahí. */
[data-area="legal"] .hero-logo{background:var(--navy);color:var(--dorado); /* sobre-navy */
  padding:12px 14px;border-radius:6px}
[data-area="legal"] .hero-logo .logo-full{width:clamp(54px,5.8vw,78px)}

/* «¿Estás buscando casa?» lleva la foto de la pareja entrando a su casa. El
   texto sigue sobre morado sólido: sobre la foto no habría contraste fiable. */
.buscas-foto{margin:-1.4rem -1.4rem 1.2rem;aspect-ratio:16/9;overflow:hidden;
  border-radius:10px 10px 0 0}
.buscas-foto img{display:block;width:100%;height:100%;object-fit:cover}
.caja-buscas{overflow:hidden}

/* El sello de la banda de materias: la E en dorado entre dos filetes. */
.sello{display:flex;align-items:center;gap:1.6rem;max-width:640px;
  margin:3.8rem auto 0;color:var(--dorado); /* sobre-navy */}
.sello .logo-full{width:64px;height:88px;flex:none}
.sello-linea{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--dorado))}
.sello-linea:last-child{background:linear-gradient(90deg,var(--dorado),transparent)}
.sello-pie{text-align:center;margin-top:1.1rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dorado-claro)}

/* ── Flotantes: música ambiental y WhatsApp ─────────────── */
.flotantes{position:fixed;left:1.2rem;bottom:1.2rem;z-index:40;display:flex;
  align-items:center;gap:.7rem}
.audio-btn{width:50px;height:50px;border-radius:999px;flex:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,250,242,.86);color:var(--area-texto);
  border:1px solid var(--linea);box-shadow:0 12px 30px -12px rgba(36,24,47,.45);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
[data-area="legal"] .audio-btn{background:rgba(15,40,71,.9);color:var(--dorado); /* sobre-navy */
  border-color:rgba(201,169,97,.4)}
.eq{display:flex;align-items:center;gap:2.5px;height:15px}
.eq span{width:2.5px;height:100%;background:currentColor;border-radius:2px;transform:scaleY(.55)}
.audio-btn .icon-mute{display:none;width:20px;height:20px}
.audio-btn.is-off .eq{display:none}
.audio-btn.is-off .icon-mute{display:block}
.audio-hint{background:rgba(255,250,242,.95);color:var(--tinta);font-size:.68rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.6rem 1rem;
  border-radius:999px;white-space:nowrap;box-shadow:0 12px 30px -12px rgba(36,24,47,.4);
  opacity:0;pointer-events:none}
.audio-hint.show{opacity:1}
.wa-flotante{position:fixed;right:1.2rem;bottom:1.2rem;z-index:40;width:54px;height:54px;
  border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;box-shadow:0 14px 34px -12px rgba(37,211,102,.7)}
.wa-flotante svg{width:27px;height:27px}
@media(max-width:900px){
  .flotantes{left:.9rem;bottom:.9rem}
  .audio-btn{width:44px;height:44px}
  .wa-flotante{right:.9rem;bottom:.9rem;width:50px;height:50px}
  .wa-flotante svg{width:25px;height:25px}
  .pie:has(~ .flotantes){padding-bottom:5.5rem}
}
@media(max-width:420px){ .audio-hint{display:none} }

@media(max-width:900px){
  /* 66%: en vertical la abogada queda a cuadro; centrado sale solo la ventana. */
  .hero-legal{background-position:66% top;
    background-image:linear-gradient(180deg,rgba(255,250,242,.08) 0,rgba(255,250,242,.4) 26%,rgba(255,250,242,.97) 46%),
                     url('/assets/hero-legal.webp')}
  .rejilla-materias{grid-template-columns:1fr}
}

/* ── Páginas legales ───────────────────────────────────────
   Documento, no marketing: una columna, un tono, pensadas para leerse largo
   y para imprimirse. Sin fotografía, sin tarjetas, sin movimiento. El molde
   es el resto de la red (vallemonarca/landing_vallemonarca/privacidad.html). */
.doc-grid{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr);
  gap:3.5rem;align-items:start;padding-block:3.5rem}
.toc{position:sticky;top:94px;font-size:.84rem}
.toc a{display:block;padding:.4rem 0 .4rem .9rem;text-decoration:none;
  border-left:2px solid var(--linea);color:var(--gris-texto)}
.toc a:hover,.toc a.activo{color:var(--morado);border-left-color:var(--mamey)}
.toc a.activo{font-weight:700}

.doc{max-width:68ch}
.doc h1{font-size:clamp(2rem,4vw,3rem);color:var(--morado);margin-bottom:.4rem}
.doc .fecha{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris-texto);margin-bottom:2.5rem}
.doc h2{font-size:1.25rem;color:var(--morado);margin:2.5rem 0 .8rem}
.doc h3{font-size:1.02rem;color:var(--tinta);margin:1.6rem 0 .5rem}
.doc section{scroll-margin-top:110px}
.doc p,.doc li{line-height:1.8;color:var(--tinta);font-size:.95rem}
.doc p{margin-bottom:1rem}
.doc ul,.doc ol{margin:0 0 1rem;padding-left:1.2rem}
.doc li{margin-bottom:.5rem}
.doc strong{font-weight:700}
.doc a{color:var(--mamey-texto);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.doc table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.9rem}
.doc th,.doc td{text-align:left;padding:.55rem .7rem;border:1px solid var(--linea);
  vertical-align:top}
.doc th{background:rgba(82,32,107,.05);font-weight:700}

@media(max-width:900px){
  .doc-grid{grid-template-columns:1fr;gap:1.5rem}
  .toc{position:static}
}
@media print{
  .topbar,.toc,.pie-grid{display:none !important}
  body{background:#fff}
  .doc{max-width:none}
  .doc a{color:var(--tinta);text-decoration:none}
  /* Un aviso impreso que dice «consulte nuestros términos» sin decir dónde
     no sirve de nada. */
  .doc a[href^="/"]::after,.doc a[href^="http"]::after{
    content:" (" attr(href) ")";font-size:.8em;color:#555}
  .pie{background:#fff;color:#333;padding:1rem 0}
}
/* El 404 no lleva índice: es media pantalla con un mensaje y dos enlaces. */
.doc-simple{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}