/* ============================================================
   Landing styles (assets/landing.css)
   Colores corporativos disponibles:
   --primary: #004e96; --accent: #85c9b6; --yellow: #ffc107; --red: #f44336; --green: #67b34f;
   ============================================================ */

:root{
  --primary:#004e96;
  --accent:#85c9b6;
  --yellow:#ffc107;
  --red:#f44336;
  --green:#67b34f;

  /* Paleta para el hero (gradiente rojizo/dorado) */
  --hero-grad-a:#d94a7a;   /* rojo frambuesa */
  --hero-grad-b:#d39a3b;   /* dorado suave   */

  --text-dark:#12212d;
  --text-light:#ffffff;
  --container:1180px;

  --topbar-h:64px; /* altura barra superior */
}

/* Dancing Script Variable – self-hosted */
@font-face{
  font-family: "Dancing Script VF";
  src: url("/fonts/DancingScript-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;      /* rango del variable font */
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Helvetica Neue", Arial, "Noto Sans",
               "Liberation Sans", sans-serif, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text-dark);
  background:#fff;
}

/* Helpers ---------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}
.py-64{padding-block:64px}
.title{font-size:42px; line-height:1.15; margin:0 0 12px}

/* ===========================
   TOPBAR
   =========================== */
.topbar{
  position:absolute; /* sobre el hero */
  top:0; left:0; right:0;
  height:var(--topbar-h);
  display:flex; align-items:center;
  z-index:4;
  /* transparente; si quieres fondo: background:rgba(255,255,255,.06); */
}
.brand img{
  height:40px; width:auto;
  display:block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}

/* Tipografía hero ------------------------------------------- */
.display{
  font-family:"Oswald", Arial, sans-serif;
  font-weight:700;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height:1.05;
  margin: .1em 0 .25em;
  color:#fff;
}

/* Tagline centrada con la Dancing Script */
.tagline{
  font-family: "Dancing Script VF","Amelia Script","Great Vibes",cursive;
  font-size: clamp(36px, 5.2vw, 64px); /* igual o un pelín mayor que el h1 */
  line-height: 1.05;
  margin: 0 0 .6em;
  color: #fff;
  font-weight: 600;
}

/* Texto secundario (si lo usas) */
.lead{
  font-size: clamp(18px, 2.2vw, 24px);
  line-height:1.5;
  color:rgba(255,255,255,.95);
  max-width:42ch;
  margin:0 0 28px;
}

/* Botón ------------------------------------------------------ */
.btn{
  display:inline-block;
  font-weight:700;
  text-decoration:none;
  padding:14px 26px;
  border-radius:12px;
  background:#fff;
  color:#12212d;
  box-shadow: 0 10px 22px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
  margin-inline:auto;
}
.btn:hover{ transform: translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.10);}
.btn:active{ transform: translateY(0); }
.btn-pill{ border-radius:999px; padding:14px 28px; }
.btn-lg{ font-size:18px; padding:16px 32px; }

/* CTA centrada bajo los textos */
.hero__cta{
  display:flex;
  justify-content:center;
  margin-top:30px;
}

/* ===========================
   HERO con imagen + overlay
   =========================== */
.hero{
  position:relative;
  overflow:hidden;
  color:var(--text-light);
  min-height:560px; /* alto base del hero */
}

/* Monitores grandes (22" suele ser 1920px de ancho) */
@media (min-width: 1440px){
  .hero{ min-height: 800px; }
}

/* Capa de imagen a pantalla completa (usa la custom property --hero-image) */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    var(--hero-image, none) center right / cover no-repeat;
  z-index:0;
}

/* Capa de gradiente encima para mantener el look */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,
             color-mix(in srgb, var(--hero-grad-a) 58%, transparent) 0%,
             color-mix(in srgb, var(--hero-grad-b) 58%, transparent) 100%);
  z-index:1;
}

/* Contenido por encima de las capas anteriores */
.hero__inner{
  position:relative;
  z-index:2;
  /* Sumamos altura de topbar para que no tape los títulos */
  padding:calc(88px + var(--topbar-h)) 24px 160px;
  display:grid;
  align-content:center;
  min-height:660px;
  text-align:center;
}

