/* ============================================================
   GESTIOPRO - style.css
   Color corporativo aprobado: #A01216
   Toda la paleta se deriva de el. Las seis combinaciones de texto
   superan el nivel AAA de accesibilidad (contraste 7:1 o mas).
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --rojo:          #A01216;   /* corporativo        8,1:1 sobre blanco  */
  --rojo-oscuro:   #7A0E11;   /* hover, panel movil 11,1:1 con blanco   */
  --rojo-profundo: #5C0A0D;   /* pie, submenus      14,0:1 con blanco   */
  --rojo-tinte:    #F7ECEC;   /* fondo del hero      7,0:1 con el rojo  */
  --rojo-borde:    #E9D2D3;

  --grafito:    #1F2426;      /* texto principal    15,7:1 sobre blanco */
  --gris:       #4A5257;      /* texto secundario    8,0:1 sobre blanco */
  --gris-linea: #E2E5E7;
  --gris-fondo: #F5F6F7;
  --blanco:     #FFFFFF;

  /* Pila del sistema: cero peticiones externas, cero preconnect,
     mejor LCP. En Windows se ve en Segoe UI. */
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radio:       6px;
  --radio-g:     12px;
  --transicion:  .18s ease;
  --sombra:      0 10px 30px rgba(31,36,38,.10);
  --contenedor:  1180px;
  --alto-header: 72px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--fuente);
  font-size:1.0625rem;              /* 17px. Nada baja de 16px en el sitio. */
  line-height:1.7;
  color:var(--grafito);
  background:var(--blanco);
}
img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{ color:var(--grafito); font-weight:700; line-height:1.2; letter-spacing:-.01em; margin:0 0 14px; }
h1{ font-size:clamp(1.95rem, 4.4vw, 2.9rem); font-weight:800; line-height:1.14; letter-spacing:-.02em; }
h2{ font-size:clamp(1.5rem, 2.9vw, 2.1rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 16px; }
.lead{ font-size:clamp(1.1rem, 1.85vw, 1.28rem); color:var(--gris); line-height:1.6; }

/* Foco visible en todo el sitio */
:focus-visible{ outline:3px solid var(--rojo); outline-offset:2px; border-radius:2px; }

/* El salto de ancla no queda tapado por el header fijo */
[id]{ scroll-margin-top: calc(var(--alto-header) + 16px); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

.contenedor{ width:100%; max-width:var(--contenedor); margin:0 auto; padding:0 20px; }
@media (max-width:767px){ .contenedor{ padding:0 16px; } }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--rojo); color:var(--blanco);
  padding:12px 18px; font-weight:700; text-decoration:none;
}
.skip-link:focus{ left:0; top:0; }

/* Motivo de marca: la barra roja de la og-image */
.barra-marca{ height:6px; background:var(--rojo); }

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 22px;
  border:2px solid transparent; border-radius:var(--radio);
  font-family:inherit; font-size:1rem; font-weight:600;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.btn-primario{ background:var(--rojo); color:var(--blanco); }
.btn-primario:hover{ background:var(--rojo-oscuro); }
.btn-secundario{ background:transparent; color:var(--rojo); border-color:var(--rojo); }
.btn-secundario:hover{ background:var(--rojo-tinte); }

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--blanco); border-bottom:1px solid var(--gris-linea);
}
.header-inner{ display:flex; align-items:center; gap:12px; height:var(--alto-header); }

/* El SVG hereda el color del enlace (stroke="currentColor").
   Mismo bloque SVG en header y pie; alla se pinta blanco. */
.site-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; color:var(--rojo); }
.site-logo svg{ width:40px; height:auto; flex-shrink:0; display:block; }
.logo-texto{
  font-size:1.28rem; font-weight:800; letter-spacing:.01em;
  text-transform:uppercase; color:var(--grafito); line-height:1;
}

.header-acciones{ display:flex; align-items:center; gap:10px; margin-left:auto; }
@media (max-width:767px){ .header-acciones .btn{ padding:0 14px; } }
/* Bajo 420px se oculta la palabra: queda el icono, y el boton Cotiza gratis
   nunca se aprieta contra la hamburguesa. */
