/* =====================================================================
   PANEL DE DISEÑO  ·  Cambia aquí colores y tipografía de TODA la web
   (afecta a la versión en español y en inglés a la vez)
   ===================================================================== */

/* ---------- 1. TIPOGRAFÍA ----------------------------------------------
   Para cambiar la letra:
   a) Elige un par en https://fonts.google.com
   b) Cambia la línea @import de abajo por la que te da Google Fonts
   c) Cambia --letra-titulos y --letra-texto con los nombres de las fuentes

   Combinaciones probadas (copia la línea @import y los 2 nombres):
   · Lexend + Source Sans 3   (actual: moderna y muy legible)
   · Merriweather + Open Sans (clásica, tipo colegio británico)
   · Nunito + Nunito          (redondeada y cercana)
------------------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@500;700&family=Source+Sans+3:wght@400;600&display=swap");

:root {
  --letra-titulos: "Lexend", "Segoe UI", system-ui, sans-serif;
  --letra-texto:   "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* ---------- 2. COLORES ---------------------------------------------
     Formato #RRGGBB. Elige colores en https://htmlcolorcodes.com
  -------------------------------------------------------------------- */
  --color-principal:  #1f4e79;  /* títulos, botón "Llamar", enlaces   */
  --color-acento:     #c8902e;  /* detalles: ✓ de la lista, rayitas   */
  --color-fondo:      #fbfaf7;  /* fondo de la página                 */
  --color-tarjetas:   #ffffff;  /* fondo de las tarjetas y preguntas  */
  --color-texto:      #1d2433;  /* texto normal                       */
  --color-suave:      #5b6475;  /* texto secundario                   */
  --color-lineas:     #e6e2d8;  /* bordes y separadores               */
  --color-whatsapp:   #1f8f4e;  /* botón de WhatsApp                  */

  /* ---------- 3. TAMAÑOS Y FORMAS --------------------------------- */
  --ancho-maximo:     960px;    /* ancho del contenido en ordenador   */
  --redondeo:         12px;     /* esquinas de tarjetas (0 = rectas)  */
  --tamano-texto:     17px;     /* tamaño de la letra normal          */
}

/* =====================================================================
   A PARTIR DE AQUÍ NO HACE FALTA TOCAR NADA
   ===================================================================== */
*{box-sizing:border-box}
html{font-size:var(--tamano-texto)}
body{margin:0;font-family:var(--letra-texto);background:var(--color-fondo);color:var(--color-texto);line-height:1.6}
h1,h2,h3,.logo{font-family:var(--letra-titulos);text-wrap:balance}
a{color:var(--color-principal)}
.wrap{max-width:var(--ancho-maximo);margin:0 auto;padding:0 20px}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0}
.logo{font-weight:700;color:var(--color-principal);text-decoration:none}
.lang{color:var(--color-suave);font-size:.9rem}
.hero{padding:48px 0 32px}
h1{font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.15;margin:0 0 16px;color:var(--color-principal)}
.lead{font-size:1.15rem;color:var(--color-suave);max-width:640px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;text-decoration:none;font-weight:600}
.wa{background:var(--color-whatsapp);color:#fff}
.tel{border:2px solid var(--color-principal);color:var(--color-principal)}
section{padding:32px 0;border-top:1px solid var(--color-lineas)}
h2{color:var(--color-principal);margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--color-tarjetas);border:1px solid var(--color-lineas);border-radius:var(--redondeo);padding:20px}
.card h3{margin:0 0 8px}
ul.check{padding-left:0;list-style:none}
ul.check li:before{content:"✓ ";color:var(--color-acento);font-weight:700}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:center}
.split>*{min-width:0}
.foto{width:100%;height:auto;border-radius:var(--redondeo);display:block}
.foto-portal{max-height:360px;object-fit:cover}
@media (max-width:700px){.split{grid-template-columns:1fr}}
.h1b{display:block;font-size:.55em;font-weight:500;color:var(--color-suave);margin-top:10px}
details{background:var(--color-tarjetas);border:1px solid var(--color-lineas);border-radius:calc(var(--redondeo) - 2px);padding:14px 18px;margin-bottom:10px}
summary{font-weight:600;cursor:pointer}
iframe{width:100%;height:320px;border:0;border-radius:var(--redondeo)}
footer{padding:32px 0;color:var(--color-suave);font-size:.9rem;border-top:1px solid var(--color-lineas)}
.float{position:fixed;right:16px;bottom:16px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
