/* ==========================================================================
   Genealogy Services — DRAFT local (3 productos)
   Tokens extraídos del sitio en producción (dnaconsultants.com), no inventados.
   Ver REGISTRO.md para la trazabilidad de cada valor.
   ========================================================================== */

/* ---------------------------- tipografía --------------------------------
   Crimson Text servida desde NUESTRO dominio, no desde Google. Dos motivos
   medidos en PageSpeed el 2026-08-14:

   1. CLS 0,242 — el informe atribuía el 100% del desplazamiento a
      div.gs-hero__media y señalaba las tres .woff2 de fonts.gstatic.com. En
      móvil el texto va encima de la imagen del hero: al entrar Crimson Text en
      lugar de Georgia, el bloque de texto cambiaba de alto y empujaba la
      imagen. El hueco de la imagen SÍ estaba reservado; lo que se movía era lo
      de arriba.
   2. El CSS de fonts.googleapis.com bloqueaba el pintado 750 ms y estiraba la
      cadena crítica a 1.722 ms.

   La pieza clave es "Crimson Fallback": es Georgia con las métricas ajustadas
   para ocupar EXACTAMENTE lo mismo que Crimson Text. Georgia es MÁS ANCHA que
   Crimson, así que hay que ENCOGERLA:

       misma cadena a 100px:  Crimson 5.783 px  ·  Georgia 6.486 px
       size-adjust = 5.783 / 6.486 = 89,16%
       ascent  = 0,9492 / 0,8916 = 106,46%   (hhea de Crimson Text 400)
       descent = 0,3506 / 0,8916 =  39,32%

   Así el texto se pinta al instante en Georgia encogida, y cuando llega Crimson
   la sustitución no mueve un píxel. Sin texto invisible y sin salto.

   ⚠ CÓMO SE MIDEN, si algún día se cambia de tipografía: el ancho, con
     canvas.measureText() de la MISMA cadena en las dos fuentes, en el navegador.
     NO usar OS/2.xAvgCharWidth de fontTools: Georgia y Crimson usan versiones
     distintas de esa tabla y el valor no es comparable — así calculé 121,42%,
     justo el inverso, y el salto pasó de 31 px a 79 px. Comprobado el
     2026-08-14 antes de corregirlo.
     Copiar estos números tal cual con otra fuente reintroduce el CLS.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/crimson-400.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/crimson-600.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/crimson-700.woff2") format("woff2");
}
/* La cursiva la usa un solo sitio: el título del libro en la biografía de
   Donald Yates. Se queda porque es un título de obra, no decoración. */
@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/crimson-400i.woff2") format("woff2");
}

@font-face {
  font-family: "Crimson Fallback";
  src: local("Georgia");
  size-adjust: 89.16%;
  ascent-override: 106.46%;
  descent-override: 39.32%;
  line-gap-override: 0%;
}

:root {
  /* Tipografía real del tema. "Crimson Fallback" va DESPUÉS de la real y ANTES
     de Georgia a secas: es la que se usa durante el medio segundo que tarda en
     llegar la nuestra. */
  --gs-font: "Crimson Text", "Crimson Fallback", Georgia, "Times New Roman", serif;

  /* Colores reales del tema */
  --gs-text: #5f5f5f;        /* body — oscurecido desde el #808080 del tema */
  --gs-heading: #4d4d4d;     /* h1..h3 */
  --gs-blue: #29a9e1;        /* subrayado h1 */
  --gs-green: #62b148;       /* btn "Buy now" */
  --gs-coral: #f27982;       /* btn "Read more" */
  --gs-tan: #c7b299;         /* acento buscador */
  --gs-line: #e5e5e5;
  --gs-soft: #f7f7f7;
  --gs-white: #fff;

  /* Layout real (Bootstrap 3 del tema) */
  --gs-container: 1170px;
  --gs-gutter: 15px;

  /* Accesibilidad 40+/65+ : escala tipográfica elevada respecto al tema */
  --gs-body-size: 18px;
  --gs-body-lh: 1.65;
  --gs-touch: 48px;
}

/* ------------------------------ base ------------------------------------ */

* { box-sizing: border-box; }

/* Salto suave al pulsar una tarjeta: con un público mayor, un corte seco a
   media página desorienta; el desplazamiento visible dice "sigues en la misma
   página, has bajado". El offset evita que el titular quede pegado al borde. */
html { scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  margin: 0;
  font-family: var(--gs-font);
  font-size: var(--gs-body-size);
  line-height: var(--gs-body-lh);
  color: var(--gs-text);
  background: var(--gs-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gs-blue); }

