/*
Theme Name: GuauKit Child
Theme URI: https://guaukit.com
Description: Tema hijo de Hello Elementor con los tokens de marca de GuauKit, para que la web y la aplicación parezcan lo mismo.
Author: GuauKit
Template: hello-elementor
Version: 2.0.0
Text Domain: guaukit-child
*/

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS
   Los mismos valores que usa el producto. Cambiar aquí cambia toda la web sin
   tocar un solo widget en Elementor.

   OJO: la versión 1.0.0 de este tema usaba #0d9488 y un acento violeta #7c3aed.
   Era el teal por defecto de Tailwind, no el de GuauKit: packages/config/
   tailwind.config.ts del repositorio del producto sobrescribe la escala entera.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --gk-primary: #365d61;
  --gk-primary-dark: #2c4d51;
  --gk-primary-darker: #1c3134;
  --gk-primary-soft: #f1f7f7;
  --gk-teal-100: #dfeced;
  --gk-teal-200: #c6e0e2;
  --gk-teal-300: #a8d0d4;
  --gk-accent: #65aeb6;

  --gk-ink: #111827;
  --gk-text: #374151;
  --gk-muted: #6b7280;
  --gk-line: #e5e7eb;
  --gk-bg: #f9fafb;

  --gk-radius: 10px;
  --gk-radius-card: 15px;
  --gk-radius-panel: 24px;
  --gk-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .06);
  --gk-shadow-btn: 0 6px 16px rgba(54, 93, 97, .22);

  --gk-font-heading: "DM Sans", "Inter", system-ui, sans-serif;
  --gk-font-body: "Inter", system-ui, sans-serif;
}

/* ── Tipografías ──────────────────────────────────────────────────────────────
   Autoalojadas a propósito, no desde la CDN de Google: quita una petición a un
   tercero, mejora el LCP y evita el problema de RGPD de enviar la IP de cada
   visitante a Google.

   Los archivos .woff2 hay que subirlos a wp-content/themes/guaukit-child/fonts/.
   Se descargan de https://fontsource.org (paquetes `dm-sans` e `inter`).
   Mientras no estén, el navegador usa la fuente del sistema y la web se ve
   correcta, solo que con otra tipografía. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-latin-variable.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-display: swap;
  font-style: normal;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--gk-font-body);
  color: var(--gk-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--gk-font-heading);
  color: var(--gk-ink);
  letter-spacing: -0.02em;
}

/* El cuerpo de página nunca hace scroll horizontal. Una rejilla que se desborda
   en móvil es el fallo más habitual y el más fácil de no ver desde el escritorio. */
html, body { overflow-x: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   HÉROES
   ═══════════════════════════════════════════════════════════════════════════ */
.gk-hero { background: linear-gradient(180deg, var(--gk-primary-soft) 0%, #fff 100%); }

.gk-eyebrow .elementor-heading-title {
  color: var(--gk-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* El titular de portada tiene que dominar la pantalla. A 3,25rem competía con
   todo lo demás; a 4,5rem manda, que es lo que tiene que hacer lo primero que
   se lee. `text-wrap: balance` reparte las líneas para que no quede una sola
   palabra colgando en la última, que es lo que más afea un titular grande. */
.gk-h1 .elementor-heading-title {
  font-size: clamp(2.15rem, 5.5vw, 4.5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 16ch;
  margin-inline: auto;
}

/* Las páginas interiores no necesitan tanto: ahí el titular informa, no impacta. */
.gk-hero .gk-h1 .elementor-heading-title { max-width: 22ch; }

.gk-dark .gk-lead .elementor-widget-container,
.gk-hero .gk-lead .elementor-widget-container { max-width: 62ch; margin-inline: auto; }

/* ── Captura del producto bajo el héroe ───────────────────────────────────────
   Se solapa con el héroe oscuro tirando de margen negativo: sin eso la portada
   se lee como una pila de bloques apilados, y con eso la captura queda montada
   sobre el degradado y arrastra la mirada hacia abajo. */
.gk-captura-seccion { background: linear-gradient(180deg, var(--gk-primary-dark) 0%, var(--gk-primary-dark) 45%, #fff 45%); }
.gk-captura img {
  width: 100%;
  max-width: 980px;
  border-radius: var(--gk-radius-panel);
  box-shadow: 0 24px 60px rgba(17, 24, 39, .22), 0 2px 8px rgba(17, 24, 39, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  display: block;
  margin-inline: auto;
}
.gk-captura .elementor-widget-container { margin-top: -60px; }

@media (max-width: 767px) {
  .gk-captura .elementor-widget-container { margin-top: -32px; }
  .gk-captura-seccion { background: linear-gradient(180deg, var(--gk-primary-dark) 0%, var(--gk-primary-dark) 30%, #fff 30%); }
}

/* ── Barra de cifras ──────────────────────────────────────────────────────── */
.gk-cifra .elementor-heading-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--gk-primary);
  line-height: 1.1;
  margin-bottom: 2px;
}

.gk-lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--gk-muted);
}

.gk-fineprint { font-size: 13px; color: var(--gk-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   SECCIONES
   ═══════════════════════════════════════════════════════════════════════════ */
.gk-alt { background: var(--gk-bg); }

/* Fondo oscuro. La sonda confirmó que el degradado de contenedor funciona, pero
   también que sin estas reglas los titulares salen en gris oscuro sobre verde
   oscuro y no se leen: Elementor no invierte el color del texto por su cuenta. */
.gk-dark { background: var(--gk-primary); }

/* Especificidad a propósito. Elementor sale con
   `.elementor-widget-heading .elementor-heading-title { color: … }`, que empata
   con `.gk-dark .elementor-heading-title` y gana por orden de carga: el titular
   del bloque oscuro se quedaba en gris sobre verde y no se leía. Se vio en la
   sonda 1 y volvió a pasar en la página piloto. Se añade el widget al selector
   y `!important` porque el color también puede venir de los colores globales
   del sitio, que Elementor inyecta en línea. */
.gk-dark .elementor-widget-heading .elementor-heading-title,
.gk-dark .elementor-heading-title,
.gk-dark h1, .gk-dark h2, .gk-dark h3, .gk-dark h4 { color: #fff !important; }

.gk-dark p,
.gk-dark .elementor-widget-text-editor,
.gk-dark .elementor-widget-text-editor p,
.gk-dark .elementor-icon-list-text { color: rgba(255, 255, 255, .82) !important; }

.gk-dark .gk-lead,
.gk-dark .gk-lead p { color: rgba(255, 255, 255, .78) !important; }
.gk-dark .gk-fineprint,
.gk-dark .gk-fineprint p { color: rgba(255, 255, 255, .65) !important; }
.gk-dark .elementor-icon-list-icon svg { fill: var(--gk-teal-300); }

.gk-section-title .elementor-heading-title {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 700;
}

/* ── Migas de pan ──────────────────────────────────────────────────────────────
   Se construyen con una lista ordenada por accesibilidad y por los datos
   estructurados, pero visualmente van en línea y con separadores, no numeradas
   una debajo de otra, que es como salen sin estilar. */
.gk-migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--gk-muted);
}
.gk-migas li + li::before { content: "›"; margin-right: 8px; color: var(--gk-line); }
.gk-migas a { color: var(--gk-muted); text-decoration: none; }
.gk-migas a:hover { color: var(--gk-primary); text-decoration: underline; }
.gk-migas [aria-current="page"] { color: var(--gk-ink); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════
   TARJETAS
   ═══════════════════════════════════════════════════════════════════════════ */
/* `.e-con.gk-card` en lugar de `.gk-card` a secas: los contenedores de Elementor
   salen con la clase `.e-con` y su fondo, borde, radio y relleno vienen de
   variables propias que empatan en especificidad con una clase suelta. Sin esto
   las tarjetas se veían como texto plano, sin recuadro ni sombra: pasó en la
   página piloto. El `!important` cubre además el caso de que los ajustes del
   widget en el editor inyecten el estilo en línea. */
.e-con.gk-card,
.gk-card {
  background: #fff !important;
  border: 1px solid var(--gk-line) !important;
  border-radius: var(--gk-radius-card) !important;
  box-shadow: var(--gk-shadow);
  padding: 24px !important;
  transition: border-color .15s ease, transform .15s ease;
}
.e-con.gk-card:hover,
.gk-card:hover { border-color: var(--gk-teal-200) !important; transform: translateY(-2px); }

/* Los contenedores «boxed» de Elementor meten el relleno en un hijo interno, así
   que hay que anularlo ahí también o se suma al de la tarjeta. */
.e-con.gk-card > .e-con-inner { padding: 0 !important; }

.gk-card .elementor-heading-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.gk-card .elementor-widget-text-editor { font-size: .95rem; line-height: 1.55; color: var(--gk-muted); }

/* Tarjeta con imagen a sangre por arriba (rejilla de verticales de la portada). */
.gk-card-media { padding: 0; overflow: hidden; }
.gk-card-media .elementor-widget-image img { width: 100%; height: 190px; object-fit: cover; display: block; }
.gk-card-media .elementor-widget-heading,
.gk-card-media .elementor-widget-text-editor { padding-inline: 20px; }
.gk-card-media .elementor-widget-heading { padding-top: 18px; }
.gk-card-media .elementor-widget-text-editor:last-child { padding-bottom: 22px; }

/* Recuadro de icono de las rejillas de funciones. */
.gk-icon-tile .elementor-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--gk-primary-soft);
  border-radius: 12px;
  color: var(--gk-primary);
}

/* ── Etiquetas de tipo de negocio ─────────────────────────────────────────── */
.gk-chips .elementor-widget-container { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gk-chips p { margin: 0; }
.gk-chip {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--gk-line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gk-primary);
}

/* ── Listas con marca de verificación ─────────────────────────────────────── */
.gk-list .elementor-icon-list-icon svg { fill: var(--gk-primary); }
.gk-list .elementor-icon-list-text { color: var(--gk-text); font-size: .95rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════════════════════ */
.gk-btn .elementor-button {
  background: var(--gk-primary);
  color: #fff;
  border-radius: var(--gk-radius);
  font-weight: 600;
  padding: 14px 26px;
  box-shadow: var(--gk-shadow-btn);
}
.gk-btn .elementor-button:hover { background: var(--gk-primary-dark); color: #fff; }

.gk-btn-ghost .elementor-button {
  background: transparent;
  color: var(--gk-primary);
  border: 2px solid var(--gk-line);
  border-radius: var(--gk-radius);
  font-weight: 600;
  padding: 12px 24px;
  box-shadow: none;
}
.gk-btn-ghost .elementor-button:hover { border-color: var(--gk-teal-200); background: var(--gk-primary-soft); }

/* Sobre fondo oscuro se invierten: el botón principal pasa a blanco. */
.gk-dark .gk-btn .elementor-button { background: #fff; color: var(--gk-primary-dark); }
.gk-dark .gk-btn .elementor-button:hover { background: var(--gk-primary-soft); }
.gk-dark .gk-btn-ghost .elementor-button { color: #fff; border-color: var(--gk-accent); }
.gk-dark .gk-btn-ghost .elementor-button:hover { background: rgba(255, 255, 255, .1); }

/* ═══════════════════════════════════════════════════════════════════════════
   PRECIOS
   ═══════════════════════════════════════════════════════════════════════════ */
.e-con.gk-plan,
.gk-plan {
  background: #fff !important;
  border: 1px solid var(--gk-line) !important;
  border-radius: var(--gk-radius-card) !important;
  overflow: hidden;
  padding: 0 !important;
}
.e-con.gk-plan > .e-con-inner { padding: 0 !important; }

.e-con.gk-plan-featured,
.gk-plan-featured { border-color: var(--gk-primary) !important; box-shadow: 0 12px 32px rgba(54, 93, 97, .16); }

/* Cabecera de color de la tarjeta, como en la referencia de diseño. */
.e-con.gk-plan-head,
.gk-plan-head { background: var(--gk-teal-300) !important; padding: 22px 24px !important; }
.e-con.gk-plan-featured .gk-plan-head,
.gk-plan-featured .gk-plan-head { background: var(--gk-primary) !important; }
.gk-plan-featured .gk-plan-head .elementor-heading-title,
.gk-plan-featured .gk-plan-head .elementor-widget-text-editor { color: #fff !important; }

.e-con.gk-plan-body,
.gk-plan-body { padding: 24px !important; }

.gk-price .elementor-heading-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gk-primary);
}
/* El importe pendiente se ve distinto a propósito: es una señal de que la
   página no es publicable todavía, no un precio de verdad. */
.gk-price-pendiente .elementor-heading-title {
  font-size: 1.4rem;
  color: var(--gk-muted);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREGUNTAS FRECUENTES
   El widget `accordion` clásico de Elementor no renderiza en instalaciones
   nuevas (retirado desde la 3.25). Se estilan las dos alternativas: el acordeón
   anidado, si va, y <details> nativo como red de seguridad.
   ═══════════════════════════════════════════════════════════════════════════ */
.gk-faq-item {
  border-bottom: 1px solid var(--gk-line);
  padding: 16px 0;
}
.gk-faq-item > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--gk-ink);
  font-family: var(--gk-font-heading);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.gk-faq-item > summary::-webkit-details-marker { display: none; }
.gk-faq-item > summary::after {
  content: "+";
  color: var(--gk-primary);
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
}
.gk-faq-item[open] > summary::after { content: "–"; }
.gk-faq-item > p { margin: 10px 0 0; color: var(--gk-muted); line-height: 1.6; }

/* Acordeón anidado de Elementor, si resulta que funciona. */
.gk-faq .e-n-accordion-item-title { font-family: var(--gk-font-heading); font-weight: 600; color: var(--gk-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARIO
   ═══════════════════════════════════════════════════════════════════════════ */
.gk-form .elementor-field-group .elementor-field {
  border: 1px solid var(--gk-line) !important;
  border-radius: var(--gk-radius) !important;
  padding: 12px 14px !important;
  font-size: .95rem;
}
.gk-form .elementor-field-group .elementor-field:focus {
  border-color: var(--gk-primary) !important;
  box-shadow: 0 0 0 3px rgba(54, 93, 97, .15) !important;
  outline: none;
}
.gk-form .elementor-button { background: var(--gk-primary); border-radius: var(--gk-radius); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROSA — legales y artículos del blog
   La línea cómoda de lectura ronda los 75 caracteres. Un texto legal o un
   artículo a 1140 px de ancho no lo lee nadie: el ojo se pierde al volver al
   principio de la línea siguiente.
   ═══════════════════════════════════════════════════════════════════════════ */
.gk-prosa .elementor-widget-text-editor,
.entry-content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--gk-text);
}
.gk-prosa .elementor-widget-text-editor p,
.entry-content p { margin-bottom: 1.1em; }

.gk-prosa .gk-section-title .elementor-heading-title,
.entry-content h2 { font-size: 1.5rem; margin-top: 1.6em; }
.entry-content h3 { font-size: 1.2rem; margin-top: 1.4em; }

.gk-prosa a,
.entry-content a { color: var(--gk-primary); text-decoration: underline; text-underline-offset: 2px; }
.gk-prosa a:hover,
.entry-content a:hover { color: var(--gk-primary-dark); }

.entry-content ul, .entry-content ol { margin: 0 0 1.1em 1.2em; }
.entry-content li { margin-bottom: .4em; }

.entry-content blockquote {
  border-left: 3px solid var(--gk-teal-300);
  padding: 4px 0 4px 18px;
  margin: 1.6em 0;
  color: var(--gk-muted);
  font-style: normal;
}

/* Tablas de los artículos de normativa: se desbordan en móvil si no se las
   deja desplazarse dentro de su propia caja. */
.entry-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.entry-content th, .entry-content td { border: 1px solid var(--gk-line); padding: 10px 12px; text-align: left; }
.entry-content th { background: var(--gk-primary-soft); font-weight: 600; color: var(--gk-ink); }
.entry-content .tabla-scroll,
.entry-content figure.wp-block-table { overflow-x: auto; }

/* Aviso legal al pie de los artículos de normativa. */
.gk-aviso {
  background: var(--gk-primary-soft);
  border-left: 3px solid var(--gk-accent);
  border-radius: 0 var(--gk-radius) var(--gk-radius) 0;
  padding: 16px 20px;
  font-size: .95rem;
  color: var(--gk-muted);
  margin: 2em 0;
}

/* ── Listado del blog ─────────────────────────────────────────────────────── */
.gk-blog-meta { font-size: 13px; color: var(--gk-muted); }
.gk-blog-categoria {
  display: inline-block;
  background: var(--gk-primary-soft);
  color: var(--gk-primary);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD
   ═══════════════════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.elementor-button:focus-visible {
  outline: 3px solid var(--gk-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gk-card { transition: none; }
  .gk-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÓVIL
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .gk-card, .gk-plan-body, .gk-plan-head { padding: 20px; }
  .gk-chips .elementor-widget-container { justify-content: flex-start; }
  .gk-card-media .elementor-widget-image img { height: 160px; }
}