/* OLA blanca inferior (mantiene la curvatura sobre el fondo blanco) */
.wave{
  position:absolute;
  left:0; right:0; bottom:-1px;
  z-index:3;
  line-height:0;
}
.wave svg{ display:block; width:100%; height:140px }
.wave path{ fill:#fff }

/* Responsivo ----------------------------------------------- */
@media (max-width:900px){
  .hero__inner{ padding:calc(72px + var(--topbar-h)) 20px 140px; }
}
@media (max-width:640px){
  .hero{ min-height:520px; }
  .hero__inner{ padding:calc(56px + var(--topbar-h)) 18px 120px; }
  .hero__cta .btn{ width:100%; text-align:center; }
}

/* ====== Grid 2 columnas (texto + formulario) ====== */
.section-grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr; /* texto | formulario → más ancho al form */
  gap: 48px;          /* un poco más de aire */
  padding-block: 5px;
}


@media (max-width: 960px){
  .section-grid{
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 56px;
  }
}

/* Columna de texto */
.fancy{
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  margin: 0 0 12px;
  color:#da4e6f; /* <-- nuevo color para “Vine a conèixer-nos” */
  margin-top: 40px;

}
.lead-par{
  font-size: clamp(18px, 2.1vw, 20px);
  line-height: 1.55;
  margin: 0 0 8px;
}
.copy-par{
  font-size: 17px;
  line-height: 1.65;
  margin: 10px 0;
  color: #2a2f36;
}
.copy-par strong{ color:#111; }

/* Tarjeta formulario */
.card{
  background:#fff;
  border-radius:16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  padding: 22px;
  border:1px solid rgba(0,0,0,.06);
}
.card-title{
 font-family: "Helvetica Neue", Arial, "Noto Sans",
               "Liberation Sans", sans-serif, "Apple Color Emoji","Segoe UI Emoji";
  margin: 0 0 14px;
  font-size: 20px;
  color:#12212d;
  font-weight: 700;
}

/* Campos del formulario */
.form-styled .field{
  margin-bottom:14px;
}
.form-styled label{
  display:block;
  font-size:0.9rem;
  font-weight:400;
  margin:0 0 6px;
  color:#21303b;
}
.form-styled input,
.form-styled select,
.form-styled textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  font-size:0.9rem;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form-styled textarea{ resize:vertical; }

.form-styled input:focus,
.form-styled select:focus,
.form-styled textarea:focus{
  border-color: color-mix(in srgb, var(--primary) 32%, #0000);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, #0000);
}

/* Checkbox en línea con su texto */
.form-styled .field.checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.form-styled .field.checkbox input[type="checkbox"]{
  margin-top:2px;
  width:18px; height:18px;
}

/* Botones */
.btn-primary{
    background:#da4e6f;
  color:#fff;
}
.btn-primary:hover{
    filter: brightness(1.05);
}
.btn-block{
  display:block;
  width:100%;
  text-align:center;
  padding:16px 28px;
  font-size:16px;
}

/* Nota bajo formulario */
.form-note{
  margin:10px 0 0;
  font-size:12px;
  color:#4a5660;
}

/* Ajustes cosméticos de la columna del form (alineación vertical opcional) */
.form-col{
  align-items:flex-start; /* o center si la tarjeta debe centrarse verticalmente */
}
/* Realzar foco de inputs con el color del botón */
.form-styled input:focus,
.form-styled select:focus,
.form-styled textarea:focus{
  border-color: color-mix(in srgb, #da4e6f 32%, #0000);
  box-shadow: 0 0 0 4px color-mix(in srgb, #da4e6f 14%, #0000);
}

/* Fila de dos columnas dentro del form */
.field-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Ajuste responsive: stack en móvil */
@media (max-width: 640px){
  .field-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Un pelín más de aire vertical en campos sueltos */
.form-styled .field{ margin-bottom:16px; }

/* La tarjeta puede respirar un poco más */
.card{ padding:26px; }
/* Color helper */
:root{
  /* ...lo que ya tienes... */
  --rose:#da4e6f;
}

/* Lista con checks redondos */
.checklist{
  list-style:none;
  padding: 6px 0 0;
  margin: 14px 0 16px;
  display:grid;
  gap: 30px;
}
.checklist li{
  position:relative;
  padding-left: 36px;
  line-height: 1.5;
  font-size: 1rem;
  color:#2a2f36;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0; top: 0.2em;
  width:22px; height:22px;
  border-radius:50%;
  background: var(--rose);
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.checklist li::after{
  content:"✓";
  position:absolute;
  left: 5px; top: -1px;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:900; font-size:14px;
}

/* Frases resaltadas en color corporativo */
.highlight-rose{ color: var(--rose); font-weight: 700; }

.btn-submit{
  width: 100%;
  appearance: none;
  border: none;
  outline: none;
  border-radius: 12px;
  background: #da4e6f; /* #da4e6f (tu rose) */
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 14px 18px;
  cursor: pointer;
}
.btn-submit:disabled{
  opacity: .6;
  cursor: not-allowed;
}


.typewriter{
  margin-top: 60px;
  display: grid;
  gap: 8px;
}
.tw-line{
  font-family: "Dancing Script VF","Amelia Script","Great Vibes",cursive;
  font-weight: 600;
  font-size: clamp(32px, 6vw, 56px); /* ↑ más grande */
  line-height: 1.1;
  padding: 15px;
  text-align:center;
  color: #111; /* resto en negro */
}

/* Solo las partes coloreadas */
.tw-line .hi{
  color: var(--rose, #da4e6f);
  font-weight: 700;
}

/* Cursor SOLO en la segunda línea (para que no “espere” en la primera) */
#tw2{
  position: relative;
}
#tw2::after{
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 6px;
  vertical-align: -0.1em;
  animation: tw-caret 0.9s steps(1) infinite;
}



@keyframes tw-caret{
  0%, 50% { opacity: 1; }
  50.1%, 100% { opacity: 0; }
}

.card-title { font-weight: 800; } /* ya tienes 700; lo subo un poco */
.card-title .accent-visita{
  color: #d77f5f;          /* color solicitado */
  font-weight: inherit;    /* mantiene la negrita del título */
}

/* ===== Divider con gradiente divertido ===== */
.divider-ribbon{
  height: 32px;
  width: 100%;
  margin: 35px 0;
  /* mezcla de tu paleta: rose → hero a/b → primary → accent */
  background: linear-gradient(90deg,
    #da4e6f 0%,
    var(--hero-grad-a) 25%,
    var(--hero-grad-b) 50%,
    var(--primary) 75%,
    var(--accent) 100%
  );
  box-shadow: 0 6px 18px rgba(0,0,0,.08) inset;
}

@media (max-width: 600px){
  .divider--mobile-compact{
    margin-top: -100px;   /* “sube” 50px */
  }
}


/* ===== Grid vídeo + texto ===== */
.media-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr; /* vídeo | texto */
  gap: 40px;
  margin-top: 56px;
  align-items: center;
  padding-bottom: 56px;
}

/* Wrapper 16:9 accesible para el iframe */
.video-16x9{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* moderno */
  background: #f3f5f7;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
.video-16x9 iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Texto vistoso */
.media-title{
  margin: 0 0 10px;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.15;
  font-weight: 800;
  color: #12212d;
}
.media-title .accent{
  color: var(--hero-grad-a); /* toque frambuesa */
}
.media-sub{
  margin: 10px 0 0;
  font-size: clamp(14px, 1.8vw, 18px);
  color: #41505b;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 960px){
  .media-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .divider-ribbon{ margin: 44px 0; }
}

/* ===== Banda imagen full width con overlay suave ===== */
.band-hero{
  position: relative;
  width: 100%;
  min-height: clamp(360px, 42vw, 620px);
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
}
.band-hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--band-image, none) center center / cover no-repeat;
  z-index:0;
}
.band-hero::after{
  content:"";
  position:absolute; inset:0;
  /* Gradiente similar al hero pero más transparente */
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--hero-grad-a) 34%, transparent) 0%,
    color-mix(in srgb, var(--hero-grad-b) 34%, transparent) 100%);
  z-index:1;
}
.band-hero__inner{
  position: relative;
  z-index:2;
  text-align: center;
  padding: clamp(28px, 6vw, 64px) 24px;
  max-width: 1100px;
}
.band-hero__title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: clamp(24px, 4.6vw, 42px);
  line-height: 1.15;
  text-shadow: 0 2px 18px rgba(0,0,0,.22);
}
.band-hero__subtitle{
  margin: 0;
  font-weight: 600;
  font-size: clamp(14px, 2.2vw, 20px);
  line-height: 1.5;
  opacity: .96;
  text-shadow: 0 2px 16px rgba(0,0,0,.20);
}