.gs-container {
  width: 100%;
  max-width: var(--gs-container);
  margin: 0 auto;
  padding: 0 var(--gs-gutter);
}

/* Marca de bloques NO intervenidos (header / breadcrumb / footer) */
.gs-untouched { position: relative; }

/* ---------------------- header + breadcrumb (estáticos) ------------------ */

.gs-header {
  border-bottom: 1px solid var(--gs-line);
  padding: 18px 0;
}
.gs-header .gs-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.gs-header img { width: 200px; height: 60px; }
/* El logo es un enlace: necesita foco propio, .gs-btn:focus-visible no lo cubre */
.gs-header__logo { display: inline-flex; }
.gs-header__logo:focus-visible { outline: 3px solid var(--gs-blue); outline-offset: 3px; }
/* En móvil el logo a 200px obliga a partir el cabezal en dos filas (necesita
   372px y a 375 solo hay 345). Reducido para que logo y CTA quepan en una. */
@media (max-width: 480px) {
  .gs-header img { width: 160px; height: 48px; }
}
.gs-nav {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.gs-nav a { color: var(--gs-heading); text-decoration: none; }

.gs-breadcrumb {
  padding: 18px 0;
  font-size: 15px;
}
.gs-breadcrumb a { color: var(--gs-blue); text-decoration: none; }

/* ------------------------------ títulos --------------------------------- */

.gs-h1 {
  font-family: var(--gs-font);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--gs-heading);
  text-transform: uppercase;
  text-align: center;
  margin: 26px auto 34px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--gs-blue);
  width: fit-content;
}

/* ------------------------------- hero ------------------------------------
   Franja gris con el texto a la izquierda y la imagen a la derecha. La imagen
   es el elemento LCP a propósito (ver el comentario del HERO en index.html).

   Móvil primero: una columna, texto arriba e imagen debajo. Con el header
   (~76px) el texto ocupa ~300px, así que la imagen queda ENTERA dentro del
   primer pantallazo de un 412x823 — que es la condición para que Chrome la
   acepte como candidato a LCP.

   Paleta elegida por Alejandro el 2026-08-14, en tono sepia para acompañar a la
   foto de archivo:
       fondo    #fffbf3   ·   tipografía #9e643d   ·   línea #d0bc89

   ⚠ CONTRASTE MEDIDO: #9e643d sobre #fffbf3 da 4,68:1. El mínimo de la norma
     (WCAG AA) para texto normal es 4,5:1, así que pasa — pero por 0,18. NO
     OSCURECER EL FONDO ni aclarar el texto sin volver a medir: el margen es
     tan corto que cualquier retoque lo tira por debajo. El titular no corre
     riesgo, al ser texto grande solo necesita 3:1.
     (El fondo era #fff8ee y daba 4,58:1; este es más claro, así que va algo
     mejor. Las negritas #7a4a2c suben a 7,16:1, nivel AAA.)
   ------------------------------------------------------------------------- */

.gs-hero {
  background: #fffbf3;
  border-bottom: 1px solid var(--gs-line);
  padding: 34px 0 38px;
}

.gs-hero__inner { display: flex; flex-direction: column; gap: 26px; }

.gs-hero__title {
  font-family: var(--gs-font);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  color: #9e643d;
  text-transform: uppercase;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 3px solid #d0bc89;
  width: fit-content;
}

.gs-hero__sub {
  margin: 0 0 22px;
  font-size: 20px;
  line-height: 1.55;
  color: #9e643d;
  max-width: 34em;
}

/* Los tres reclamos en negrita y en un marrón MÁS OSCURO del mismo tono: 7:1 de
   contraste, nivel AAA. Destacan de verdad sobre el resto del subtítulo y de
   paso el dato importante queda en el texto más legible de la franja, que con
   un público de 40 y 65 años para arriba no es un detalle menor. */
.gs-hero__sub strong { font-weight: 600; color: #7a4a2c; }

/* El CTA del hero lleva el marrón del titular en el texto y en el borde. Va
   aparte y NO tocando .gs-btn--ghost, porque esa clase la usa también el botón
   de la cabecera, que está sobre fondo blanco y debe seguir siendo neutro.
   Medido: texto sobre el blanco del botón 4,83:1 (pide 4,5) y borde contra el
   crema del hero 4,68:1 (un control pide 3,0). Pasa por poco, como el resto de
   la franja — no aclarar el marrón sin volver a medir.

   ⚠ El selector encadena .gs-btn a propósito. Con .gs-hero__cta a secas pesa
     lo mismo que .gs-btn--ghost, que va MÁS ABAJO en este fichero y por tanto
     ganaba: el botón se quedaba gris. Comprobado en pantalla el 2026-08-14. */
.gs-btn.gs-hero__cta {
  display: inline-flex;
  color: #9e643d;
  border-color: #9e643d;
}

/* width/height van en el <img> para reservar el hueco y no provocar salto de
   maquetación (el CLS está en 0,01 y ahí se queda). */
.gs-hero__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 600px;
  border-radius: 2px;
}

