/* ==========================================================================
   GRUPO DEASA · WIDEX — capa de diseño sobre Tailwind
   Editorial clínico. Azul royal DEASA + oro WIDEX. Accesible 60+.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#13306b;
  --navy-deep:#0c1f49;
  --blue:#1f5fd0;
  --gold:#cf9a2b;
  --gold-deep:#a9781a;
  --red:#c3352c;
  --paper:#f7f3ec;
  --paper-2:#efe8dc;
  --ink:#15212f;
  --body:#3c4a5a;
  --muted:#6a7686;
  --line:#e2dccf;
}

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }

body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:19px; line-height:1.7; color:var(--body);
  background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html[data-text="lg"] body{ font-size:21px; }
html[data-text="xl"] body{ font-size:23px; }

h1,h2,h3,h4,.serif{ font-family:'Source Serif 4',Georgia,serif; color:var(--ink); }
.display{ font-weight:600; letter-spacing:-.018em; line-height:1.04; }

/* Foco accesible fuerte */
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* Eyebrow / kicker editorial */
.kicker{
  font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:.8rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:.7rem;
}
.kicker::before{ content:""; width:34px; height:2px; background:var(--gold); display:inline-block; }
.kicker.center::after{ content:""; width:34px; height:2px; background:var(--gold); display:inline-block; }

/* Regla fina superior de sección */
.rule{ height:1px; background:var(--line); border:0; }

/* Botones — grandes para 60+ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:60px; padding:.85rem 1.8rem; font-weight:700; font-size:1.05rem;
  border-radius:999px; text-decoration:none; cursor:pointer; border:2px solid transparent;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),background .2s,box-shadow .25s,border-color .2s;
  line-height:1; text-align:center;
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn:active{ transform:translateY(1px); }
.btn-gold{ background:var(--gold); color:var(--navy-deep); box-shadow:0 12px 26px -12px rgba(207,154,43,.8); }
.btn-gold:hover{ background:#dca933; transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(207,154,43,.9); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:#184088; transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--navy); background:#fff; }
.btn-ghost-light{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.btn-lg{ min-height:66px; font-size:1.12rem; padding:1rem 2.1rem; }

/* Enlace con subrayado animado */
.link-underline{ position:relative; text-decoration:none; font-weight:700; color:var(--navy); }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.link-underline:hover::after{ transform:scaleX(1); }

/* Tarjeta base */
.surface{ background:#fff; border:1px solid var(--line); border-radius:20px; }

/* Lista de servicios editorial (número + texto) */
.svc-item{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.4rem; padding:1.8rem 0; border-top:1px solid var(--line); transition:padding-left .3s,background .3s; }
.svc-item:hover{ padding-left:1rem; }
.svc-num{ font-family:'Source Serif 4',serif; font-size:1.1rem; font-weight:600; color:var(--gold-deep); padding-top:.3rem; }
.svc-item h3{ font-size:1.45rem; font-weight:600; margin:0 0 .25rem; }
.svc-item p{ margin:0; color:var(--muted); }
.svc-arrow{ position:absolute; right:0; top:1.8rem; color:var(--navy); opacity:0; transform:translateX(-8px); transition:.3s; }
.svc-item:hover .svc-arrow{ opacity:1; transform:translateX(0); }

/* Medallón 40 años */
.medallion{
  width:128px; height:128px; border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#1a4291,var(--navy-deep));
  color:#fff; display:grid; place-items:center; text-align:center; line-height:1.05;
  box-shadow:0 18px 40px -14px rgba(12,31,73,.6); border:3px solid var(--gold);
}
.medallion b{ font-family:'Source Serif 4',serif; font-size:2.5rem; font-weight:700; display:block; color:var(--gold); }
.medallion span{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; }

/* Tira de marcas/confianza con desplazamiento */
.marquee{ overflow:hidden; }
.marquee-track{ display:flex; gap:3.5rem; width:max-content; animation:marquee 28s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee-item{ display:inline-flex; align-items:center; gap:.7rem; color:#9fb0cb; font-weight:600; white-space:nowrap; }
.marquee-item svg{ width:22px; height:22px; color:var(--gold); }

/* Campos de formulario grandes */
.field-label{ display:block; font-weight:700; color:var(--ink); margin-bottom:.5rem; }
.field-input{
  width:100%; min-height:58px; padding:.85rem 1.1rem; font-family:inherit; font-size:1.05rem;
  color:var(--ink); background:#fff; border:2px solid var(--line); border-radius:14px; transition:.2s;
}
.field-input:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(31,95,208,.14); }
textarea.field-input{ min-height:130px; resize:vertical; }

/* Acordeón Flowbite override para legibilidad */
.faq-trigger{ font-family:'Source Serif 4',serif; font-size:1.2rem; font-weight:600; color:var(--ink); }

/* Reveal al hacer scroll */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; } }

/* Botón flotante llamar (móvil) */
.fab{ position:fixed; right:16px; bottom:16px; z-index:60; display:none; }
@media(max-width:1023px){ .fab{ display:inline-flex; } }

/* WhatsApp flotante con pulso */
@keyframes wapulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); } 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } }
.wa-fab{ animation:wapulse 2.4s infinite; }
@media (prefers-reduced-motion:reduce){ .wa-fab{ animation:none; } }

/* Detalle: textura de puntos sutil */
.dot-grid{ background-image:radial-gradient(var(--line) 1.3px,transparent 1.3px); background-size:22px 22px; }

/* Imagen con marco editorial */
.framed{ border-radius:24px; overflow:hidden; box-shadow:0 40px 80px -40px rgba(12,31,73,.5); }