/* ===========================================================
   Clínica Oftalmológica Vitacura — v2 UI / motion
   Sistema del Manual de Marca COV v1.3 (blancos + azules, Quicksand)
   =========================================================== */
:root{
  --profundo:#273A58; --acero:#425E80; --sereno:#8CACCD; --cielo:#B2D1EE;
  --gris:#F4F6F9; --tinta:#1F2A37; --tinta-suave:#5A6B7E; --borde:#E2E8F1;
}
*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:hidden; max-width:100%; }
body{ font-family:'Quicksand',system-ui,sans-serif; color:var(--tinta); background:#fff; }
::selection{ background:var(--cielo); color:var(--profundo); }

/* ---------- HEADER ---------- */
.site-header{ background:var(--profundo); transition:box-shadow .3s ease; }
.navlink{ position:relative; color:rgba(247,249,252,.82); font-weight:500; padding:.45rem 0; display:inline-block; }
.navlink:hover{ color:#fff; }
.navlink::after{ content:""; position:absolute; left:0; right:0; bottom:.1rem; height:2px; background:var(--cielo);
  transform:scaleX(0); transform-origin:right; transition:transform .3s cubic-bezier(.16,1,.3,1); border-radius:2px; }
.navlink:hover::after, .navlink.active::after{ transform:scaleX(1); transform-origin:left; }
.navlink.active{ color:#fff; }

/* mobile menu */
[data-menu]{ display:none; }
[data-menu].open{ display:flex; }

/* ---------- BUTTONS (pill, rounded = arquetipo Cuidador) ---------- */
.btn{ align-items:center; gap:.5rem; border-radius:9999px; font-weight:600;
  transition:transform .2s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; position:relative; }
.btn:not(.hidden){ display:inline-flex; } /* no romper utilidades responsivas hidden/sm:inline-flex */
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--profundo); color:#fff; padding:.85rem 1.6rem; box-shadow:0 10px 24px -12px rgba(39,58,88,.6); }
.btn-primary:hover{ background:var(--acero); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(39,58,88,.55); }
.btn-ghost{ background:#fff; color:var(--profundo); padding:.85rem 1.6rem; border:1.5px solid var(--borde); }
.btn-ghost:hover{ border-color:var(--sereno); background:var(--gris); }
.btn-light{ background:#fff; color:var(--profundo); padding:.85rem 1.6rem; }
.btn-light:hover{ background:var(--cielo); }
.btn-on-dark{ background:var(--cielo); color:var(--profundo); padding:.85rem 1.6rem; }
.btn-on-dark:hover{ background:#fff; transform:translateY(-2px); }
.btn-white{ background:#fff; color:var(--profundo); padding:.85rem 1.6rem; box-shadow:0 12px 30px -14px rgba(255,255,255,.5); }
.btn-white:hover{ background:var(--cielo); transform:translateY(-2px); }
.btn-line{ background:transparent; color:#fff; padding:.85rem 1.6rem; border:1.5px solid rgba(255,255,255,.55); }
.btn-line:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); }

/* ---------- BENTO RAZONES (tarjetas con imagen) ---------- */
.razon{ position:relative; overflow:hidden; border-radius:1.5rem; display:flex; align-items:flex-end; min-height:230px; box-shadow:0 18px 44px -28px rgba(39,58,88,.35); }
.razon img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.16,1,.3,1); z-index:0; }
.razon::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(18,30,46,.95) 0%, rgba(18,30,46,.5) 48%, rgba(18,30,46,.08) 100%); }
.razon:hover img{ transform:scale(1.06); }
.razon>.in-r{ position:relative; z-index:2; padding:1.6rem 1.7rem; }
.razon .rn{ font-weight:700; color:var(--cielo); font-size:.9rem; }
.razon h3{ font-weight:700; color:#fff; font-size:1.35rem; line-height:1.2; margin:.35rem 0 .4rem; }
.razon p{ color:rgba(255,255,255,.9); font-size:.92rem; line-height:1.55; }
.razon-feature{ min-height:380px; }
.razon-feature h3{ font-size:2rem; }

/* ---------- GRADIENTS / DECOR ---------- */
.grad-deep{ background:linear-gradient(135deg,#16243A 0%, #243757 55%, #34496B 100%); }

/* ---------- EXPANDING PANELS (Por qué elegirnos) ---------- */
.panels{ display:flex; flex-direction:column; gap:1rem; }
@media(min-width:900px){ .panels{ flex-direction:row; height:480px; }
  .panel{ flex:1; min-height:0; transition:flex .55s cubic-bezier(.16,1,.3,1); }
  .panel:first-child{ flex:2.4; }
  .panels:hover .panel:first-child{ flex:1; }
  .panel:hover{ flex:2.9 !important; } }
.panel{ position:relative; overflow:hidden; border-radius:1.5rem; min-height:230px; box-shadow:0 18px 44px -28px rgba(39,58,88,.4); }
.panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.panel:hover img{ transform:scale(1.06); }
.panel::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(14,23,38,.96) 0%, rgba(14,23,38,.45) 46%, rgba(14,23,38,.05) 100%); }
.panel>.pin{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.6rem 1.7rem; }
.panel .pn{ font-weight:700; color:var(--cielo); font-size:3.4rem; line-height:.95; display:block; margin-bottom:.4rem; }
.panel h3{ font-weight:700; color:#fff; font-size:1.3rem; line-height:1.2; }
.panel p{ color:rgba(255,255,255,.9); font-size:.92rem; line-height:1.5; margin-top:.35rem; max-width:24rem; }

/* ---------- CARRUSEL ---------- */
/* object-contain: muestra la imagen COMPLETA sin recortar; el fondo suave hace de marco */
.slides{ position:relative; width:100%; height:100%; background:linear-gradient(135deg,#eaf0f7,#d8e3f0); }
.slides>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity 1.1s ease; }
.slides>img.active{ opacity:1; }

/* ---------- BOTÓN CELESTE ---------- */
.btn-sky{ background:var(--cielo); color:var(--profundo); padding:.85rem 1.6rem; border:1.5px solid var(--sereno); box-shadow:0 12px 30px -14px rgba(140,172,205,.7); }
.btn-sky:hover{ background:var(--acero); border-color:var(--acero); color:#fff; transform:translateY(-2px); }

/* ---------- BOTÓN WHATSAPP (estética de marca) ---------- */
.btn-wa{ color:#fff; padding:.9rem 1.9rem; background:linear-gradient(135deg,#2bd96f 0%, #17b257 100%);
  box-shadow:0 14px 32px -12px rgba(31,178,87,.55); }
.btn-wa:hover{ background:linear-gradient(135deg,#27cb67 0%, #149c4c 100%); transform:translateY(-2px);
  box-shadow:0 20px 40px -14px rgba(31,178,87,.6); }
.btn-wa:active{ transform:translateY(0); }
.btn-wa span[style]{ transition:transform .25s ease; }
.btn-wa:hover span[style]{ transform:scale(1.08); }
.text-grad{ background:linear-gradient(100deg,var(--profundo),var(--acero)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; z-index:0; }
.blob-cielo{ background:radial-gradient(circle,#B2D1EE,transparent 70%); }
.blob-sereno{ background:radial-gradient(circle,#8CACCD,transparent 70%); }
.hairline{ height:1px; background:linear-gradient(90deg,transparent,var(--borde),transparent); }
.eyebrow{ letter-spacing:.22em; text-transform:uppercase; font-weight:700; font-size:.78rem; color:var(--acero); }
.ring-soft{ box-shadow:0 0 0 1px var(--borde); }

/* ---------- CARDS ---------- */
.card{ background:#fff; border:1px solid var(--borde); border-radius:1.25rem; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px -22px rgba(39,58,88,.35); border-color:var(--cielo); }
.card-dark{ background:linear-gradient(135deg,#16243A 0%, #243757 55%, #34496B 100%); border-color:rgba(178,209,238,.22); box-shadow:0 22px 50px -26px rgba(16,28,46,.7); }
.card-dark:hover{ border-color:var(--cielo); box-shadow:0 28px 60px -26px rgba(16,28,46,.8); }
.card-num{ font-weight:700; color:var(--cielo); font-size:2.6rem; line-height:1; }
.icon-badge{ width:3rem; height:3rem; border-radius:1rem; display:grid; place-items:center;
  background:var(--gris); color:var(--acero); border:1px solid var(--borde); transition:.3s; }
.card:hover .icon-badge, .group:hover .icon-badge{ background:var(--cielo); color:var(--profundo); }

/* ---------- IMAGE ZOOM ---------- */
.zoom{ overflow:hidden; }
.zoom img, .zoom video{ transition:transform .8s cubic-bezier(.16,1,.3,1); }
.zoom:hover img, .zoom:hover video{ transform:scale(1.05); }

/* ---------- FORMULARIO ---------- */
.f-label{ display:block; font-weight:600; font-size:.85rem; color:var(--profundo); margin-bottom:.4rem; }
.f-input, .f-textarea{ width:100%; border:1.5px solid var(--borde); border-radius:.8rem; padding:.8rem .95rem;
  font:inherit; color:var(--tinta); background:#fff; transition:border-color .2s, box-shadow .2s; }
.f-input::placeholder, .f-textarea::placeholder{ color:#9aa7b6; }
.f-input:focus, .f-textarea:focus{ outline:none; border-color:var(--acero); box-shadow:0 0 0 3px rgba(66,94,128,.14); }
.f-input:user-invalid, .f-textarea:user-invalid{ border-color:#c8553d; }
.f-textarea{ min-height:140px; resize:vertical; line-height:1.6; }
.f-select{ width:100%; border:1.5px solid var(--borde); border-radius:.8rem; padding:.8rem 2.6rem .8rem .95rem;
  font:inherit; color:var(--tinta); background-color:#fff; cursor:pointer; transition:border-color .2s, box-shadow .2s;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23425E80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center; background-size:1.15rem; }
.f-select:focus{ outline:none; border-color:var(--acero); box-shadow:0 0 0 3px rgba(66,94,128,.14); }
.f-select:required:invalid{ color:#9aa7b6; }
.f-select option{ color:var(--tinta); }

/* ---------- CHIPS ---------- */
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border-radius:9999px;
  background:var(--gris); border:1px solid var(--borde); font-weight:600; font-size:.85rem; color:var(--profundo); }
.chip .material-symbols-rounded{ font-size:1.05rem; color:var(--acero); }

/* ---------- STEPS ---------- */
.steps{ counter-reset:s; }
.step{ position:relative; padding-left:4rem; padding-bottom:2rem; }
.step:last-child{ padding-bottom:0; }
.step::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:0; width:2.75rem; height:2.75rem;
  border-radius:9999px; display:grid; place-items:center; font-weight:700; color:#fff; background:var(--profundo); }
.step::after{ content:""; position:absolute; left:1.37rem; top:2.75rem; bottom:.25rem; width:2px; background:var(--borde); }
.step:last-child::after{ display:none; }

/* ---------- FAQ ---------- */
.faq{ border:1px solid var(--borde); border-radius:1rem; background:#fff; margin-bottom:.75rem; overflow:hidden; transition:.25s; }
.faq[open]{ box-shadow:0 10px 30px -18px rgba(39,58,88,.4); border-color:var(--cielo); }
.faq>summary{ list-style:none; cursor:pointer; padding:1.1rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-weight:600; color:var(--profundo); font-size:1.02rem; }
.faq>summary::-webkit-details-marker{ display:none; }
.faq>summary::after{ content:"add"; font-family:'Material Symbols Rounded'; color:var(--acero); transition:transform .3s; }
.faq[open]>summary::after{ transform:rotate(135deg); }
.faq .ans{ padding:0 1.3rem 1.2rem; color:var(--tinta-suave); line-height:1.75; }

/* ---------- DOCTOR ---------- */
.doc{ background:#fff; border:1px solid var(--borde); border-radius:1.5rem; overflow:hidden; transition:.35s cubic-bezier(.16,1,.3,1); }
.doc:hover{ transform:translateY(-4px); box-shadow:0 22px 50px -24px rgba(39,58,88,.4); }
.doc img{ transition:transform .8s cubic-bezier(.16,1,.3,1); }
.doc:hover img{ transform:scale(1.05); }

/* ---------- PROSE ---------- */
.prose p{ margin-bottom:1.1rem; line-height:1.85; color:var(--tinta-suave); }
.prose p:first-child{ color:var(--tinta); font-size:1.2rem; line-height:1.7; }
.prose strong{ color:var(--profundo); }

/* ---------- MARQUEE (trust strip) ---------- */
.trust{ display:flex; gap:2.5rem; align-items:center; flex-wrap:wrap; }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal-l{ transform:translateX(-40px); } .reveal-r{ transform:translateX(40px); }
.reveal-l.in,.reveal-r.in{ transform:none; }
.stagger>*{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.stagger.in>*{ opacity:1; transform:none; }
.stagger.in>*:nth-child(2){ transition-delay:.08s; } .stagger.in>*:nth-child(3){ transition-delay:.16s; }
.stagger.in>*:nth-child(4){ transition-delay:.24s; } .stagger.in>*:nth-child(5){ transition-delay:.32s; }
.stagger.in>*:nth-child(6){ transition-delay:.4s; }
.kenburns{ animation:kb 20s ease-out forwards; }
@keyframes kb{ from{ transform:scale(1);} to{ transform:scale(1.1);} }

/* ---------- ACCESIBILIDAD: controles visibles en la barra ---------- */
.a11y-controls{ align-items:center; gap:.9rem; }
.a11y-controls.flex, .a11y-controls.hidden{ } /* respeta utilidades hidden/lg:flex */
.a11y-size{ display:inline-flex; align-items:center; gap:.3rem; }
.a11y-cap{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.7); }
.a11y-step{ width:1.95rem; height:1.95rem; border-radius:.55rem; border:1.6px solid rgba(255,255,255,.4);
  color:#fff; font-weight:800; font-size:.9rem; display:grid; place-items:center; cursor:pointer; transition:.18s; line-height:1; }
.a11y-step:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.a11y-step:disabled{ opacity:.35; cursor:not-allowed; }
.a11y-switch{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; }
.a11y-track{ position:relative; width:2.7rem; height:1.5rem; border-radius:999px; background:rgba(255,255,255,.22);
  border:1.5px solid rgba(255,255,255,.5); transition:.25s; flex:none; }
.a11y-thumb{ position:absolute; top:50%; left:.16rem; transform:translateY(-50%); width:1.04rem; height:1.04rem;
  border-radius:50%; background:#fff; transition:.25s; }
.a11y-switch[aria-checked="true"] .a11y-track{ background:var(--cielo); border-color:var(--cielo); }
.a11y-switch[aria-checked="true"] .a11y-thumb{ left:calc(100% - 1.2rem); background:var(--profundo); }
/* variante para fondo claro (menú móvil) */
.a11y-onlight .a11y-cap{ color:var(--tinta-suave); }
.a11y-onlight .a11y-step{ color:var(--profundo); border-color:var(--borde); }
.a11y-onlight .a11y-step:hover{ background:var(--gris); border-color:var(--sereno); }
.a11y-onlight .a11y-track{ background:var(--borde); border-color:var(--sereno); }
.a11y-onlight .a11y-thumb{ background:var(--profundo); }
.a11y-onlight .a11y-switch[aria-checked="true"] .a11y-track{ background:var(--acero); border-color:var(--acero); }
.a11y-onlight .a11y-switch[aria-checked="true"] .a11y-thumb{ background:#fff; }

/* tamaños de letra: escala la raíz -> escalan todos los rem */
html.fs-2{ font-size:112.5%; }
html.fs-3{ font-size:125%; }

/* ====== ALTO CONTRASTE: tema oscuro de alta legibilidad (baja visión) ====== */
html.alto-contraste{ background:#000; }
html.alto-contraste body{ background:#000 !important; color:#fff !important; }
/* superficies */
html.alto-contraste .bg-white{ background:#000 !important; }
html.alto-contraste .bg-gris{ background:#0c1119 !important; }
html.alto-contraste .site-header{ background:#000 !important; border-bottom:2px solid #fff; }
html.alto-contraste .grad-deep, html.alto-contraste footer.grad-deep{ background:#000 !important; border-top:2px solid #fff; }
html.alto-contraste .card-dark, html.alto-contraste .grad-deep{ background:#000 !important; }
/* texto: todo a blanco puro */
html.alto-contraste .text-profundo, html.alto-contraste .text-tinta, html.alto-contraste .text-tinta-suave,
html.alto-contraste .text-acero, html.alto-contraste .text-white\/95, html.alto-contraste .text-white\/90,
html.alto-contraste .text-white\/85, html.alto-contraste .text-white\/80, html.alto-contraste .text-white\/75,
html.alto-contraste .text-white\/70, html.alto-contraste .text-white\/60, html.alto-contraste .text-white\/55,
html.alto-contraste .prose p, html.alto-contraste .prose p:first-child, html.alto-contraste .faq .ans{ color:#fff !important; }
/* acentos en amarillo de alto contraste */
html.alto-contraste .eyebrow, html.alto-contraste .text-cielo, html.alto-contraste .card-num, html.alto-contraste .panel .pn{ color:#ffe23d !important; }
html.alto-contraste .text-grad{ -webkit-text-fill-color:#ffe23d; color:#ffe23d !important; background:none !important; }
/* tarjetas y superficies con borde marcado */
html.alto-contraste .card, html.alto-contraste .faq, html.alto-contraste .chip, html.alto-contraste .doc,
html.alto-contraste .icon-badge{ background:#0c1119 !important; border:2px solid #fff !important; color:#fff !important; }
html.alto-contraste .card-dark{ background:#0c1119 !important; }
html.alto-contraste .icon-badge{ color:#ffe23d !important; }
html.alto-contraste .faq>summary{ color:#fff !important; }
html.alto-contraste .hairline, html.alto-contraste .border-gris-borde,
html.alto-contraste [class*="border-white"]{ border-color:#fff !important; }
/* botones */
html.alto-contraste .btn-primary, html.alto-contraste .btn-white, html.alto-contraste .btn-on-dark,
html.alto-contraste .btn-sky, html.alto-contraste .btn-light{ background:#ffe23d !important; color:#000 !important; border:2px solid #ffe23d !important; box-shadow:none !important; }
html.alto-contraste .btn-ghost, html.alto-contraste .btn-line{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }
/* enlaces de contenido subrayados y en amarillo */
html.alto-contraste main a:not(.btn):not(.card):not(.doc):not(.chip):not([class*="icon"]),
html.alto-contraste footer a:not(.btn){ color:#ffe23d !important; text-decoration:underline !important; }
html.alto-contraste .navlink{ color:#fff !important; }
html.alto-contraste .navlink.active, html.alto-contraste .navlink:hover{ color:#ffe23d !important; }
/* foco visible reforzado */
html.alto-contraste :focus-visible{ outline:3px solid #ffe23d !important; outline-offset:2px; }
/* atenuar fondos de video/imagen del hero para máxima legibilidad del texto */
html.alto-contraste .hero-video{ filter:brightness(.28) grayscale(.3); }
html.alto-contraste .hero-scrim{ background:rgba(0,0,0,.78) !important; }
/* en alto contraste, controles del header con borde amarillo */
html.alto-contraste .a11y-step{ border-color:#ffe23d; color:#ffe23d; }
html.alto-contraste .a11y-cap{ color:#fff; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .reveal,.stagger>*{ opacity:1!important; transform:none!important; }
  .kenburns{ animation:none; }
}