@media (min-width: 860px) {
  .gs-hero { padding: 52px 0 56px; }
  .gs-hero__inner {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }
  .gs-hero__copy  { flex: 1 1 50%; }
  .gs-hero__media { flex: 1 1 50%; }
  .gs-hero__title { font-size: 44px; }
  .gs-hero__img   { margin-left: auto; }
}

.gs-section-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 14px;
  color: #767676;
  margin: 0 0 8px;
}

.gs-h2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gs-heading);
  text-align: center;
  margin: 0 0 18px;
}

/* ------------------------------ botones --------------------------------- */

.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gs-touch);
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--gs-font);
  font-size: 16px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease;
}
.gs-btn:hover { opacity: .88; }
.gs-btn:focus-visible { outline: 3px solid var(--gs-blue); outline-offset: 2px; }

.gs-btn--buy    { background: var(--gs-green); border-color: var(--gs-green); color: #fff; }
.gs-btn--read   { background: var(--gs-coral); border-color: var(--gs-coral); color: #fff; }
.gs-btn--ghost  { background: #fff; border-color: var(--gs-line); color: var(--gs-heading); }

/* --------------------------- rejilla de 3 ------------------------------- */

.gs-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 0 0 46px;
}

.gs-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gs-line);
  background: #fff;
  /* Abajo el mismo aire que a los lados: 20px */
  padding: 24px 20px 20px;
  text-align: center;
}
/* El último bloque no arrastra margen: así el hueco inferior es exactamente
   el padding de la tarjeta y coincide con el margen lateral. */
.gs-card > :last-child { margin-bottom: 0; }
/* Restos vacíos (precio/botones retirados) no deben ocupar ni generar margen */
.gs-card > p:empty { display: none; }
.gs-card__tier {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 14px;
  color: #767676;
  margin: 0 0 14px;
}
.gs-card__imglink { display: block; }
.gs-card__imglink:focus-visible { outline: 3px solid var(--gs-blue); outline-offset: 2px; }
.gs-card__img { margin: 0 auto 18px; width: 100%; max-width: 325px; }

.gs-card__title {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.gs-card__title a {
  color: var(--gs-heading);
  text-decoration: none;
}
.gs-card__title a:hover { color: var(--gs-blue); }
.gs-card__title a:focus-visible { outline: 3px solid var(--gs-blue); outline-offset: 3px; }

/* La tarjeta entera responde al puntero, aunque el enlace sea banner + título */
.gs-card { transition: border-color .15s ease; }
.gs-card:hover { border-color: #c9c9c9; }
.gs-card:hover .gs-card__title a { color: var(--gs-blue); }
/* Solo el cuerpo de texto va alineado a la izquierda; epígrafe, título,
   imagen y botones siguen centrados. */
.gs-card__desc {
  font-size: 17px;
  text-align: left;
  margin: 0 0 16px;
  flex: 1 1 auto;
}
.gs-card__price {
  font-size: 26px;
  color: var(--gs-heading);
  margin: 0 0 4px;
}
.gs-card__note {
  font-size: 15px;
  color: var(--gs-green);
  margin: 0 0 16px;
  min-height: 22px;
}
.gs-card__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.gs-badge-stock {
  display: inline-block;
  align-self: center;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #b06a00;
  background: #fff5e5;
  border: 1px solid #f0dcbb;
  border-radius: 3px;
  padding: 2px 8px;
  margin: 0 0 10px;
}

/* ------------------------------ intro ----------------------------------- */

.gs-intro {
  max-width: 860px;
  margin: 0 auto 54px;
  text-align: center;
  font-size: 18px;
}
.gs-intro p { margin: 0 0 14px; }

.gs-lead {
  background: var(--gs-soft);
  padding: 46px 0;
  margin: 0 0 54px;
}
.gs-lead__title {
  max-width: 900px;
  margin: 0 auto 16px;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gs-heading);
}
.gs-lead__sub {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  font-size: 19px;
}

/* --------------------------- tira de anclas ----------------------------- */

.gs-anchors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 0 0 60px;
  text-align: center;
}
.gs-anchors a { text-decoration: none; color: var(--gs-heading); }
.gs-anchors img { border: 1px solid var(--gs-line); }
.gs-anchors span {
  display: block;
  margin-top: 10px;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .06em;
}

