/* CheckCasa landing — responsive, mobile-first */
:root{
  --brand:#37A9E1;
  --brand-dark:#0A5550;
  --ink:#1F2A2E;
  --muted:#6B7A80;
  --bg:#FFFFFF;
  --brand-bg:#E6F8FC;
  --bg-soft:#F2F5F5;
  --card:#FFFFFF;
  --stroke:#D5DCDD;
  --radius:16px;
  --shadow:0 10px 30px rgba(16,24,40,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Manrope','Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block;border-radius:12px}
.container{width:min(1200px, 92%);margin:0 auto}
.section{padding:56px 0}
h1,h2,h3,h4{margin:0 0 .5em 0;line-height:1.1}
h1{font-size:clamp(36px, 7vw, 72px);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(28px, 4vw, 44px);font-weight:800;letter-spacing:-.01em}
h3{font-size:clamp(22px, 2.6vw, 28px);font-weight:800}
.lead{max-width:680px;margin:0 auto 24px;color:var(--muted)}

.brand{color:var(--brand)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.9rem 1.2rem;border-radius:12px;border:1px solid transparent;
  font-weight:700;text-decoration:none;cursor:pointer;transition:.2s ease;
}
.btn.sm{padding:.6rem .9rem;border-radius:10px}
.btn.primary{background:#167A96;color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.outline{border-color:var(--ink);color:var(--ink);background:#fff}
.btn.outline:hover{background:#F4F7F7}
.btn.center{display:block;margin:16px auto 0}

.small{font-size:.875rem}
.muted{color:var(--muted)}

/* Header */
.site-header{position:sticky;top:0;background:#fff;z-index:10;border-bottom:1px solid #eef2f2}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.menu{display:none;gap:24px}
.menu a{color:#223035;text-decoration:none;font-weight:600}
.menu.open{display:flex;position:absolute;left:0;right:0;top:64px;background:#fff;padding:16px;flex-direction:column;border-bottom:1px solid #eef2f2}

.lang-phone{display:flex;align-items:center;gap:12px}
.langs button{background:#fff;border:1px solid #e6ecec;border-radius:8px;padding:.35rem .5rem;cursor:pointer}
.phone{color:#15A9D6;text-decoration:none;font-weight:700}
.burger{width:42px;height:42px;border:1px solid #e6ecec;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{content:'';display:block;height:2px;width:18px;background:#1b2a2e;position:relative;transition:.2s}
.burger span::before{position:absolute;top:-6px}
.burger span::after{position:absolute;top:6px}
.burger.open span{background:transparent}
.burger.open span::before{top:0;transform:rotate(45deg)}
.burger.open span::after{top:0;transform:rotate(-45deg)}

/* Grids */
.grid-2{display:grid;grid-template-columns:1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:1fr;gap:16px}
.gap-lg{gap:40px}
.v-center{align-items:center}

/* Hero */
.hero{padding:48px 0 24px}
.hero-copy p{color:var(--muted);max-width:540px;margin:0 0 16px}
.hero-media{position:relative}
.photo-card{background:var(--card);padding:8px;border-radius:16px;box-shadow:var(--shadow)}
.photo-card img{border-radius:12px}
.angled{position:relative}
.angled::before,.angled::after{
  content:'';position:absolute;background:var(--brand);width:32px;height:90px;border-radius:6px;
}
.angled::before{left:-12px;top:40px;transform:skewX(-12deg)}
.angled::after{right:-12px;bottom:20px;transform:skewX(-12deg)}

/* Band + about */
.band-top,.faq{background:var(--bg-soft)}
.band{height:56px;background:var(--brand);}
.about .text p{color:var(--muted)}

/* Why */
.why h2{text-align:center;}
.why .card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:20px}
.card.outline{box-shadow:none;border:2px solid #222;border-radius:14px}
.why .why-list{margin:0 0 8px 1.2rem;display:grid;gap:.5rem}

/* Process */
.process .steps .step-k{color:var(--brand);font-weight:800;margin:.5rem 0 0}
.process .steps h3{margin:.2rem 0 .4rem}
.process .steps p{color:var(--muted);margin:0 0 .8rem}

/* Support + reviews */
.support .reviews{margin-top:48px}
.rating{border:2px solid var(--ink);border-radius:14px;padding:16px;max-width:640px}
.stars{letter-spacing:3px;font-size:20px;color:#F5B301}
.cards{margin-top:18px}
.review{border:1px solid var(--stroke);border-radius:14px;padding:16px;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.04)}
.review .initial{width:36px;height:36px;border-radius:50%;background:#1b3a34;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:8px}
.review .initial.purple{background:#6A4CFF}

/* FAQ */
.faq .faq-item{border-top:2px solid #112; padding:12px 0}
.faq .faq-item:last-of-type{border-bottom:2px solid #112}
.faq summary{cursor:pointer;font-weight:800}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:var(--muted)}

/* Contact */
.contact{background:#E9FAFB}
.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;font-weight:700}
input,textarea{border:1.5px solid #cfe5e6;border-radius:12px;padding:.9rem .9rem;font-size:1rem;background:#fff}
.checkbox{display:flex;align-items:center;gap:.6rem;font-weight:600}
.checkbox a{color:#0D8FB4}

/* Footer */
.site-footer{padding:28px 0;border-top:1px solid #eef2f2}

/* Larger screens */
@media (min-width: 768px){
  .menu{display:flex}
  .burger{display:none}
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .hero{padding:72px 0 40px}
  .photo-card{padding:12px}
  .angled::before,.angled::after{width:40px;height:120px}
}

@media (min-width: 1200px){
  .container{width:min(1180px, 88%)}
  h1{font-size:50px}
  .hero-copy p{font-size:26px}
}
.btn.center {
  display: inline-block;   /* en lugar de block */
  margin: 24px auto 0;     /* lo centra */
  text-align: center;
  width: auto;             /* asegura que solo ocupe lo necesario */
  padding: .9rem 1.8rem;   /* puedes darle un poco más de padding */
}
.card.outline {
  text-align: center;  /* centra todo el contenido inline, incluido el botón */
}
.card.outline h3,
.card.outline p,
.card.outline ol {
  text-align: left;    /* devolvemos a la izquierda los textos */
}
.tools-title{
  text-align:center;
  margin-bottom:28px;
}

/* Herramientas institucionales */
.tools-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  margin-bottom:24px;
}
.tool-card.centered{
  text-align:center;
  background:#fff;
  border-radius:16px;
  padding:24px 16px;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
}
.logo-box{
  display:flex;
  align-items:center;
  justify-content:center;
  height:120px;
  margin-bottom:16px;
}
.logo-box img{
  max-width:80%;
  max-height:100%;
  object-fit:contain;
}
.tool-name{
  font-size:18px;
  font-weight:800;
  margin:0 0 6px;
}
.tool-desc{
  font-size:15px;
  color:var(--muted);
  margin:0 auto;
  max-width:280px;
}

/* Responsive 2x2 */
@media (min-width:768px){
  .tools-grid{ grid-template-columns:repeat(2,1fr); }
}


/* CTA centrado */
.btn.center{
  display:inline-block;
  margin:24px auto 0;
  width:auto;
  text-align:center;
  padding:.9rem 1.8rem;
}
.tools-grid-alt{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin-top:28px;
}

.tool-alt{
  display:flex;
  flex-direction:column;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(16,24,40,.08);
  background:#fff;
  text-align:center;
}
.tool-alt img{
  width:100%;
  height:220px;
  object-fit:cover;
}
.tool-alt h3{
  margin:12px 0 4px;
  font-weight:800;
  font-size:18px;
}
.tool-alt p{
  margin:0 16px 16px;
  color:var(--muted);
  font-size:15px;
  line-height:1.45;
}

@media(min-width:768px){
  .tools-grid-alt{
    grid-template-columns:repeat(2,1fr);
  }
  .tool-alt img{
    height:240px;
  }
}

/* Centrar CTA de la sección Tools (2x2) */
.tools .btn.center{
  display: block;         /* bloque para que funcione margin auto */
  margin: 24px auto 0;    /* centra horizontalmente */
  width: max-content;     /* ancho al contenido (fallback: auto si no soporta) */
  /* padding opcional si lo quieres un pelín más ancho */
  /* padding: .9rem 1.8rem; */
}
.why{background:var(--bg-soft)}

.resolvemos.bg-brand, .process{ background: var(--brand-bg); }

/* Tarjeta superior con gradiente y contenido centrado */
.header-card{
  border-radius: 18px;
  padding: 28px 20px;
  background: linear-gradient(180deg, rgba(34,184,230,.22), rgba(34,184,230,.06));
  box-shadow: 0 8px 24px rgba(16,24,40,.06);
  margin-bottom: 20px;
  text-align: center;
}
.resolv-title{
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  color: #0F2E2B;
  margin: 0 0 6px;
}
.resolv-lead{
  color: var(--muted);
  max-width: 900px;
  margin: 0 auto 14px;
}
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }

/* Badges */
.badges{ 
  display:flex; gap:14px 18px; justify-content:center; flex-wrap:wrap; 
  padding:0; margin:10px 0 0; list-style:none;
}
.badges li{
  display:flex; align-items:center; gap:8px;
  background:#fff; color:#193533; border:1px solid #D9E9EE;
  border-radius:999px; padding:8px 12px; font-weight:700;
}
.badges .ico{ font-size:14px; line-height:1; }

/* Tarjeta “Lo que resolvemos” */
.resolv-card{ margin-top:18px; }
.resolv-card-title{ font-size:clamp(20px,2.2vw,24px); margin:0 0 14px; }

.features{
  display:grid; grid-template-columns:1fr; gap:14px;
}
.feature{
  display: flex;                 /* en lugar de grid */
  align-items: center;           /* centra verticalmente icono + texto */
  gap: 12px;
  background:#fff;
  border:1px solid #E5EEF0;
  border-radius:14px;
  padding:14px;
  box-shadow: 0 4px 14px rgba(17, 24, 39, .05);
}

.f-ico{
  flex: 0 0 40px;                /* tamaño fijo */
  height: 40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;        /* icono centrado en su cajita */
  color:#1E6C78;
  background:#EAF6FA;
  border:1px solid #D6ECF3;
}

.feature h4{ margin:0 0 4px; font-size:16.5px; font-weight:800; }
.feature p{ margin:0; color:var(--muted); }

/* CTA heredará tus estilos .btn .primary .outline */

/* Responsive */
@media (min-width: 768px){
  .header-card{ padding: 36px 32px; }
  .features{ grid-template-columns:repeat(2, 1fr); gap:16px; }
}
.resolvemos .card.outline{
  border: none !important;
}
.card.outline h3{
  text-align: center;
  padding:24px;
}

/* Drawer oculto por defecto */
.drawer{display:none}

/* Botón ancho dentro del drawer */
.btn.block{display:block;width:100%;text-align:center;border-radius:14px}

/* MÓVIL: esconder lo de desktop y activar drawer */
@media (max-width: 767px){
  .menu{display:none !important;}
  .lang-phone > .langs,
  .lang-phone > .phone,
  .lang-phone > .btn{ display:none !important; } /* se muestran dentro del drawer */
  .burger{display:flex;} /* asegúrate de que el burger se vea en móvil */

  .drawer{
    position: fixed;
    inset: 64px 0 0 0;          /* debajo del header */
    background:#fff;
    border-top:1px solid #eef2f2;
    display:none;
    z-index: 49;
  }
  .drawer.open{ display:block; }

  .drawer .drawer-inner{ padding:16px; }

  .nav-links{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:10px}
  .nav-links a{display:block;padding:10px 0;font-weight:700;color:#223035;text-decoration:none;border-bottom:1px solid #eef2f2}
  .nav-links a:last-child{border-bottom:none}

  .menu-extras{display:grid;gap:12px;margin-top:8px}
  .menu-extras .langs{display:flex;gap:8px}
  .menu-extras .langs button{background:#fff;border:1px solid #e6ecec;border-radius:10px;padding:.4rem .55rem;cursor:pointer}
  .menu-extras .phones{display:flex;flex-direction:column;gap:6px}
  .menu-extras .phones a{color:#15A9D6;text-decoration:none;font-weight:800}
}

/* DESKTOP: no cambies nada; el drawer permanece oculto */
@media (min-width: 768px){
  .drawer{display:none !important;}
}

/* Drawer móvil: pantalla completa, sin márgenes del .container */
@media (max-width: 767px){
  .drawer{
    position: fixed;
    inset: 0;                     /* top/right/bottom/left: 0 */
    background:#fff;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 999;                 /* por encima del header */
    display:block;                /* siempre existe, se anima dentro/fuera */
  }
  .drawer.open{ transform: translateX(0); }

  /* fondo semitransparente opcional */
  .drawer::before{
    content:"";
    position:absolute; inset:0;
    background: rgba(17, 24, 39, .35);
    pointer-events: none;
  }

  /* Panel de contenido deslizante */
  .drawer .drawer-inner{
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;    /* panel a pantalla completa */
    background:#fff;
    padding: 20px;
    max-width: none;                          /* evita límites del .container */
    overflow-y: auto;
  }

  /* Cerrar (X) en la esquina */
  .drawer .close{
    position: absolute;
    top: 12px; right: 12px;
    width: 40px; height: 40px;
    border-radius: 12px;
    border: 1px solid #e6ecec;
    background:#fff;
    display:grid; place-items:center;
    font-size: 22px; line-height: 1;
    z-index: 1;
  }

  /* Lista y extras */
  .nav-links{list-style:none;margin:64px 0 16px;padding:0;display:flex;flex-direction:column;gap:12px}
  .nav-links a{display:block;padding:12px 0;font-weight:800;color:#223035;text-decoration:none;border-bottom:1px solid #eef2f2}
  .nav-links a:last-child{border-bottom:none}

  .menu-extras{display:grid;gap:14px}
  .menu-extras .langs{display:flex;gap:10px}
  .menu-extras .langs button{background:#fff;border:1px solid #e6ecec;border-radius:12px;padding:.45rem .6rem}
  .menu-extras .phones a{color:#22B8E6;font-weight:800;text-decoration:none}

  /* CTA ancho sin desbordar */
  .btn.block{
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    text-align:center;
    border-radius:16px;
  }

  /* Oculta elementos duplicados fuera del drawer en móvil */
  .menu{display:none !important;}
  .lang-phone > .langs,
  .lang-phone > .phone,
  .lang-phone > .btn{ display:none !important; }
}

/* Evitar scroll de fondo cuando el drawer está abierto */
html.no-scroll, body.no-scroll { overflow: hidden; }

/* ===== Drawer estilo "inmobity" ===== */
@media (max-width: 767px){
    .logo img{width:180px; !important}

  /* Oculta lo de desktop dentro del header */
  .menu{display:none !important;}
  .lang-phone > .langs,
  .lang-phone > .phone,
  .lang-phone > .btn{ display:none !important; }
  .burger{display:flex;}

  .drawer{
    position: fixed; inset: 0; z-index: 999;
    pointer-events: none;       /* solo interactúan backdrop/panel cuando open */
  }
  .drawer-backdrop{
    position:absolute; inset:0;
    background: rgba(17,24,39,.35);
    opacity:0; transition:opacity .25s ease;
  }
  .drawer-panel{
    position:absolute; top:0; right:0; bottom:0;
    width:92vw; max-width:520px;           /* panel centrado tipo inmobity */
    background:#fff; border-left:1px solid #E7ECEE;
    box-shadow: -30px 0 60px rgba(17,24,39,.15);
    transform: translateX(100%); transition: transform .25s ease;
    border-top-left-radius:16px; border-bottom-left-radius:16px;
    padding:20px 18px 24px;
    pointer-events:auto;
  }
  .drawer.open .drawer-backdrop{ opacity:1; pointer-events:auto; }
  .drawer.open .drawer-panel{ transform: translateX(0); }

  /* Botón cerrar redondeado */
  .drawer-close{
    position:absolute; top:12px; right:12px;
    width:44px; height:44px; border-radius:14px;
    border:1px solid #E6ECEC; background:#fff;
    display:grid; place-items:center; font-size:22px;
  }

  /* Enlaces */
  .nav-links{list-style:none; margin:64px 0 16px; padding:0;
    display:flex; flex-direction:column; gap:14px}
  .nav-links a{display:block; padding:12px 0; font-weight:800;
    color:#2B3335; text-decoration:none; border-bottom:1px solid #EEF2F3}
  .nav-links a:last-child{border-bottom:none}

  /* Extras */
  .menu-extras{display:grid; gap:16px}
  .langs{display:flex; gap:10px}
  .langs button{
    background:#fff; border:1px solid #E6ECEC; border-radius:14px;
    padding:.5rem .8rem; font-size:18px; line-height:1; cursor:pointer;
    box-shadow:0 2px 6px rgba(16,24,40,.05);
  }
  .phones{display:flex; flex-direction:column; gap:8px}
  .phones a{color:#22B8E6; text-decoration:none; font-weight:800}

  /* CTA grande y muy redondeado */
  .btn.block{display:block; width:100%; text-align:center}
  .btn.pill{border-radius:28px; padding:1rem 1.4rem; font-size:1.05rem}
}

/* Bloquear scroll cuando está abierto */
html.no-scroll, body.no-scroll{ overflow:hidden; }


/* Vídeo responsive: ancho completo en móvil, altura controlada en desktop */
.video-wrap{
  display:flex;
  justify-content:center;
  margin: 20px 0;
}

.video-wrap video{
  width:100%;
  max-width:480px;   /* móvil/tablet: no más de 480px de ancho */
  height:auto;
  border-radius:16px;
  display:block;
}

@media (min-width: 992px){
  /* En desktop: controla el ALTO y deja el ancho auto (formato vertical) */
  .video-wrap video{
    width:auto;                /* evita que rellene toda la columna */
    height:min(70vh, 520px);   /* tope visual: 520px o 70% de la ventana */
    max-width:100%;            /* por si el vídeo no puede crecer más */
  }
  /* si lo tienes dentro de .photo-card, evita desbordes */
  .photo-card{ overflow:hidden; }
}
/* ---- FIX checkbox en línea ---- */
.form label.checkbox{
  display: flex !important;     /* vence al display:grid */
  align-items: center;
  gap: .6rem;
  font-weight: 600;              /* o 400 si lo quieres más ligero */
}

.form label.checkbox input[type="checkbox"]{
  margin: 0;                     /* quita margen extraño */
  inline-size: 18px;             /* tamaño visual coherente */
  block-size: 18px;
  accent-color: #1A94B8;         /* azul marca en navegadores modernos */
  vertical-align: middle;
}

.form label.checkbox a{
  text-decoration: underline;    /* opcional */
}

/* si el texto se va a 2 líneas, que mantenga la alineación */
.form label.checkbox{ flex-wrap: wrap; }


.site-footer {
  background: #0077B6; /* azul fuerte */
  color: #fff;
  padding: 40px 20px 20px;
  font-size: 15px;
  line-height: 1.6;
}

.site-footer a {
  color: #BBE9FF; /* azul claro para enlaces */
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  margin-bottom: 30px;
}

.footer-col h4 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 15px;
  text-align: center;
  font-size: 14px;
  color: #eee;
}

/* === S3 WHY – lavado de cara === */
.section.why{
  background: #E6F8FC;                          /* banda suave a ancho completo */
  padding: 48px 0 64px;
}

.section.why > .container > h2{
  text-align:center;
  font-weight: 900;
  line-height: 1.12;
  margin: 0 0 8px;
}
.section.why > .container > .lead{
  text-align:center;
  color:#5E6B71;
  max-width: 70ch;
  margin: 0 auto 22px;
}

/* Tarjeta principal */
.section.why .card.outline{
  background:#fff;
  border: 1px solid #E3ECEF;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(17,24,39,.08);
  padding: 22px 20px 24px;
  max-width: 980px;
  margin: 0 auto;                                /* centrada */
}

/* Título dentro de la tarjeta */
.section.why .card.outline h3:first-of-type{
  text-align:center;
  margin: 4px 0 8px;
  font-size: clamp(18px, 2.3vw, 22px);
}

/* Subtítulo "Para qué:" */
.section.why .card.outline h3:last-of-type{
  text-align:center;
  margin: 14px 0 10px;
  font-size: clamp(18px, 2vw, 20px);
}

/* Párrafo introductorio dentro de la tarjeta */
.section.why .card.outline > p{
  color:#66757C;
  text-align:center;
  max-width: 70ch;
  margin: 0 auto 6px;
}

/* Lista -> beneficios con badge numerado */
.section.why .why-list{
  counter-reset: why;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 10px;
}
.section.why .why-list li{
  counter-increment: why;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #E8EFF2;
  border-radius: 14px;
  background:#fff;
}
.section.why .why-list li::before{
  content: counter(why);
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  color:#fff;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 6px 14px rgba(34,184,230,.25);
  background: linear-gradient(180deg,#22B8E6 0%, #1A94B8 100%);
}

/* CTA centrado y con presencia */
.section.why .btn.primary.center{
  display:block;
  width: 100%;
  max-width: 340px;
  margin: 6px auto 0;
  padding: 0.95rem 1.2rem;
  border-radius: 16px;
  background:#1A94B8;
  color:#fff;
  font-weight: 900;
  text-align:center;
}
.section.why .btn.primary.center:hover{ background:#22B8E6; }

/* Ajustes responsive */
@media (min-width: 940px){
  .section.why .card.outline{
    padding: 26px 28px 28px;
  }
  .section.why .why-list{
    gap: 12px;
  }
}

/* --- FIX: subtítulos en cada item de la lista WHY --- */
.section.why .why-list {           /* la lista completa */
  display: flex;                   /* evita grids raros heredados */
  flex-direction: column;
  gap: 10px;
}

.section.why .why-list li {        /* cada tarjeta/beneficio */
  display: flex;                   /* badge + texto en línea */
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #E8EFF2;
  border-radius: 14px;
  background: #fff;
}

/* si usas mi versión con badge mediante ::before */
.section.why .why-list li::before {
  flex: 0 0 28px;                  /* ancho fijo del círculo */
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  color: #fff; font-weight: 900;
  background: linear-gradient(180deg,#22B8E6 0%, #1A94B8 100%);
  box-shadow: 0 6px 14px rgba(34,184,230,.25);
  content: counter(why);
}

/* bloque de texto: que ocupe TODO el ancho disponible */
.section.why .why-list li > div {
  flex: 1 1 auto;
  min-width: 0;                    /* importante en flex/grids */
  white-space: normal;             /* evita “una palabra por línea” */
  word-break: normal;              /* protege palabras */
  overflow-wrap: break-word;       /* solo si hiciera falta */
}

/* por si alguna regla global mete word-break: break-all o writing-mode */
.section.why .why-list li,
.section.why .why-list li * {
  writing-mode: horizontal-tb;
}

.langs {
  display: flex;
  gap: 8px;                /* espacio entre banderas */
  align-items: center;     /* centra verticalmente */
}

.langs a {
  background:#fff;
  border:1px solid #e6ecec;
  border-radius:8px;
  padding:.35rem .5rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  text-decoration:none;
  font-size:18px;
}

.langs a img {
  width:20px;
  height:14px;
  border-radius:2px;
}