/* ==================================================================
   DR. SERGIO ARANGO CUARTAS — Sistema de diseño
   ------------------------------------------------------------------
   Para cambiar la identidad visual del sitio completo, edite las
   variables en :root. Nada más necesita tocarse.
   ================================================================== */

:root {
  /* Colores de marca */
  --ink:        #0C1C2C;   /* azul profundo — textos y fondos oscuros */
  --ink-700:    #16314B;
  --ink-500:    #2C4A68;
  --gold:       #C6A15B;   /* dorado — acentos y detalles */
  --gold-dark:  #A98341;
  --gold-light: #DCC08C;
  --ivory:      #FAF7F3;   /* fondo claro cálido */
  --blush:      #EADFD6;   /* fondo alterno suave */
  --muted:      #6E7377;   /* texto secundario */
  --line:       #E3DCD3;   /* bordes */
  --white:      #FFFFFF;

  /* Tipografía */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Jost', system-ui, -apple-system, sans-serif;

  /* Ritmo y formas — aquí se controla qué tan "redondo" es el sitio */
  --radius:      16px;    /* campos de formulario, elementos pequeños */
  --radius-pill: 999px;   /* botones tipo píldora */
  --radius-lg:   30px;    /* tarjetas */
  --radius-xl:   64px;    /* bloques grandes y curvas entre secciones */
  --arch:        220px 220px 28px 28px;  /* arco: la forma firma de la marca */
  --arch-sm:     150px 150px 24px 24px;

  --shadow:     0 2px 10px rgba(12,28,44,.04), 0 12px 40px rgba(12,28,44,.06);
  --shadow-lg:  0 30px 80px rgba(12,28,44,.14);
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------- base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
p  { margin: 0 0 1.1em; }

::selection { background: var(--gold); color: #fff; }

/* Franja superior dorada que recorre todo el sitio */
.top-rule { height: 3px; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark)); }

/* ------------------------------------------------ layout --- */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: 820px; }
/* overflow:hidden contiene los halos decorativos (.glow), que por diseño
   se salen del bloque y si no provocan scroll horizontal */