/* ----------------------------- detalle ---------------------------------- */

.gs-detail {
  display: grid;
  grid-template-columns: 92px 300px 1fr;
  gap: 34px;
  align-items: start;
  padding: 40px 0;
  border-top: 1px solid var(--gs-line);
}
.gs-detail:first-of-type { border-top: 0; }

.gs-detail__rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: center;
  font-size: 34px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #cfcfcf;
  user-select: none;
}

.gs-detail__media img { border: 1px solid var(--gs-line); margin-bottom: 18px; }
.gs-detail__price {
  font-size: 30px;
  color: var(--gs-heading);
  margin: 0 0 4px;
}
.gs-detail__payg {
  font-size: 16px;
  color: var(--gs-green);
  margin: 0 0 14px;
}

.gs-detail__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--gs-heading);
  margin: 0 0 12px;
}
.gs-detail__body p { margin: 0 0 14px; }

/* Datos clave: viven en la columna izquierda, apilados, para que no quede
   vacía mientras el texto de la derecha se alarga con los acordeones. */
.gs-facts {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--gs-line);
}
.gs-facts li {
  padding: 14px 0;
  border-bottom: 1px solid var(--gs-line);
}
.gs-facts b {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: var(--gs-heading);
  line-height: 1.15;
}
.gs-facts span {
  display: block;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #767676;
  margin-top: 2px;
}

/* acordeón */
.gs-acc { border: 1px solid var(--gs-line); margin-top: 18px; }
.gs-acc > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  min-height: var(--gs-touch);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  color: var(--gs-heading);
  background: var(--gs-soft);
}
.gs-acc > summary::-webkit-details-marker { display: none; }
/* El texto del summary va en <h3> para que entre en el esquema de
   encabezados (h1 página → h2 servicio → h3 apartado). Visualmente no cambia. */
.gs-acc > summary h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: 1.35;
}
.gs-acc > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: 0 0 26px;
  border: 1px solid var(--gs-line);
  background: #fff;
  font-size: 18px;
  line-height: 1;
}
.gs-acc[open] > summary::before { content: "–"; }
.gs-acc__body { padding: 16px 18px 20px; }
.gs-acc__body > :first-child { margin-top: 0; }
.gs-acc__body > :last-child { margin-bottom: 0; }
.gs-acc__body p { margin: 0 0 14px; }
.gs-acc__body ul { margin: 0 0 14px; padding-left: 20px; }
.gs-acc__body li { margin-bottom: 10px; }
/* Listas largas (las 16 fuentes) a dos columnas para no hacer una tira infinita */
.gs-acc__cols { columns: 2; column-gap: 34px; }
.gs-acc__cols li { break-inside: avoid; }

/* Frase de arranque hacia el formulario */
.gs-cta-line {
  margin: 20px 0 0;
  font-size: 18px;
}
.gs-cta-line a { color: var(--gs-blue); }

/* Párrafo de matiz al cierre de un servicio */
.gs-note {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: var(--gs-soft);
  border-left: 3px solid var(--gs-blue);
}

/* Nota común de política, bajo los tres servicios */
.gs-policy {
  max-width: 860px;
  margin: 10px auto 0;
  padding: 18px 0 46px;
  text-align: center;
  font-size: 16px;
}
.gs-policy a { display: inline-block; margin-top: 6px; }

/* --------------------------- comparativa -------------------------------- */

.gs-compare { padding: 56px 0; border-top: 1px solid var(--gs-line); }
.gs-compare__scroll { overflow-x: auto; }
.gs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 19px;
  min-width: 760px;
}
.gs-table th, .gs-table td {
  border-bottom: 1px solid var(--gs-line);
  padding: 18px 14px;
  text-align: center;
  vertical-align: middle;
}
.gs-table thead th {
  font-weight: 600;
  color: var(--gs-heading);
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--gs-line);
}
.gs-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--gs-heading);
  min-width: 250px;
}
/* Fila de cierre: el precio va encima del botón, como en móvil. Se quitó la
   fila "Price" del cuerpo de la tabla; el precio vive aquí, pegado al Buy now. */