/* ===== Projecte educatiu ===== */
.projects{
  padding-block: 40px;
}
.projects__title{
  margin: 0 0 18px;
  font-size: clamp(26px, 4.8vw, 40px);
  font-weight: 800;
  color: #12212d;
  text-align: center;
}
.projects__title .accent-pe{
  color: #da4e6f;
}
.video-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top:40px;
}


@media (max-width: 1024px){
  .video-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .video-grid{ grid-template-columns: 1fr; }
}

/* Reutiliza .video-16x9 de antes (ya definido) */

/* ===== Razones + CTA ===== */
.reasons{
  padding-block: 15px 45px;
  text-align: center;
}
.reasons__title{
  margin: 0 0 10px;
  font-size: clamp(26px, 4.6vw, 38px);
  font-weight: 800;
  color:#12212d;
}
.reasons__sub{
  margin: 0 auto 24px;
  max-width: 900px;
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 600;
  color:#344552;
}
.cta-lines{
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 700;
  color:#12212d;
  margin: 8px 0 18px;
}
.btn-cta{
  display: inline-block;
  background: #da4e6f;   /* consistente con tu btn-submit */
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}
.btn-cta:hover{ filter: brightness(1.05); }

/* ===== Mapa ===== */
.map-section{
  padding-block: 15px 45px;
}
.map-title{
  margin: 0 0 14px;
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 800;
  color:#12212d;
}
.map-16x9{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--hero-grad-a) 10%, #fff) 0%,
    color-mix(in srgb, var(--hero-grad-b) 10%, #fff) 100%);
}
.map-16x9 iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* ===== Footer ===== */
.site-footer{
  background:
    linear-gradient(90deg, #da4e6f 0%, var(--hero-grad-a) 25%, var(--hero-grad-b) 50%, var(--primary) 75%, var(--accent) 100%);
  color:#fff;
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  padding: 18px 24px;
  gap: 8px 16px;
}
.footer-address{
  font-weight:700;
  letter-spacing:.4px;
}
.footer-copy{
  opacity:.95;
  font-weight:600;
}
@media (max-width:640px){
  .footer-inner{ justify-content:center; text-align:center; }
}

/* Mensajes del formulario */
.alert-success{
  border-left: 6px solid #67b34f;
  background: #f0fbf3;
  color:#163a22;
  margin-top: 50px;
}
.alert-success .card-title{ color:#163a22; }
.alert-success p{ margin:6px 0 0; font-weight:600; }

.alert-error{
  margin: 6px 0 12px;
  padding: 10px 12px;
  border-left: 6px solid #f44336;
  background: #fff3f2;
  border-radius: 10px;
  color:#4a1d1a;
  margin-top: 50px;
}
.alert-error ul{ margin:6px 0 0 18px; }
.alert-error li{ margin: 4px 0; }

.form-styled input[type="date"] {
  appearance: none;
}

/* ===== Dades clau (4x2) – Responsive fix ===== */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 70px;
  margin-bottom: 70px;
  align-items: stretch;
}

/* Tarjetas base */
.kpi{
  border-radius: 22px;
  overflow: hidden;
  min-height: 180px;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  display: block;
}

/* ----- FOTOS ----- */
/* La tarjeta foto define su alto por proporción (no por contenido) */
.kpi--photo{
  margin: 0;
  padding: 0;
  background: #f3f5f7;
  aspect-ratio: 4 / 3;             /* altura controlada por el ancho */
}
.kpi--photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;                /* llena sin deformar */
}