.section { padding-block: clamp(70px, 9vw, 130px); position: relative; overflow: hidden; }
.section--ink   { background: var(--ink); color: var(--ivory); }
.section--blush { background: radial-gradient(120% 80% at 15% 0%, #F3E7DE 0%, var(--blush) 55%, #E2D3C7 100%); }
.section--white { background: var(--white); }

/* Curva que hace "montar" una sección sobre la anterior — evita los
   cortes rectos entre bloques de color y da continuidad al scroll */
.section--curve {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: calc(var(--radius-xl) * -1);
  position: relative; z-index: 2;
}
.section--curve-b { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* Halos suaves de color — dan profundidad sin cargar el diseño */
/* Sin filter: blur() — el degradado radial ya es suave y el filtro
   obligaba a la GPU a recalcular el halo en cada repintado. */
.glow {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.glow--gold  { background: radial-gradient(circle, rgba(198,161,91,.16), transparent 70%); }
.glow--blush { background: radial-gradient(circle, rgba(234,223,214,.7), transparent 70%); }
.section > .wrap { position: relative; z-index: 1; }

/* Marco en arco — la forma característica de la marca */
.arch    { border-radius: var(--arch); overflow: hidden; }
.arch-sm { border-radius: var(--arch-sm); overflow: hidden; }

/* --------------------------------------------- tipografía --- */
.eyebrow {
  font-size: .72rem; font-weight: 400; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-dark);
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 34px; height: 1px; background: currentColor; flex: none; }
.eyebrow--center { justify-content: center; }
.section--ink .eyebrow { color: var(--gold); }

.lead { font-size: 1.1rem; color: var(--muted); max-width: 62ch; }
.section--ink .lead { color: #B9C4CE; }

/* Realce en itálica dentro de titulares */
.accent { font-style: italic; color: var(--gold-dark); }
.section--ink .accent { color: var(--gold); }

/* ---------------------------------------------- botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 38px; border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: .76rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; transition: all .35s var(--ease); white-space: nowrap;
}
.btn--primary { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--ivory); }
.btn--ghost { background: transparent; color: var(--ivory); border-color: rgba(250,247,243,.4); }
.btn--ghost:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn--sm { padding: 11px 22px; font-size: .7rem; }

/* Enlace con subrayado animado */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-dark); border-bottom: 1px solid currentColor;
  padding-bottom: 4px; transition: gap .3s var(--ease);
}
.link-arrow:hover { gap: 16px; }

/* ------------------------------------------------- header --- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250,247,243,.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 2px 20px rgba(12,28,44,.07); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; }

.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand__mark { width: 42px; height: 42px; color: var(--gold-dark); flex: none; }
.brand__name {
  font-family: var(--font-display); font-size: 1.28rem; line-height: 1.05;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
.brand__role {
  display: block; font-family: var(--font-sans); font-size: .56rem;
  letter-spacing: .3em; color: var(--gold-dark); margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  position: relative; font-size: .8rem; letter-spacing: .08em;
  color: var(--ink); padding-block: 6px; transition: color .25s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--gold-dark); transition: width .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--gold-dark); }

.header-actions { display: flex; align-items: center; gap: 14px; flex: none; }

/* Menú desplegable de procedimientos */
.has-sub { position: relative; }
.subnav {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-8px);
  min-width: 250px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 10px;
  opacity: 0; visibility: hidden; transition: all .28s var(--ease);
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.subnav a { display: block; padding: 10px 16px; border-radius: var(--radius); font-size: .82rem; }
.subnav a::after { display: none; }
.subnav a:hover { background: var(--ivory); color: var(--gold-dark); }

/* Selector de idioma */
.lang { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--white); }
.lang button {
  border: 0; background: transparent; cursor: pointer; padding: 7px 13px;
  font-size: .68rem; letter-spacing: .12em; color: var(--muted); transition: all .25s;
}
.lang button.is-active { background: var(--ink); color: var(--ivory); }

/* Botón hamburguesa */
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: pointer; padding: 0; place-items: center; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); margin: 4px auto; transition: .3s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* -------------------------------------------------- hero --- */
.hero {
  position: relative; color: var(--ivory); overflow: hidden;
  background: radial-gradient(130% 100% at 78% 8%, var(--ink-700) 0%, var(--ink) 52%, #08131F 100%);
}
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center; min-height: 680px; }
.hero__content { padding-block: 100px 110px; position: relative; z-index: 2; }
.hero h1 { color: var(--ivory); }

/* La foto va dentro de un arco, ligeramente desplazada y con un anillo detrás */
.hero__media { position: relative; align-self: end; padding-bottom: 54px; }
.hero__media::before {
  content: ''; position: absolute; z-index: 0;
  inset: 4% -9% 12% 14%;
  border: 1px solid rgba(198,161,91,.34);
  border-radius: var(--arch);
  transform: rotate(-3deg);
}
.hero__frame {
  position: relative; z-index: 1; border-radius: var(--arch); overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.42);
  background: linear-gradient(180deg, var(--ink-500), var(--ink));
}
.hero__frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 12%; display: block; }
/* Degradado para fundir la base de la foto con el fondo */
.hero__frame::after {
  content: ''; position: absolute; inset: auto 0 0; height: 32%;
  background: linear-gradient(to top, rgba(8,19,31,.92), transparent);
}

/* Dato flotante sobre la foto — rompe la retícula */
.hero__float {
  position: absolute; z-index: 2; right: -14px; bottom: 6px;
  background: rgba(250,247,243,.97); color: var(--ink);
  border-radius: var(--radius-lg); padding: 18px 26px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 16px; backdrop-filter: blur(8px);
}
.hero__float b { font-family: var(--font-display); font-size: 2rem; color: var(--gold-dark); line-height: 1; font-weight: 400; }
.hero__float span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }

.hero__glow {
  position: absolute; width: 700px; height: 700px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(198,161,91,.22), transparent 66%);
  top: -180px; right: -180px;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px;
  border: 1px solid rgba(198,161,91,.42); border-radius: var(--radius-pill);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light);
  margin-bottom: 28px; background: rgba(198,161,91,.08);
}

/* Barra de estadísticas */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.4rem, 4.6vw, 3.4rem); color: var(--gold); line-height: 1; }
.stat__label { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.section--ink .stat__label { color: #9FAEBB; }

/* ------------------------------------------------- cards --- */
.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); border: 0; border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.card__body { padding: 32px 30px 34px; flex: 1; display: flex; flex-direction: column; }
.card__icon { width: 46px; height: 46px; color: var(--gold-dark); margin-bottom: 20px; }
.card__title { font-family: var(--font-display); font-size: 1.55rem; margin-bottom: 12px; }
.card__text { color: var(--muted); font-size: .94rem; flex: 1; margin-bottom: 22px; }

/* La imagen de la tarjeta va en arco, no en rectángulo */
.card__media {
  aspect-ratio: 1/1.08; overflow: hidden; background: var(--blush);
  border-radius: var(--arch-sm); margin: 12px 12px 0;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }

/* Retícula escalonada: rompe la simetría perfecta de 3 columnas */
.grid--stagger { padding-bottom: 38px; }
.grid--stagger > *:nth-child(3n+2) { transform: translateY(38px); }
.grid--stagger > *:nth-child(3n+2):hover { transform: translateY(28px); }
@media (max-width: 860px) {
  .grid--stagger { padding-bottom: 0; }
  .grid--stagger > *:nth-child(3n+2) { transform: none; }
  .grid--stagger > *:nth-child(3n+2):hover { transform: translateY(-10px); }
}

/* Lista numerada sin cajas — más ligera que una rejilla de tarjetas */
.feature-list { list-style: none; counter-reset: f; padding: 0; margin: 0; display: grid; gap: 4px; }
.feature-list li {
  counter-increment: f; position: relative; padding: 26px 0 26px 66px;
  border-bottom: 1px solid rgba(12,28,44,.1);
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list li::before {
  content: counter(f, decimal-leading-zero);
  position: absolute; left: 0; top: 26px;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-dark);
  width: 46px; height: 46px; display: grid; place-content: center;
  border: 1px solid rgba(169,131,65,.4); border-radius: 50%;
  transition: all .4s var(--ease);
}
.feature-list li:hover::before { background: var(--gold); color: #fff; border-color: var(--gold); }
.feature-list h3 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 7px; }
.feature-list p { color: var(--muted); font-size: .95rem; margin: 0; }

/* --------------------------------------- galería resultados --- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px; }
.filter {
  padding: 10px 22px; border: 1px solid var(--line); background: var(--white);
  border-radius: 999px; cursor: pointer; font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); transition: all .3s var(--ease);
}
.filter:hover { border-color: var(--gold); color: var(--ink); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--ivory); }

.case {
  position: relative; border-radius: 28px; overflow: hidden;
  background: var(--white); border: 0; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  /* El navegador se salta por completo el pintado de los casos que
     están fuera de pantalla. Con 25 imágenes difuminadas, esto es la
     diferencia entre un scroll fluido y uno a tirones. */
  content-visibility: auto;
  contain-intrinsic-size: 340px 400px;
}
.case:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* Se alternan los arcos para que la galería no se lea como una cuadrícula */
.case:nth-child(4n+1), .case:nth-child(4n+4) { border-radius: 130px 130px 28px 28px; }
.case img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: filter .45s var(--ease), transform .7s var(--ease); }
/* El difuminado se hace sobre una copia reducida de la imagen (scale)
   en lugar de sobre la textura a tamaño completo: mismo efecto visual,
   una fracción del costo de GPU. */
.case.is-blurred img { filter: blur(14px); transform: scale(1.06); will-change: filter; }
.case:not(.is-blurred) img { will-change: auto; }
.case:hover img { transform: scale(1.03); }
.case__veil {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 8px;
  text-align: center; padding: 22px; background: rgba(12,28,44,.55);
  color: var(--ivory); transition: opacity .35s var(--ease);
}
.case:not(.is-blurred) .case__veil { opacity: 0; pointer-events: none; }
.case__veil svg { width: 26px; height: 26px; margin-inline: auto; }
.case__veil span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.case__tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  background: rgba(250,247,243,.94); color: var(--ink); padding: 6px 14px;
  border-radius: 999px; font-size: .67rem; letter-spacing: .1em; text-transform: uppercase;
}

/* Aviso de contenido médico */
.notice {
  display: flex; gap: 18px; align-items: flex-start; padding: 24px 30px;
  background: var(--white); border: 0; border-left: 3px solid var(--gold);
  border-radius: 6px 26px 26px 6px; box-shadow: var(--shadow);
  font-size: .88rem; color: var(--muted);
}
.notice svg { width: 22px; height: 22px; color: var(--gold-dark); flex: none; margin-top: 2px; }

/* ------------------------------------------------- lightbox --- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(8,16,26,.95); padding: 30px; place-content: center;
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(1000px, 92vw); max-height: 86vh; object-fit: contain; margin-inline: auto; border-radius: var(--radius); }
.lightbox__close {
  position: absolute; top: 24px; right: 28px; width: 48px; height: 48px;
  border: 1px solid rgba(250,247,243,.3); background: transparent; color: var(--ivory);
  border-radius: 50%; cursor: pointer; font-size: 1.4rem; line-height: 1; transition: all .3s;
}
.lightbox__close:hover { background: var(--ivory); color: var(--ink); }
.lightbox__caption { text-align: center; color: var(--gold-light); margin-top: 18px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }

/* --------------------------------------------- testimonios --- */
.quote {
  position: relative; background: var(--white); border: 0;
  border-radius: 30px 30px 30px 6px;   /* una esquina viva: se lee como un globo de diálogo */
  box-shadow: var(--shadow); padding: 38px 34px 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.quote:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* Comilla decorativa */
.quote::before {
  content: '\201C'; position: absolute; top: 6px; right: 26px;
  font-family: var(--font-display); font-size: 5.5rem; line-height: 1;
  color: var(--gold); opacity: .17; pointer-events: none;
}
.quote__stars { color: var(--gold); letter-spacing: 3px; font-size: .95rem; }
.quote__text { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.55; font-style: italic; color: var(--ink); flex: 1; }
.quote__who { display: flex; align-items: center; gap: 13px; padding-top: 16px; border-top: 1px solid var(--line); }
.quote__avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--gold);
  display: grid; place-content: center; font-size: .9rem; flex: none;
}
.quote__name { font-size: .9rem; }
.quote__src { font-size: .72rem; color: var(--muted); letter-spacing: .06em; }

/* ------------------------------- preguntas frecuentes (FAQ) --- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--ivory); border-radius: var(--radius-lg);
  padding: 4px 28px; transition: box-shadow .35s var(--ease);
}
.faq details[open] { box-shadow: var(--shadow); background: var(--white); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  font-family: var(--font-display); font-size: 1.22rem; line-height: 1.35;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 13px; height: 13px;
  border-right: 1.5px solid var(--gold-dark); border-bottom: 1.5px solid var(--gold-dark);
  transform: rotate(45deg) translateY(-3px); transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq p { margin: 0; padding: 0 0 24px; color: var(--muted); font-size: .96rem; max-width: 70ch; }

/* ------------------------------------------------- video --- */
.video-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16/9; background: var(--ink); box-shadow: var(--shadow-lg);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.video-frame__play {
  position: absolute; inset: 0; display: grid; place-content: center; cursor: pointer;
  background: rgba(12,28,44,.35); transition: background .3s;
}
.video-frame__play:hover { background: rgba(12,28,44,.2); }
.video-frame__play i {
  width: 82px; height: 82px; border-radius: 50%; background: var(--gold); display: grid; place-content: center;
  box-shadow: 0 0 0 0 rgba(198,161,91,.55); animation: pulse 2.6s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 26px rgba(198,161,91,0); } 100% { box-shadow: 0 0 0 0 rgba(198,161,91,0); } }

/* ------------------------------------------ formulario --- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.field input, .field select {
  padding: 15px 22px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--ivory); font-family: inherit; font-size: .95rem; font-weight: 300;
  color: var(--ink); transition: border-color .25s, box-shadow .25s, background .25s;
}
.field textarea {
  padding: 16px 22px; border: 1px solid var(--line); border-radius: 24px;
  background: var(--ivory); font-family: inherit; font-size: .95rem; font-weight: 300;
  color: var(--ink); transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { background: var(--white); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,161,91,.16);
}
.field textarea { resize: vertical; min-height: 130px; }

/* --------------------------------------------- footer --- */
.site-footer { background: var(--ink); color: #A9B6C2; padding-block: 76px 0; }
.site-footer h4 {
  font-family: var(--font-sans); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 20px;
}
.site-footer a:hover { color: var(--gold-light); }
.site-footer .brand__name { color: var(--ivory); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; }
.footer-bottom {
  margin-top: 56px; padding-block: 26px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .8rem;
}
.social { display: flex; gap: 12px; }
.social a {
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  display: grid; place-content: center; transition: all .3s var(--ease);
}
.social a:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-3px); }
.social svg { width: 18px; height: 18px; }

/* --------------------------------------- WhatsApp flotante --- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-content: center; box-shadow: 0 8px 26px rgba(37,211,102,.42);
  transition: transform .3s var(--ease);
}
.wa-float:hover { transform: scale(1.09); }
.wa-float svg { width: 30px; height: 30px; }

/* ------------------------------------- animación al scroll --- */
/* El contenido es visible por defecto. La animación sólo se activa cuando
   el JS confirma que puede manejarla (añade .js-anim al <html>), así que
   si el JS falla la página NUNCA queda en blanco. */
.js-anim .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* -------------------------------------------- responsive --- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 10px; }
  .hero__content { padding-block: 72px 16px; }
  /* El arco necesita alto libre: limitamos el ANCHO, no la altura,
     para que la foto nunca se corte al apilarse en una columna. */
  .hero__media {
    max-height: none; width: 100%; max-width: 400px;
    margin-inline: auto; padding-bottom: 66px; align-self: center;
  }
  .hero__media::before { inset: 3% -7% 11% 10%; }
  .hero__float { right: 0; bottom: 14px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav {
    position: fixed; inset: 84px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory); border-bottom: 1px solid var(--line); padding: 14px 24px 28px;
    max-height: calc(100dvh - 84px); overflow-y: auto;
    transform: translateY(-14px); opacity: 0; visibility: hidden; transition: all .3s var(--ease);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .subnav {
    position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 0 16px; min-width: 0;
  }
  .burger { display: grid; }
  .header-actions .btn { display: none; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}
@media (max-width: 560px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .wrap { padding-inline: 18px; }

  /* En móvil el desenfoque del encabezado se recalcula en cada cuadro
     del scroll y produce tirones: se reemplaza por un fondo sólido. */
  .site-header { backdrop-filter: none; background: var(--ivory); }

  /* El encabezado debe caber en 375px sin desbordarse */
  .header-inner { gap: 10px; height: 74px; }
  .brand { gap: 9px; min-width: 0; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: .92rem; letter-spacing: .03em; }
  .brand__role { font-size: .48rem; letter-spacing: .2em; }
  .header-actions { gap: 8px; }
  .lang button { padding: 6px 9px; font-size: .62rem; }
  .burger { width: 38px; height: 38px; }
  .nav { inset: 74px 0 auto; max-height: calc(100dvh - 74px); }
}

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

/* ---------------------------------------------- impresión --- */
@media print {
  .site-header, .wa-float, .site-footer, .btn { display: none !important; }
}

/* ==================================================================
   UTILIDADES
   ------------------------------------------------------------------
   Mismos nombres que Tailwind. Están aquí para que la maquetación
   nunca se rompa si el CDN de Tailwind no carga. Si usa otras clases
   de Tailwind en el HTML, funcionarán igual mientras haya internet.
   ================================================================== */
.flex           { display: flex; }
.flex-wrap      { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.items-center   { align-items: center; }
.text-center    { text-align: center; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.mt-6   { margin-top: 24px; }
.mt-8   { margin-top: 32px; }
.mt-9   { margin-top: 36px; }