@media (max-width:419px){ .logo-texto{ display:none; } }

/* ---------- SECCIONES ---------- */
.seccion{ padding:72px 0; }
@media (max-width:767px){ .seccion{ padding:48px 0; } }
.seccion--gris{ background:var(--gris-fondo); }

.eyebrow{
  display:inline-flex; align-items:center; gap:12px; margin:0;
  font-size:1rem; font-weight:700; letter-spacing:.10em;
  text-transform:uppercase; color:var(--rojo);
}
.eyebrow::before,
.eyebrow::after{ content:""; width:30px; height:3px; flex-shrink:0; background:var(--rojo); border-radius:2px; }

.seccion-cabeza{ max-width:760px; margin:0 auto 44px; text-align:center; }
.seccion-cabeza h2{ margin:16px 0 12px; }
.seccion-cabeza p{ margin:0; color:var(--gris); font-size:1.125rem; }

/* ---------- HERO ---------- */
.hero{
  background:var(--rojo-tinte); border-bottom:1px solid var(--rojo-borde);
  padding:56px 0 64px; text-align:center;
}
.hero-inner{ max-width:840px; margin:0 auto; }
.hero h1{ margin:18px 0 18px; }
.hero .lead{ margin:0 auto 30px; max-width:700px; }
.hero-botones{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* Sello de inscripcion MINVU: el elemento distintivo del sitio.
   Recoge el circulo del logo y de la og-image. */
.sello-caja{ display:flex; justify-content:center; margin-bottom:26px; }
.sello{
  width:clamp(200px, 56vw, 232px); aspect-ratio:1 / 1; border-radius:50%;
  background:var(--blanco); border:2px solid var(--rojo);
  box-shadow: inset 0 0 0 7px var(--blanco), inset 0 0 0 8px var(--rojo-borde), 0 14px 30px rgba(92,10,13,.12);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:16px;
}
.sello-linea{ font-size:1rem; font-weight:700; line-height:1.2; letter-spacing:.06em; text-transform:uppercase; color:var(--rojo); }
.sello-fuerte{ font-size:clamp(1.7rem, 5vw, 2rem); font-weight:800; letter-spacing:-.01em; line-height:1.1; color:var(--grafito); margin:2px 0 9px; }
.sello-regla{ width:44px; height:3px; background:var(--rojo); border-radius:2px; margin-bottom:9px; }
.sello-pie{ font-size:1rem; font-weight:600; line-height:1.35; color:var(--gris); }

/* ---------- TARJETAS ---------- */
.grilla-2, .grilla-3{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px){
  .grilla-2{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .grilla-3{ grid-template-columns:repeat(3,1fr); }
}
.tarjeta{
  background:var(--blanco); border:1px solid var(--gris-linea);
  border-top:4px solid var(--rojo); border-radius:var(--radio-g);
  padding:30px 26px; text-align:center;
  transition:box-shadow var(--transicion);
}
.tarjeta:hover{ box-shadow:var(--sombra); }
.tarjeta p{ color:var(--gris); }
.tarjeta p:last-of-type{ margin-bottom:18px; }
.enlace{
  display:inline-block; color:var(--rojo); font-weight:600; text-decoration:none;
  border-bottom:2px solid var(--rojo-borde); transition:border-color var(--transicion);
}
.enlace:hover{ border-bottom-color:var(--rojo); }

/* ---------- FRANJA DE CONFIANZA ---------- */
.franja{ background:var(--rojo); color:var(--blanco); padding:52px 0; text-align:center; }
.franja h2{ color:var(--blanco); margin:0 0 12px; }
.franja p{ margin:0 auto; max-width:820px; color:rgba(255,255,255,.94); font-size:1.125rem; }
.franja a{ color:var(--blanco); text-decoration:underline; text-underline-offset:4px; }

/* ---------- CIERRE ---------- */
.cierre{ background:var(--gris-fondo); text-align:center; }
.cierre-botones{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ---------- TEXTO LARGO (paginas de contenido) ----------
   IMPORTANTE: en las paginas de contenido (los dos servicios, Nosotros,
   las tres legales y los articulos del blog), el cuerpo del texto va
   ALINEADO A LA IZQUIERDA, con el borde derecho irregular. Nunca centrado
   ni justificado: un parrafo largo centrado deja el margen izquierdo
   irregular y el ojo pierde el comienzo de cada linea; el justificado abre
   huecos desiguales entre palabras (WCAG 1.4.8 lo desaconseja).
   Se aplica envolviendo el cuerpo en .texto-largo                        */
.texto-largo{ text-align:left; max-width:760px; margin:0 auto; }
.texto-largo h2,
.texto-largo h3,
.texto-largo h4{ text-align:left; }

/* ---------- PIE (compacto, como el de Easytour) ---------- */
.site-footer{
  background:var(--rojo-profundo); color:rgba(255,255,255,.90);
  padding:34px 0 16px; font-size:1rem; line-height:1.45;
}
.footer-top{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px){ .footer-top{ grid-template-columns:1.6fr 1fr 1fr 1.15fr; gap:32px; } }
.site-footer h3{ color:var(--blanco); font-size:1rem; margin:0 0 8px; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:5px; }
.site-footer a{ color:rgba(255,255,255,.90); text-decoration:none; }
.site-footer a:hover{ color:var(--blanco); text-decoration:underline; }

.footer-logo{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--blanco); text-decoration:none; margin-bottom:8px;
}
.footer-logo svg{ width:34px; height:auto; flex-shrink:0; display:block; }
.footer-logo .logo-texto{ color:var(--blanco); display:inline; font-size:1.12rem; }
.footer-tagline{ margin:0; color:rgba(255,255,255,.86); }
.footer-minvu{
  margin-top:10px; padding-top:8px;
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.86);
}
.footer-bottom{
  margin-top:20px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex; flex-wrap:wrap; gap:8px 22px;
  align-items:center; justify-content:space-between;
}
.footer-bottom p{ margin:0; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:6px 18px; }

/* ---------- BOTONES FLOTANTES ---------- */
/* Los dos a la misma altura. La flecha a la izquierda, WhatsApp a la derecha.
   56 px: bastante mas que los 48 px minimos de la spec, porque son los dos
   controles que mas se pulsan desde el telefono. */
.btn-flotante{
  position:fixed; bottom:20px; z-index:95;
  width:56px; height:56px; padding:0;
  border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:transform var(--transicion), background var(--transicion),
             opacity var(--transicion), visibility var(--transicion);
}
.btn-flotante:hover{ transform:translateY(-2px); }
.btn-flotante svg{ display:block; }

/* Flecha: abajo a la IZQUIERDA. Aparece solo tras bajar 300 px, porque arriba
   del todo no tiene ningun sentido. */
.btn-volver-arriba{
  left:20px; right:auto;
  background:var(--rojo); color:var(--blanco);
  opacity:0; visibility:hidden;
}
.btn-volver-arriba.visible{ opacity:1; visibility:visible; }
.btn-volver-arriba:hover{ background:var(--rojo-oscuro); }
.btn-volver-arriba svg{ width:24px; height:24px; }

/* WhatsApp: abajo a la DERECHA. Visible desde el primer segundo.
   Verde de WhatsApp, que es la senal universal de "esto abre WhatsApp".
   La sombra le da el borde que el verde claro no tiene contra el fondo blanco. */
.btn-whatsapp{
  right:20px; left:auto;
  background:#25D366; color:#FFFFFF;
}
.btn-whatsapp:hover{ background:#1EBE5A; }
.btn-whatsapp svg{ width:30px; height:30px; }

@media (max-width:480px){
  .btn-flotante{ width:52px; height:52px; bottom:16px; }
  .btn-volver-arriba{ left:16px; }
  .btn-whatsapp{ right:16px; }
}

/* ============================================================
   BLOQUE 02 - Migas, tabla de contenidos, FAQ y paginas de error
   ============================================================ */

/* ---------- CABECERA DE PAGINA INTERNA ---------- */
.cabecera-pagina{
  background:var(--rojo-tinte);
  border-bottom:1px solid var(--rojo-borde);
  padding:0 0 52px;
  text-align:center;
}
.cabecera-pagina h1{ margin:22px auto 18px; max-width:900px; }
.cabecera-pagina .lead{ margin:0 auto; max-width:760px; }

/* ---------- MIGAS DE PAN ---------- */
.migas{ padding:20px 0 0; text-align:left; }
.migas ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  font-size:1rem;
}
.migas li{ display:flex; align-items:center; gap:10px; color:var(--gris); }
.migas li:not(:last-child)::after{ content:"›"; color:var(--rojo); font-weight:700; }
.migas a{ color:var(--gris); text-decoration:none; border-bottom:1px solid transparent; }
.migas a:hover{ color:var(--rojo); border-bottom-color:var(--rojo); }
.migas li[aria-current="page"]{ color:var(--grafito); font-weight:600; }

/* ---------- TABLA DE CONTENIDOS ---------- */
.toc{
  background:var(--rojo-tinte);
  border:1px solid var(--rojo-borde);
  border-left:4px solid var(--rojo);
  border-radius:0 var(--radio-g) var(--radio-g) 0;
  padding:22px 26px; margin:0 0 40px;
}
.toc-titulo{
  font-size:1rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:var(--rojo); margin:0 0 12px;
}
.toc ol{ margin:0; padding-left:22px; }
.toc li{ margin-bottom:9px; }
.toc li:last-child{ margin-bottom:0; }
.toc a{ color:var(--grafito); text-decoration:none; border-bottom:1px solid var(--rojo-borde); }
.toc a:hover{ color:var(--rojo); border-bottom-color:var(--rojo); }

/* ---------- CUERPO DE PAGINA DE CONTENIDO ---------- */
.pagina-contenido{ padding:56px 0 72px; }
.pagina-contenido h2{ margin-top:44px; }
.pagina-contenido h3{ margin-top:30px; }
.pagina-contenido h4{ margin-top:24px; font-size:1.0625rem; color:var(--rojo); }
.pagina-contenido h2:first-child,
.pagina-contenido .toc + h2{ margin-top:0; }

/* ---------- PREGUNTAS FRECUENTES ---------- */
.faq{ max-width:860px; margin:0 auto; text-align:left; }
.faq-item{
  border:1px solid var(--gris-linea);
  border-radius:var(--radio-g);
  background:var(--blanco);
  margin-bottom:12px;
}
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:48px; padding:16px 22px;
  font-size:1.0625rem; font-weight:600; color:var(--grafito);
  border-radius:var(--radio-g);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; flex-shrink:0;
  width:11px; height:11px;
  border-right:2px solid var(--rojo);
  border-bottom:2px solid var(--rojo);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--transicion);
}
.faq-item[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.faq-item summary:hover{ background:var(--rojo-tinte); }
.faq-respuesta{ padding:0 22px 20px; color:var(--gris); }
.faq-respuesta p{ margin:0; }
.faq-respuesta a{ color:var(--rojo); font-weight:600; }

/* ---------- TITULOS DENTRO DE TARJETAS ---------- */
/* La jerarquia semantica manda (H2 o H3 segun el nivel real), pero el tamano
   visual de un titulo de tarjeta es siempre el mismo. */
.tarjeta h2,
.tarjeta h3{ font-size:1.3rem; margin:0 0 12px; }

/* ---------- PAGINAS DE ERROR ---------- */
.error-pagina{ text-align:center; }
.error-codigo{
  font-size:clamp(4rem, 12vw, 7rem); font-weight:800;
  color:var(--rojo-borde); line-height:1; margin:0 0 10px;
}
.error-pagina .lead{ max-width:600px; margin:0 auto 30px; }
.error-enlaces{ margin-top:52px; }
.error-enlaces h2{ font-size:1.25rem; margin-bottom:16px; }
.error-enlaces ul{ list-style:none; margin:0; padding:0; }
.error-enlaces li{ margin-bottom:10px; }
.error-enlaces a{ color:var(--rojo); font-weight:600; text-decoration:none; border-bottom:2px solid var(--rojo-borde); }
.error-enlaces a:hover{ border-bottom-color:var(--rojo); }

/* ============================================================
   BLOQUE 03 - Formulario de cotizacion
   ============================================================ */

.formulario{ max-width:720px; margin:0 auto; text-align:left; }
.formulario h3{ margin:36px 0 6px; }
.formulario h3:first-child{ margin-top:0; }
.ayuda-grupo{ margin:0 0 24px; color:var(--gris); }

.campo{ margin-bottom:22px; }
.campo label{
  display:block; margin-bottom:7px;
  font-size:1rem; font-weight:600; color:var(--grafito);
}
.obligatorio{ color:var(--rojo); }

.campo input,
.campo select,
.campo textarea{
  width:100%; min-height:52px; padding:12px 16px;
  font-family:inherit; font-size:1.0625rem; color:var(--grafito);
  background:var(--blanco);
  border:2px solid var(--gris-linea);
  border-radius:var(--radio);
  transition:border-color var(--transicion);
}
.campo textarea{ min-height:150px; resize:vertical; line-height:1.6; }
.campo select{ cursor:pointer; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover{ border-color:var(--rojo-borde); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{ border-color:var(--rojo); outline:none; }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible{ outline:3px solid var(--rojo); outline-offset:1px; }

.campo.con-error input,
.campo.con-error select,
.campo.con-error textarea{ border-color:var(--rojo); background:var(--rojo-tinte); }
.error-campo{
  display:block; margin-top:7px;
  font-size:1rem; font-weight:600; color:var(--rojo);
}

.aviso-error{
  background:var(--rojo-tinte);
  border:1px solid var(--rojo-borde);
  border-left:4px solid var(--rojo);
  border-radius:0 var(--radio) var(--radio) 0;
  padding:16px 20px; margin:0 0 30px;
  color:var(--grafito); font-weight:600;
}

.formulario .btn{ width:100%; margin-top:8px; }
@media (min-width:560px){ .formulario .btn{ width:auto; min-width:250px; } }

.nota-privacidad{ margin:18px 0 0; font-size:1rem; color:var(--gris); }
.nota-privacidad a{ color:var(--rojo); font-weight:600; }

/* Trampa para bots (honeypot). Invisible para personas, invisible para
   lectores de pantalla, y fuera del recorrido del tabulador. Va en el CSS
   externo a proposito: un bot que solo lee el HTML no la detecta. */
.campo-trampa{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important;
}

/* ---------- ZONA DE ATENCION / DATOS DE CONTACTO ---------- */
.datos-contacto{ list-style:none; margin:0; padding:0; }
.datos-contacto li{ margin-bottom:12px; font-size:1.0625rem; }
.datos-contacto a{ color:var(--rojo); font-weight:600; text-decoration:none; border-bottom:2px solid var(--rojo-borde); }
.datos-contacto a:hover{ border-bottom-color:var(--rojo); }

/* ---------- PAGINA DE GRACIAS ---------- */
.gracias-marca{
  width:96px; height:96px; margin:0 auto 24px;
  border-radius:50%; background:var(--rojo);
  display:flex; align-items:center; justify-content:center;
}
.gracias-marca svg{ width:44px; height:44px; color:var(--blanco); }

/* ============================================================
   BLOQUE 04 - Blog
   ============================================================ */

.grilla-blog{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:900px){ .grilla-blog{ grid-template-columns:repeat(3,1fr); } }

.articulo-tarjeta{
  display:flex; flex-direction:column;
  background:var(--blanco);
  border:1px solid var(--gris-linea);
  border-top:4px solid var(--rojo);
  border-radius:var(--radio-g);
  padding:28px 26px;
  text-align:left;
  transition:box-shadow var(--transicion);
}
.articulo-tarjeta:hover{ box-shadow:var(--sombra); }
.articulo-tarjeta h3{ font-size:1.25rem; margin:0 0 12px; line-height:1.3; }
.articulo-tarjeta h3 a{ color:var(--grafito); text-decoration:none; }
.articulo-tarjeta h3 a:hover{ color:var(--rojo); }
.articulo-tarjeta p{ color:var(--gris); margin:0 0 20px; }
.articulo-tarjeta .enlace{ margin-top:auto; align-self:flex-start; }

.articulo-fecha,
.articulo-meta{
  font-size:1rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--rojo); margin:0 0 10px;
}
.articulo-meta{ margin:20px 0 0; }