/* ----- TEXTOS ----- */
.kpi--text{
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  padding: 22px;
  min-height: 180px;                /* altura mínima similar a las fotos */
}
.kpi-content{ max-width: 18ch; }
.kpi-big{
  font-family:"Oswald", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5.5vw, 64px);
  line-height: .95;
  letter-spacing: .5px;
}
.kpi-sub{
  margin-top: 6px;
  font-weight: 700;
  font-size: clamp(14px, 2.2vw, 22px);
  line-height: 1.2;
  opacity: .95;
}

/* Colores */
.kpi--rose{    background: #da4e6f; }
.kpi--gold{    background: #ffc107; color:#12212d; }
.kpi--primary{ background: var(--primary); }
.kpi--blue{    background: #35b1e5; }

/* Hover sutil */
.kpi{ transition: transform .15s ease; }
.kpi:hover{ transform: translateY(-2px); }

/* ===== Breakpoints ===== */
@media (max-width: 1200px){
  .kpi-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px){
  .kpi-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* MÓVIL: 1 columna, tarjetas más bajitas para evitar “pantallazos” largos */
@media (max-width: 560px){
  .kpi-grid{ grid-template-columns: 1fr; gap: 16px; }
  .kpi--photo{ aspect-ratio: 16 / 10; } /* un poco más panorámica en móvil */
  .kpi--text{ min-height: 150px; padding: 18px; }
  .kpi-big{ font-size: clamp(28px, 10vw, 42px); }
  .kpi-sub{ font-size: clamp(13px, 4.2vw, 18px); }
}


/* Activa el scroll suave para anclas internas */
html { scroll-behavior: smooth; }

/* Solo móvil: subir la sección #subscribe ~50px y por el bottom 100px */
@media (max-width: 640px){
  #subscribe{
    margin-top: -50px;             /* sube visualmente la sección */
    scroll-margin-top: calc(var(--topbar-h) + 8px); /* ancla bien al hacer clic */
    
  }
}

/* Solo móvil: subir SOLO la sección #subscribe del <main> y subir la sección #subscribe por el bottom 100px */
@media (max-width: 640px){
  main > section#subscribe{
    transform: translateY(-50px);     /* la sube visualmente 20px */
    scroll-margin-top: calc(var(--topbar-h) + 8px); /* anclaje correcto al hacer scroll suave */
    margin-bottom: -100px;
  }
}


/* HERO con vídeo */
.hero.has-video::before{
  /* si hay vídeo, anulamos la imagen de fondo */
  background: none !important;
}

.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* rellena sin deformar */
  z-index: 0;              /* por debajo del contenido */
}

/* Respeta usuarios con reducción de movimiento o móviles muy pequeños:
   en esos casos oculta el vídeo y usa el poster/imagen */
@media (max-width: 520px), (prefers-reduced-motion: reduce){
  .hero-video{ display: none; }
  .hero.has-video::before{
    background: var(--hero-image, url('https://lestonnacbcn.org/images/portada_etapas.jpg')) center right / cover no-repeat !important;
  }
}

/* Layout topbar: alinea a la derecha el select */
.topbar .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.lang-select select{
  padding:6px 10px; border:1px solid #e0e0e0; background:#fff;
  border-radius:999px; font-size:13px; line-height:1; cursor:pointer;
}
/* Accesibilidad visual oculta */
.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;
}

