/* Reset & variables */
:root{
  --brand:#0b57d0;
  --brand-ink:#0a3ea3;
  --text:#111827;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-alt:#f7f9fc;
  --card:#ffffff;
  --border:#e5e7eb;
  --radius:18px;
  --shadow:0 8px 24px rgba(2,6,23,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Quicksand", Sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.politica{color:cornflowerblue;}
img{max-width:100%;height:auto;display:block}
#propuesta img{height:90px;}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-ink);text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:10}
.header-inner{display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;min-height:72px}
.logo img{display:block}
.main-nav{display:flex;gap:20px;justify-self:right}
.main-nav a{font-weight:500;color:#111827}
.phone{font-weight:700}
.menu-toggle{display:none;border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px}

/* Hero */
.hero{
  background:linear-gradient(180deg,#f7f9fc 0%, #ffffff 100%);
  padding:64px 0;
}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.hero h1{font-size:40px;line-height:1.15;margin:0 0 16px}
.lead{font-size:18px;color:var(--muted);margin:0}

/* CTA card */
.cta-card{
  background:rgba(0,0,0,0.65);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  display:flex;flex-direction:column;gap:12px;
  color:white;
}
.cta-card h2{margin:0 0 8px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600}
input[type="text"],input[type="email"],input[type="tel"]{
  appearance:none;border:1px solid var(--border);border-radius:12px;padding:12px 14px;
  font-size:16px;outline:none;
}
input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,87,208,.15)}
.checkbox{flex-direction:row;align-items:center;gap:10px;font-weight:400}
.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.btn-primary{background:#ff6600;color:#fff}
.btn-primary:hover{background:#ff6600}

/* Section */
.section{padding:64px 0}
.section.alt{background:var(--bg-alt)}
.section-title{font-size:28px;margin:0 0 24px}

/* Cards */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:20px;text-align:center;}
.card h3{margin:12px 0 8px;font-size:18px;}
.card p{margin:0;color:#374151}
.card img {
  display: block;          /* elimina inline spacing */
  margin: 0 auto 12px;     /* centra horizontalmente y añade margen inferior */
}
.card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card img {
  margin-bottom: 12px;
}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{display:flex;gap:12px;border:1px solid var(--border);border-radius:16px;padding:16px;background:#fff}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover}
.review-head{display:flex;gap:10px;align-items:center}
.date{color:var(--muted);font-size:12px}

/* Reels */
.reels-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.reel{display:block;border:1px dashed var(--border);border-radius:14px;padding:16px;text-align:center;font-weight:600}

/* Guide */
.guide-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.inline-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.inline-form label{min-width:0}
.inline-form .checkbox{grid-column:1/-1}
.inline-form .btn{justify-self:start}

/* Posts */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{border:1px solid var(--border);border-radius:16px;padding:16px;background:#fff}
.post h3{margin-top:0;font-size:18px}
.post-link{font-weight:700}

/* Footer */
/* Footer base */
.site-footer{border-top:1px solid var(--border);background:#fff;padding:35px;}
.footer-grid{
  display:grid; gap:24px; padding:32px 0;
  grid-template-columns: 2fr 1fr 1fr; /* 3 columnas como el original */
}

/* Titulares */
.footer-title{margin:0 0 10px; font-size:18px; font-weight:700; color:#111827}

/* Lista de contacto con iconos */
.contact-list, .help-list{list-style:none; margin:0; padding:0}
.contact-list li, .help-list li{
  display:flex; align-items:flex-start; gap:10px;
  padding:7px 0; color:#111827;
}
.contact-list a, .help-list a{ color:var(--brand); text-decoration:none }
.contact-list a:hover, .help-list a:hover{ text-decoration:underline }
.ico{
  width:18px; height:18px; margin-top:3px; flex:0 0 18px; color:#6b7280;
}
.ico svg{ width:18px; height:18px; fill:currentColor }

/* Chevron en Ayuda */
.chev{ color:#9ca3af; width:14px; display:inline-block; margin-top:2px }

/* Sellos/logos */
.footer-seals{ display:flex; flex-direction:column; align-items:flex-end; gap:10px }
.footer-seals .aicat{ max-width:260px; height:auto }
.footer-seals .api{ max-width:260px; height:auto }
.api-wrap{ display:flex; align-items:center; gap:10px; color:#6b7280; font-size:14px }

/* Línea legal */
.legal{ border-top:1px solid var(--border); padding:14px 0; color:#6b7280; font-size:14px }

/* Responsive */
@media (max-width: 1000px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-seals{ align-items:flex-start }
}
@media (max-width: 640px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-seals{ align-items:flex-start }
}
.legal{border-top:1px solid var(--border);padding:16px 0;color:var(--muted);font-size:14px}

/* Responsive */
@media (max-width: 1000px){
  .hero-grid{grid-template-columns:1fr}
  .guide-grid{grid-template-columns:1fr}
  .reels-grid{grid-template-columns:repeat(2,1fr)}
  .posts-grid,.cards-grid,.reviews{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .main-nav{display:none}
  .menu-toggle{display:block;justify-self:end}
}
@media (max-width: 640px){
  .cards-grid,.reviews,.posts-grid,.reels-grid{grid-template-columns:1fr}
  .inline-form{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

.hero-video{position:relative;isolation:isolate}
.hero-video__media{
  width:100%;height:56.25vw;max-height:80vh;object-fit:cover;display:block;
}
.hero-video__overlay{
  position:absolute;inset:0;display:grid;place-content:center;
  padding:min(6vw,48px);color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.35);
}

.video{max-width:960px;margin:24px auto}
.video video{display:block;aspect-ratio:16/9}

.hero {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #E2EAF4 100%);
  padding: 64px 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* izquierda: vídeo y título / derecha: formulario */
  gap: 32px;
  align-items: start;
  align-items: center;
}

.hero-left h1 {
  font-size: 40px;
  margin-bottom: 20px;
}

.video video {
  width: 100%;
  height: 600px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  background-color:#000;
}

/* Responsive: en móvil apila todo */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .cta-card {
    margin-top: 32px;
  }
}

#propuesta{
  background-color:white;
}
.section-title{
  text-align: center;
  font-size:34px;
}

/* Título */
.reviews-title{
  text-align:center;
  margin-bottom: 18px;
}

/* Carrusel base */
.reviews-carousel{
  position:relative;
  margin: 0 auto 14px;
}
.reviews-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: minmax(280px, 1fr);
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding: 6px 48px;                 /* deja hueco para las flechas */
}
.reviews-track:focus{ outline: none; }

/* Card */
.review-card {
  position:relative;
  text-align:center;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:46px 20px 24px; /* más padding arriba por el avatar */
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.review-date {
  font-size:13px;
  color:#6b7280;
  margin-bottom:6px;
  display:block;
}
.review-stars {
  display:flex;
  justify-content:center;
  gap:4px;
  margin-bottom:10px;
}
.review-stars .star {
  width:16px; height:16px;
  fill:#f59e0b;
}
.review-text {
  font-size:15px;
  color:#374151;
  margin:0 0 8px;
  line-height:1.4;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  display:-webkit-box;
  overflow:hidden;
}
.review-more {
  font-weight:600;
  color:#0b57d0;
  text-decoration:none;
}
.review-more:hover { text-decoration:underline; }

.review-avatar {
  position:absolute;
  top:-32px; left:50%;
  transform:translateX(-50%);
  width:64px; height:64px;
  border-radius:50%;
  overflow:hidden;
  background:#f3f4f6;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  margin-top:45px;
}
.review-avatar img {
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.review-avatar .review-g {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-avatar .review-g svg {
  width: 100%;
  height: 100%;
  display: block;
}

.g-badge{
  position:absolute; right:-2px; bottom:-2px;
  width:20px; height:20px; border-radius:50%;
  background:#1a73e8; color:#fff; font-weight:700;
  display:grid; place-items:center; font-size:12px; line-height:1;
  border:2px solid #fff;
}

/* Info */
.review-name{ margin:52px 0 4px; font-size:18px; font-weight:700; color:#111827;}
.review-date{ display:block; font-size:12px; color:#6b7280; margin-bottom:8px; }
.review-stars{ display:flex; justify-content:center; gap:6px; margin-bottom:10px; }
.star{ width:18px; height:18px; fill:#f59e0b; }

/* Texto con clamp + enlace */
.review-text{
  margin:0 0 10px; color:#374151;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.review-more{ font-weight:600; color:var(--brand); text-decoration:none; }
.review-more:hover{ text-decoration:underline; }

/* Flechas */
.reviews-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px; border:0;
  background:#fff; box-shadow:0 8px 24px rgba(2,6,23,.16);
  color:#111827; font-size:22px; line-height:36px; cursor:pointer;
}
.reviews-arrow.prev{ left:8px; }
.reviews-arrow.next{ right:8px; }

/* Resumen inferior */
.reviews-summary{
  text-align:center; color:#6b7280; margin:18px 0 0;
}

/* 3 tarjetas visibles en desktop, 2 en tablet, 1 en móvil */
@media (min-width: 1100px){
  .reviews-track{ grid-auto-columns: calc((100% - 2*24px - 96px) / 3); } /* 3 col, gap y paddings para flechas */
}
@media (min-width: 720px) and (max-width: 1099.98px){
  .reviews-track{ grid-auto-columns: calc((100% - 24px - 96px) / 2); }   /* 2 col */
}
@media (max-width: 719.98px){
  .reviews-track{ grid-auto-columns: calc(100% - 96px); }                /* 1 col */
}
.reviews-track{
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE/Edge legacy */
  scroll-behavior: smooth;
  margin-top:43px;
}
.reviews-track::-webkit-scrollbar{ display:none; }  /* WebKit */

/* Evita que el teléfono se parta en líneas */
.phone{ white-space:nowrap; }

/* ====== MÓVIL ====== */
@media (max-width: 900px){
  .header-inner{
    grid-template-columns: auto 1fr auto; /* logo | espacio | botón */
    align-items: center;
  }

  /* Ocultamos navegación de desktop y el teléfono del header */
  .main-nav{ display:none !important; }

  /* Botón hamburguesa */
  .menu-toggle{
    display:block;
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    padding:8px 10px;
  }
}

.phones {
  display: flex;
  gap: 20px; /* espacio entre los dos */
  align-items: center;
}

.phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: inherit; /* 🔥 hereda color del header, no verde/azul */
  text-decoration: none;
}

/* Header layout */
.header-inner{
  display:grid;
  grid-template-columns: auto 1fr auto auto; /* logo | espacio | phones | hamburguesa */
  align-items:center;
  gap:16px;
}

/* Logo un poco mayor */
.logo img{ max-height:52px }

/* Teléfonos: a la derecha en desktop */
.phones{
  justify-self:end;              /* 🔥 empuja a la derecha */
  display:flex;
  gap:20px;
  align-items:center;
}
.phone{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  color:inherit;                  /* sin colores especiales */
  text-decoration:none;
  white-space:nowrap;             /* no partir números */
}

/* Menú móvil cerrado por defecto */
.mobile-nav{ display:none; flex-direction:column; padding:12px 20px; border-bottom:1px solid var(--border); background:#fff }
.mobile-nav.open{ display:flex }
.mobile-nav .phone{ padding:12px 0; }

/* Responsive: en móvil escondemos los teléfonos del header y los mostramos en el menú */
@media (max-width: 900px){
  .phones{ display:none; }
  .menu-toggle{ display:block; }
}
.phone svg {
  flex-shrink: 0;
  vertical-align: middle;
}

/* Sección de vídeo horizontal */
.video-wide{
  margin: 12px 0 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(2,6,23,.10);
}

/* 16:9 fluido y nítido */
.video-wide video{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* moderno; mantiene 16:9 */
  display: block;
  background: #000;       /* evita parpadeo blanco antes del poster */
}

/* Accesibilidad: oculto visual pero disponible a lectores */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.lang-switch{ justify-self:end; }
.lang-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px;
  text-decoration:none; color:inherit; font-weight:600;
  background:#fff;
}
.lang-chip svg {
  border-radius:2px; /* esquinas suaves */
  flex-shrink:0;
}
.lang-chip:hover{ background:#f8fafc; border-color:#d1d5db; }
@media (max-width:900px){
  .header-inner .lang-switch{ display:none; }
  .mobile-nav .lang-switch{ display:block; padding:8px 0; }
}