.gs-table tr:last-child td::before {
  content: attr(data-price);
  display: block;
  font-size: 24px;
  color: var(--gs-heading);
  margin-bottom: 12px;
}

.gs-table .yes { color: var(--gs-green); font-size: 24px; }
.gs-table .no  { color: #b8b8b8; font-size: 24px; }

/* Subtítulo dentro de la etiqueta de una fila */
.gs-table tbody th small {
  display: block;
  font-size: 15px;
  color: #767676;
  margin-top: 3px;
}

/* Fila de oferta: se destaca sin gritar */
.gs-table tr.is-offer td,
.gs-table tr.is-offer th { background: #f4faf1; }
.gs-table tr.is-offer th { font-weight: 600; }

/* ------------------------------ reseñas --------------------------------- */

.gs-reviews {
  padding: 56px 0;
  border-top: 1px solid var(--gs-line);
}

/* --- carrusel: 2 por vista en escritorio, 1 en móvil, sin autoplay --------- */

.gs-carousel { margin-top: 34px; }

.gs-carousel__viewport {
  overflow-x: auto;

  /* ⚠ NO REACTIVAR scroll-snap-type SIN LEER ESTO.
     Era `x mandatory` y es la causa —comprobada por bisección el 2026-08-14— de
     que PageSpeed no pudiera calcular Performance ("Error! NO_LCP"). Con el snap
     activo el navegador reajusta el scroll cada vez que el contenido se asienta;
     cada reajuste notifica al PaintTimingDetector de Chrome, que deja de
     registrar candidatos a LCP. La traza mostraba CERO eventos
     largestContentfulPaint::Candidate y diez invalidaciones.
     Con la misma página y solo este valor cambiado: `mandatory` -> sin número,
     `none` -> Performance 52 con LCP 3,7 s. `proximity` NO vale: sigue
     reajustando.
     Lo que se pierde: el enganche magnético al arrastrar con el dedo. Los
     botones y los puntos siguen cayendo exactos, porque goTo() usa scrollTo(). */
  scroll-snap-type: none;

  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px;            /* deja ver el contorno de foco */
  margin: -2px;
}
.gs-carousel__viewport::-webkit-scrollbar { display: none; }
.gs-carousel__viewport:focus-visible { outline: 3px solid var(--gs-blue); outline-offset: 2px; }

.gs-carousel__track {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gs-slide {
  flex: 0 0 calc(50% - 13px);
  scroll-snap-align: start;
  display: flex;
}
/* Todas las tarjetas al mismo alto: lo calcula el JS sobre la más alta */
.gs-slide > .gs-review {
  width: 100%;
  height: var(--gs-review-h, auto);
}

.gs-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}

.gs-carousel__btn {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border: 2px solid #d9d9d9;
  border-radius: 50%;
  background: #fff;
  color: var(--gs-heading);
  font-family: var(--gs-font);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gs-carousel__btn:hover:not(:disabled) { border-color: var(--gs-green); color: var(--gs-green); }
.gs-carousel__btn:focus-visible { outline: 3px solid var(--gs-blue); outline-offset: 2px; }
.gs-carousel__btn:disabled { opacity: .3; cursor: default; }

.gs-carousel__dots { display: flex; gap: 6px; }
.gs-carousel__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gs-carousel__dot::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d9d9d9;
  transition: background .15s ease;
}
.gs-carousel__dot[aria-selected="true"]::before { background: var(--gs-blue); }
.gs-carousel__dot:focus-visible { outline: 3px solid var(--gs-blue); outline-offset: -4px; }

.gs-carousel__counter {
  text-align: center;
  font-size: 15px;
  color: #767676;
  margin: 12px 0 0;
}

/* Sin JS: sigue siendo una tira desplazable con el dedo o el trackpad */
.gs-carousel:not([data-ready]) .gs-carousel__controls { display: none; }

.gs-review {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gs-line);
  background: #fff;
  padding: 24px 24px 20px;
}

.gs-review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.gs-review__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--gs-heading);
  margin: 0;
}
.gs-review__date {
  font-size: 14px;
  color: #767676;
  white-space: nowrap;
}

/* Estrellas — azul #29a9e1 a 18px, igual que los glyphicon-star del tema */
.gs-review__stars {
  display: block;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--gs-blue);
  margin: 0 0 12px;
}

.gs-review__from {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #767676;
  margin: 0 0 14px;
}
.gs-review__from a { color: var(--gs-blue); text-decoration: none; }
.gs-review__from a:hover { text-decoration: underline; }

/* El cuerpo se recorta a unas pocas líneas y se despliega con un botón.
   Sin recorte, la reseña más larga estiraba TODAS las tarjetas del carrusel
   (889px en móvil), porque la pista es un flex row y todas valen lo que la
   más alta. El botón solo lo pone el JS en las que de verdad se cortan. */
.gs-review__body {
  font-size: 17px;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  overflow: hidden;
}
.gs-review.is-open .gs-review__body {
  display: block;
  overflow: visible;
}

.gs-review__more {
  align-self: flex-start;
  min-height: var(--gs-touch);
  margin: -6px 0 12px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--gs-font);
  font-size: 17px;
  color: var(--gs-blue);
  text-decoration: underline;
  cursor: pointer;
}
.gs-review__more:focus-visible { outline: 3px solid var(--gs-blue); outline-offset: 2px; }

.gs-review__by {
  font-size: 16px;
  color: var(--gs-heading);
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--gs-line);
}

.gs-placeholder {
  border: 1px dashed #d5d5d5;
  background: #fbfbfb;
  padding: 28px;
  text-align: center;
  font-size: 16px;
  color: #6b6b6b;
}

/* --------------------------- equipo experto ----------------------------- */

.gs-team {
  padding: 56px 0;
  border-top: 1px solid var(--gs-line);
}
.gs-team__intro {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.gs-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.gs-member {
  border-top: 3px solid var(--gs-blue);
  padding-top: 22px;
}
.gs-member__name {
  font-size: 21px;
  font-weight: 600;
  color: var(--gs-heading);
  margin: 0 0 6px;
}
.gs-member__role {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #767676;
  margin: 0 0 16px;
  /* Los cargos ocupan 1, 2 y 3 líneas; se reserva el alto de 3 para que las
     tres biografías arranquen a la misma altura. */
  min-height: 69px;
}
.gs-member__bio { margin: 0; }

/* En escritorio la biografía va siempre a la vista y el botón no existe */
.gs-member__toggle { display: none; }

/* ----------------------------- formulario ------------------------------- */
/* Diseñado para 40+ (muchos 65+): texto grande, alto contraste, objetivos
   táctiles ≥48px, etiquetas visibles siempre, sin dropdowns nativos.        */

.gs-form-wrap { background: var(--gs-soft); padding: 56px 0; }
.gs-form { max-width: 780px; margin: 0 auto; }
.gs-form__intro { text-align: left; margin: 0 0 34px; font-size: 17px; }

.gs-field { margin: 0 0 30px; }
.gs-field > legend,
.gs-field > label {
  display: block;
  font-size: 19px;
  color: #333;
  margin: 0 0 12px;
  padding: 0;
}
.gs-hint { font-size: 16px; color: #5f5f5f; margin: -6px 0 12px; }

/* Obligatorio / opcional en palabras, no con un asterisco: con público mayor
   el asterisco se pasa por alto y luego el formulario falla sin explicación. */
.gs-req, .gs-opt {
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: 2px;
}
.gs-req { color: #b0392f; }
.gs-opt { color: #767676; }

.gs-input {
  width: 100%;
  min-height: var(--gs-touch);
  padding: 12px 14px;
  font-family: var(--gs-font);
  font-size: 18px;
  color: #333;
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 3px;
}
.gs-input:focus { border-color: var(--gs-blue); outline: 3px solid rgba(41,169,225,.35); outline-offset: 0; }
textarea.gs-input { min-height: 150px; resize: vertical; }

.gs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Opciones como tarjetas grandes (radio / checkbox), no <select> */
fieldset.gs-field { border: 0; margin-inline: 0; }

.gs-options { display: grid; gap: 12px; }
.gs-options--2 { grid-template-columns: 1fr 1fr; }

.gs-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: var(--gs-touch);
  padding: 14px 16px;
  background: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  color: #333;
  line-height: 1.4;
}
.gs-option:hover { border-color: #b3b3b3; }
.gs-option input {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  flex: 0 0 24px;
  accent-color: var(--gs-green);
}
.gs-option:has(input:checked) { border-color: var(--gs-green); background: #f4faf1; }
.gs-option:has(input:focus-visible) { outline: 3px solid var(--gs-blue); outline-offset: 2px; }
.gs-option small { display: block; font-size: 16px; color: #5f5f5f; }

.gs-submit { text-align: center; margin-top: 34px; }
.gs-submit .gs-btn { font-size: 18px; padding: 14px 42px; }
.gs-privacy { font-size: 16px; color: #5f5f5f; text-align: center; margin: 14px 0 0; }

/* Trampa antispam: fuera de pantalla, pero SIN display:none — algunos bots
   ignoran los campos ocultos con display, y así siguen cayendo. */
.gs-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Acuse de envío. Sin color como único indicador: lleva texto explícito y un
   borde grueso a la izquierda, legible también para un daltónico. */
.gs-form__status {
  margin: 18px auto 0;
  max-width: 640px;
  padding: 14px 18px;
  border-left: 5px solid;
  font-size: 17px;
  text-align: left;
}
.gs-form__status:focus-visible { outline: 3px solid var(--gs-blue); outline-offset: 2px; }
.gs-form__status.is-ok    { background: #eef7ea; border-color: var(--gs-green); color: #2f5d22; }
.gs-form__status.is-error { background: #fdeff0; border-color: var(--gs-coral); color: #8a2b33; }

/* Campo que CF7 ha rechazado */
.gs-input[aria-invalid="true"] { border-color: var(--gs-coral); box-shadow: 0 0 0 2px rgba(242,121,130,.25); }

/* ------------------------------ footer ---------------------------------- */

/* Landing autónoma: este footer NO viene del tema, se genera desde
   partials/footer.html. Colores leídos del footer real en producción:
   barra de enlaces #808080 y franja de copyright #4a4844, ambas con texto
   blanco. Son dos tiras distintas, no una. */

.gs-footer { margin-top: 0; }

.gs-footer__links { background: #808080; padding: 14px 0; }
.gs-footer__links ul {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--gs-gutter);
  max-width: var(--gs-container);
  text-align: center;
}
.gs-footer__links li { display: inline; }
/* El separador es decorativo: aria-hidden no aplica a ::before, pero el
   contenido generado no entra en el árbol de accesibilidad de los lectores
   modernos, igual que en el sitio original. */
.gs-footer__links li + li::before { content: "\2022\00a0"; color: #fff; }
.gs-footer__links a {
  display: inline-block;
  padding: 7px 2px;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}
.gs-footer__links a:hover { text-decoration: underline; }
.gs-footer__links a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.gs-footer__copy { background: #4a4844; padding: 10px 0; text-align: center; }
.gs-footer__copy p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
}

/* ------------------------------ responsive ------------------------------ */

@media (max-width: 991px) {
  .gs-cards, .gs-anchors, .gs-team__grid { grid-template-columns: 1fr 1fr; }
  .gs-detail { grid-template-columns: 60px 240px 1fr; gap: 22px; }
  .gs-detail__rail { font-size: 26px; }
}

@media (max-width: 767px) {
  :root { --gs-body-size: 19px; }
  .gs-cards, .gs-anchors, .gs-team__grid { grid-template-columns: 1fr; }
  .gs-member__role { min-height: 0; }   /* en una columna no hay nada que alinear */

  /* --- Equipo: la biografía se pliega SOLO en móvil ------------------------
     Nombre y cargo quedan siempre visibles — "Donald N. Yates, Ph.D., Founder
     and Chief Scientific Officer" ya da la señal de confianza de un vistazo —
     y el párrafo se despliega a demanda. En escritorio no cambia nada.        */
  .gs-team__grid { gap: 20px; }
  .gs-member:not(.is-open) .gs-member__bio { display: none; }
  .gs-member__role { margin-bottom: 4px; }
  .gs-member__toggle {
    display: inline-flex;
    align-items: center;
    min-height: var(--gs-touch);
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--gs-font);
    font-size: 17px;
    color: var(--gs-blue);
    text-decoration: underline;
    cursor: pointer;
  }
  .gs-member__toggle:focus-visible { outline: 3px solid var(--gs-blue); outline-offset: 2px; }
  .gs-member.is-open .gs-member__bio { margin-top: 4px; }
  .gs-slide { flex: 0 0 100%; }
  /* En móvil, 5 puntos no caben junto a las flechas y quedan cortados.
     Se ocultan: las flechas grandes + el contador "Page 3 of 5" orientan mejor. */
  .gs-carousel__dots { display: none; }
  .gs-carousel__controls { gap: 40px; }
  /* Dar alto natural a las diapositivas no sirve: la pista es un flex row y
     todas valen lo que la más alta. Lo que sí baja la altura es recortar más
     el cuerpo de la reseña, que es de donde viene la diferencia. */
  .gs-review__body { -webkit-line-clamp: 6; }
  /* En una sola columna, la columna izquierda caía ANTES del título: se leía
     "$1,000.00 · BUY NOW" sin saber todavía de qué servicio se hablaba. En móvil
     manda el texto y la compra cierra: qué es → por qué → prueba → precio → botón. */
  .gs-detail {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .gs-detail__rail { display: none; }
  .gs-detail__body { order: 1; }
  .gs-detail__media {
    order: 2;
    max-width: 325px;
    display: flex;
    flex-direction: column;
  }
  .gs-detail__media img   { order: 1; }
  .gs-detail__media .gs-facts { order: 2; margin-top: 0; }
  .gs-detail__price       { order: 3; margin-top: 18px; }
  .gs-detail__payg        { order: 4; }
  .gs-detail__media .gs-badge-stock { order: 5; align-self: flex-start; }
  .gs-detail__media .gs-btn { order: 6; width: 100%; }
  .gs-acc__cols { columns: 1; }
  .gs-row, .gs-options--2 { grid-template-columns: 1fr; }
  .gs-h2 { font-size: 25px; }
  .gs-lead__title { font-size: 26px; }
  .gs-nav { display: none; }

  /* --- Objetivos táctiles: los enlaces de texto no llegaban a 44px --------- */
  .gs-card__title a,
  .gs-cta-line a,
  .gs-policy a,
  .gs-review__from a,
  .gs-acc__body li > a {
    display: inline-block;
    padding: 11px 0;
  }
  .gs-acc__body li:has(> a) { margin-bottom: 0; }

  /* --- COMPARATIVA APILADA -------------------------------------------------
     En escritorio es una tabla de 4 columnas. En móvil medía 760px dentro de
     345 visibles: había que arrastrar de lado, y nada lo indicaba. Aquí cada
     fila pasa a ser su propia tarjeta, con la característica como título y los
     tres servicios debajo. Mismo HTML y misma semántica de tabla; solo cambia
     la presentación, y el nombre del servicio lo pone `data-label` por CSS.   */
  .gs-compare__scroll { overflow-x: visible; }

  .gs-table { display: block; min-width: 0; font-size: 18px; }
  .gs-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .gs-table tbody, .gs-table tr, .gs-table tbody th, .gs-table td { display: block; }

  .gs-table tr {
    border: 1px solid var(--gs-line);
    border-radius: 3px;
    margin-bottom: 16px;
    overflow: hidden;
  }
  .gs-table tbody th {
    min-width: 0;
    border: 0;
    padding: 14px 16px 10px;
    font-weight: 600;
    font-size: 19px;
    background: var(--gs-soft);
  }
  .gs-table tbody th small { font-size: 16px; }

  .gs-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    text-align: right;
    padding: 13px 16px;
    border-bottom: 1px solid #f0f0f0;
  }
  .gs-table td::before {
    content: attr(data-label);
    flex: 0 1 auto;
    text-align: left;
    color: #5f5f5f;
    font-size: 16px;
  }
  .gs-table tr > td:last-child { border-bottom: 0; }

  /* Fila de botones: nombre del servicio, precio y botón a lo ancho.
     El orden lo fija flex, porque ::after va después del contenido en el DOM. */
  .gs-table tr:last-child th { display: none; }
  .gs-table tr:last-child td {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 18px 16px;
  }
  .gs-table tr:last-child td::before {
    /* En escritorio este ::before es el precio; en móvil vuelve a ser el nombre
       del servicio, y el precio pasa al ::after de debajo. */
    content: attr(data-label);
    order: 1;
    margin-bottom: 0;
    text-align: center;
    /* Un punto más grande y más oscuro, y de una sola línea siempre */
    font-size: 19px;
    color: var(--gs-heading);
    white-space: nowrap;
  }
  .gs-table tr:last-child td::after {
    content: attr(data-price);
    order: 2;
    font-size: 24px;
    color: var(--gs-heading);
    margin-bottom: 8px;
  }
  .gs-table tr:last-child .gs-btn { order: 3; width: 100%; }
}

/* Pantallas muy estrechas (iPhone SE y similares) */
@media (max-width: 360px) {
  :root { --gs-body-size: 18px; }
  .gs-lead__title { font-size: 24px; }
  .gs-h2 { font-size: 23px; }
  .gs-detail__title { font-size: 21px; }
  .gs-table td { flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; }
  /* La fila de botones no se apila a los lados: mantiene su columna centrada.
     Medido a 320px: el nombre más largo ocupa 207 de los 256px disponibles,
     así que los 19px siguen entrando en una sola línea. */
  .gs-table tr:last-child td { align-items: center; text-align: center; }
  .gs-acc > summary { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html, .gs-carousel__viewport { scroll-behavior: auto; }
}