/* 🔒 Oculta por completo la barra superior de Google y corrige el desplazamiento */
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }

/* 🔒 Oculta branding/links de Google (opcional) */
.goog-logo-link, .goog-te-gadget span { display:none !important; }
.goog-te-gadget { font-size:0 !important; }


.lang-select{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; background:#fff; border:1px solid #ddd; border-radius:8px;
}
.lang-select .flag{
  width:22px; height:16px; background-size:cover; background-position:center; border-radius:2px;
  flex:0 0 22px;
}
.lang-select select{
  border:none; background:transparent; outline:none; font:600 14px/1.2 system-ui, -apple-system, Arial, sans-serif;
  padding:0; cursor:pointer;
}

/* Mapea el atributo data-flag del contenedor a cada imagen */
.lang-select[data-flag="ca"] .flag{ background-image:url("https://cdn.gtranslate.net/flags/svg/ca.svg"); }
.lang-select[data-flag="es"] .flag{ background-image:url("https://cdn.gtranslate.net/flags/svg/es.svg"); }
.lang-select[data-flag="en"] .flag{ background-image:url("https://cdn.gtranslate.net/flags/svg/en.svg"); }
.lang-select[data-flag="pt"] .flag{ background-image:url("https://cdn.gtranslate.net/flags/svg/pt.svg"); }
.lang-select[data-flag="it"] .flag{ background-image:url("https://cdn.gtranslate.net/flags/svg/it.svg"); }
.lang-select[data-flag="zh-CN"] .flag{ background-image:url("https://cdn.gtranslate.net/flags/svg/zh-CN.svg"); }
.lang-select[data-flag="fr"] .flag{ background-image:url("https://cdn.gtranslate.net/flags/svg/fr.svg"); }
.lang-select[data-flag="de"] .flag{ background-image:url("https://cdn.gtranslate.net/flags/svg/de.svg"); }

/* Accesibilidad */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}






/* Oculta la barra/iframe de Google Translate y cualquier offset */
  .goog-te-banner-frame,
  .goog-te-banner-frame.skiptranslate { display: none !important; }
  body { top: 0 !important; }

  /* Oculta globos/tooltip del traductor (a veces aparecen en hover) */
  #goog-gt-tt,
  .goog-tooltip,
  .goog-tooltip:hover,
  .goog-te-balloon-frame { display: none !important; }

  /* Variantes del nuevo UI de Google (clases ofuscadas) */
  .VIpgJd-ZVi9od-ORHb-OEVmcd,
  .VIpgJd-ZVi9od-ORHb-hmp9s,
  .VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }

  /* Mantén oculto el contenedor del widget (usamos tu select propio) */
  #google_translate_element { display:none !important; }

  /* Evita cualquier scroll horizontal fantasma */
html, body { max-width: 100%; overflow-x: hidden; }

/* El botón del héroe puede ocupar ancho completo y partir en 2 líneas */
@media (max-width: 760px){
  .hero__cta .btn{
    width: 100%;
    white-space: normal;   /* 🔧 antes era nowrap: ahora puede romper línea */
    text-align: center;
  }
}

/* Ajustes de la topbar para pantallas ~720px */
@media (max-width: 760px){
  .topbar .container{ padding-inline: 12px; }
  .brand img{ height: 34px; }

  .lang-select{
    padding: 4px 8px;
    max-width: 48vw;       /* no permitas que el selector sea más de media pantalla */
    overflow: hidden;
  }
  .lang-select select{
    font-size: 12px;
    max-width: 100%;
    text-overflow: ellipsis;
  }
}

/* Por si algún SVG/iframe hace de las suyas */
header, main, footer, section{ overflow-x: clip; }

/* VIDEOS DE YOUTUBE NO CARGADOS HASTA QUE HACEN CLIC - > MOSTRAR SOLO MINIATURA Y SU TAMAÑO DEFINIDO */
.lite-yt {
  position: relative;
  display: block;
  width: 100%;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
}
.lite-yt::before {
  content: "";
  display: block;
  padding-top: calc(9 / 16 * 100%); /* 16x9 */
}
.lite-yt > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: filter .2s ease;
}
.lite-yt:hover > img { filter: brightness(0.9); }

/* Botón play */
.lite-yt .ply {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 48px;
  background: rgba(0,0,0,.6);
  border-radius: 12px;
  display: grid; place-items: center;
}
.lite-yt .ply::before{
  content:"";
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  background: #25D366;           /* verde WhatsApp */
  box-shadow: 0 8px 20px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
.wa-float:hover{ transform: translateY(-1px); }
.wa-float:active{ transform: translateY(0); }
.wa-float svg{ display:block; }
.wa-label{ white-space: nowrap; font-size: 18px;}

/* Ajustes responsive: en móviles muy estrechos, reduce padding y tamaño del texto */
@media (max-width: 420px){
  .wa-float{ padding: 10px 12px; gap: 8px; }
  .wa-label{ font-size: 13px; }
}
@media (max-width: 360px){ .wa-label{ display:none; } }

/* NOROBOTS */
.hp-field {
      position: absolute;
      left: -9999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }