:root{
  --azul:#000F76;
  --azul-medio:#4472C4;
  --terracota:#DA906E;
  --terracota-texto:#AB542C;  /* el mismo terracota, mas tostado, para cuando va sobre fondo claro */
  --texto:#383838;
  --claro:#EFF3FA;
  --oscuro:#1B1917;
  --blanco:#ffffff;
  /* Toque español */
  --pais:#C60B1E;
  --pais-suave:#FBE9EA;
  --sol:#F1BF00;

  /* ---- Tema claro / oscuro -------------------------------------------------
     Estos son los colores que CAMBIAN según el tema. El azul, el terracota y
     los colores del país de arriba no cambian: son la marca.               */
  --fondo:#ffffff;        /* el fondo de la página */
  --superficie:#ffffff;   /* tarjetas, menús, formularios */
  --superficie-2:#EFF3FA; /* secciones con fondo suave */
  --titulo:#000F76;       /* los títulos (el azul de la marca) */
  --texto-suave:#5a5f6d;  /* párrafos secundarios */
  --texto-tenue:#6b7183;  /* letra chica (oscurecida: antes no llegaba al mínimo legible) */
  --borde:#e4e9f5;        /* bordes y separadores */
  --borde-campo:#dde3f0;  /* bordes de los campos del formulario */
  --campo:#fbfcff;        /* fondo de los campos */
  --pie:#1B1917;          /* el pie de página */
  --sombra-color:0,15,118;
  --aviso-error:#B0552C;  /* el titulo del aviso de "no se pudo enviar" */
  --pie-texto:#a7abb8;    /* el pie va sobre fondo oscuro en los DOS temas, */
  --pie-tenue:#8a8f9d;    /* así que su texto tiene sus propios grises claros */
  --pie-fuerte:#c9ccd6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;color:var(--texto);font-size:16px;line-height:1.7;background:var(--fondo);overflow-x:hidden}
h1,h2,h3,h4{font-family:'Urbanist',sans-serif;color:var(--titulo);line-height:1.25}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.contenedor{max-width:1140px;margin:0 auto;padding:0 20px;overflow-x:clip}
section{padding:80px 0}

/* ===== Cinta país (toque español) ===== */
.cinta-pais{height:6px;background:linear-gradient(90deg,var(--pais) 0 33%,var(--sol) 33% 67%,var(--pais) 67% 100%);position:sticky;top:0;z-index:901;box-shadow:0 1px 1.5px rgba(0,0,0,.10)}

/* ===== Barra superior ===== */
.barra-top{background:var(--azul);color:#fff;font-size:13.5px;padding:8px 0}
.barra-top .contenedor{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.barra-top .datos{display:flex;gap:22px;flex-wrap:wrap}
.barra-top .datos span{display:flex;align-items:center;gap:7px;opacity:.92}
.barra-top svg{flex:none}

/* ===== Selector de país ===== */
.selector-pais{position:relative;font-family:'Urbanist',sans-serif;font-weight:700}
.selector-pais>button{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;padding:5px 12px;border-radius:99px;cursor:pointer;font:inherit;font-size:13px;transition:background .2s}
.selector-pais>button:hover{background:rgba(255,255,255,.25)}
.selector-pais .bandera{width:20px;height:20px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px rgba(255,255,255,.8);flex:none}
.selector-pais .bandera svg{width:100%;height:100%;display:block}
.selector-pais .flecha{transition:transform .2s}
.selector-pais.abierto .flecha{transform:rotate(180deg)}
.menu-paises{position:absolute;top:calc(100% + 10px);right:0;background:var(--superficie);border-radius:14px;box-shadow:0 12px 35px rgba(0,15,118,.22);padding:8px;min-width:210px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .22s;z-index:1000}
.selector-pais.abierto .menu-paises{opacity:1;visibility:visible;transform:translateY(0)}
.menu-paises a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--texto);font-size:14px;transition:background .15s}
.menu-paises a:hover{background:var(--superficie-2)}
.menu-paises a.actual{background:var(--pais-suave);color:var(--titulo);pointer-events:none}
.menu-paises .bandera{box-shadow:0 0 0 1.5px rgba(0,0,0,.08)}
.menu-paises small{display:block;font-family:'Manrope',sans-serif;font-weight:500;font-size:11.5px;color:var(--texto-tenue);line-height:1.2}

/* ===== Header ===== */
header{background:var(--superficie);position:sticky;top:6px;z-index:900;box-shadow:0 2px 18px rgba(0,15,118,.08)}
header .contenedor{display:flex;align-items:center;justify-content:space-between;height:104px;gap:20px}
.marca{display:flex;align-items:center;gap:14px}
.marca img{width:80px;height:auto}
.marca .nombre{font-family:'Urbanist',sans-serif;font-weight:600;font-size:29px;color:var(--titulo);letter-spacing:0;line-height:1.1}
.marca .lema{font-size:15px;color:var(--terracota-texto);font-weight:500;letter-spacing:.2px}
nav.principal{display:flex;align-items:center;gap:28px}
nav.principal>a, nav.principal .desplegable>a{font-family:'Urbanist',sans-serif;font-weight:700;font-size:15px;color:var(--texto);padding:8px 0;transition:color .2s}
nav.principal>a:hover, nav.principal .desplegable:hover>a{color:var(--titulo)}
.desplegable{position:relative}
.desplegable>a::after{content:"▾";font-size:11px;margin-left:5px;color:var(--terracota-texto)}
.submenu{position:absolute;top:100%;left:-14px;background:var(--superficie);border-radius:12px;box-shadow:0 14px 40px rgba(0,15,118,.16);padding:10px;min-width:280px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s}
.desplegable:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:9px 14px;border-radius:8px;font-size:14px;font-weight:600;color:var(--texto)}
.submenu a:hover{background:var(--superficie-2);color:var(--titulo)}
.btn-wsp-header{display:flex;align-items:center;gap:8px;background:var(--azul);color:#fff;font-family:'Urbanist',sans-serif;font-weight:700;font-size:14px;padding:11px 20px;border-radius:99px;transition:background .2s;white-space:nowrap}
.btn-wsp-header:hover{background:var(--azul-medio)}
.hamburguesa{display:none;background:none;border:none;cursor:pointer;padding:6px}
.hamburguesa span{display:block;width:26px;height:3px;background:var(--titulo);margin:5px 0;border-radius:2px;transition:.25s}

/* ===== Hero (slider con zoom lento tipo Ken Burns, como la web de España) ===== */
.hero{background:var(--azul);color:#fff;padding:110px 0;position:relative}
.hero-slides{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-slides .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 2s ease}
.hero-slides .slide.activa{opacity:1;animation:kenburns 9s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.18)}}
.hero-slides::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,15,118,.88),rgba(0,15,118,.72))}
.hero .contenedor{position:relative;z-index:2;max-width:900px;text-align:center}
.insignia-pais{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.35);padding:7px 18px;border-radius:99px;font-family:'Urbanist',sans-serif;font-weight:700;font-size:14px;margin-bottom:26px;backdrop-filter:blur(4px)}
.insignia-pais .bandera{width:22px;height:22px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.insignia-pais .bandera svg{width:100%;height:100%}
.hero h1{color:#fff;font-size:clamp(34px,5.4vw,64px);font-weight:900;margin-bottom:10px}
.hero .sub{font-family:'Urbanist',sans-serif;font-size:clamp(17px,2.2vw,22px);color:var(--terracota);font-weight:700;margin-bottom:22px}
.hero p.bajada{max-width:760px;margin:0 auto 38px;font-size:16.5px;opacity:.94}
.hero .botones{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;font-family:'Urbanist',sans-serif;font-weight:800;font-size:15px;padding:16px 42px;border-radius:99px;transition:all .22s;letter-spacing:.3px}
.btn-primario{background:var(--terracota);color:var(--azul)}
.btn-primario:hover{background:#c67a58;transform:translateY(-2px)}
.btn-borde{border:2px solid rgba(255,255,255,.7);color:#fff}
.btn-borde:hover{background:var(--superficie);color:var(--titulo)}
/* Tarjeta "Soporte 24/7" — ahora vive dentro del collage de Quiénes somos, como en España */
.tarjeta-soporte{background:var(--azul);color:#fff;border-radius:18px;padding:26px 24px;box-shadow:0 16px 40px rgba(0,15,118,.22)}
.tarjeta-soporte .cabecera{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tarjeta-soporte .icono{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex:none}
.tarjeta-soporte h3{color:#fff;font-size:18px}
.tarjeta-soporte p{font-size:13.5px;opacity:.92;line-height:1.6}

/* ===== Secciones genéricas ===== */
.etiqueta{display:inline-block;font-family:'Urbanist',sans-serif;font-weight:800;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--terracota-texto);margin-bottom:10px}
.titulo{font-size:clamp(26px,3.6vw,38px);font-weight:800;margin-bottom:18px}
.centrado{text-align:center}
.centrado .titulo{max-width:720px;margin-left:auto;margin-right:auto}
.intro{max-width:780px;margin:0 auto 20px;color:var(--texto-suave)}

/* ===== Quiénes somos (collage de dos fotos, como la web de España) ===== */
.quienes .contenedor{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.collage{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.collage .col{display:flex;flex-direction:column;gap:20px}
.collage img{width:100%;border-radius:18px;box-shadow:0 16px 40px rgba(0,15,118,.14);object-fit:cover}
.collage .col-a img{height:300px}
.collage .col-b img{height:430px}
.contador{background:var(--superficie-2);border-radius:16px;padding:26px 20px;text-align:center}
.contador .num{font-family:'Urbanist',sans-serif;font-weight:900;font-size:44px;line-height:1.1;color:var(--titulo)}
.contador .txt{font-size:14.5px;color:var(--texto)}
.quienes p{margin-bottom:16px;color:var(--texto-suave)}
/* La tarjeta azul de Soporte va DENTRO de .quienes, así que la regla de
   arriba le pintaba el texto de gris oscuro sobre el azul y no se leía.
   Con las dos clases gana ésta y el texto vuelve a ser blanco. */
.quienes .tarjeta-soporte p{color:#fff;opacity:.95}

/* ===== Servicios ===== */
.servicios{background:var(--superficie-2)}
.grilla-servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px}
.tarjeta-servicio{background:var(--superficie);border-radius:18px;overflow:hidden;box-shadow:0 8px 26px rgba(0,15,118,.07);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;text-align:left}
.tarjeta-servicio:hover{transform:translateY(-7px);box-shadow:0 18px 44px rgba(0,15,118,.14)}
.tarjeta-servicio .imagen{height:180px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--claro),#fff)}
.tarjeta-servicio .imagen img{width:auto;height:auto;max-height:135px;max-width:65%;object-fit:contain;transition:transform .4s}
.tarjeta-servicio:hover .imagen img{transform:scale(1.06)}
.tarjeta-servicio .cuerpo{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.tarjeta-servicio h3{font-size:19px;margin-bottom:10px}
.tarjeta-servicio p{font-size:14px;color:var(--texto-suave);flex:1;margin-bottom:18px}
.ver-mas{font-family:'Urbanist',sans-serif;font-weight:800;font-size:13px;letter-spacing:1.5px;color:var(--terracota-texto)}
.ver-mas:hover{color:var(--titulo)}

/* ===== CTA (con parallax: la imagen queda fija y se revela al scrollear) ===== */
.cta{background:linear-gradient(rgba(0,15,118,.62),rgba(0,15,118,.55)),url('img/1.jpg') center/cover;background-attachment:fixed;color:#fff;text-align:center;border-radius:0;padding:110px 0;text-shadow:0 1px 10px rgba(0,15,118,.5)}
.cta .etiqueta{color:var(--sol)}
.cta h2{color:#fff;font-size:clamp(24px,3.4vw,36px);font-weight:800;max-width:760px;margin:0 auto 14px}
.cta p{max-width:640px;margin:0 auto 34px;opacity:.92}

/* ===== Pasos ===== */
.pasos-grilla{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:50px}
.paso{background:var(--superficie);border:1.5px solid var(--borde);border-radius:18px;padding:32px 26px;position:relative;transition:border-color .2s,transform .2s}
.paso:hover{border-color:var(--pais);transform:translateY(-5px)}
.paso .numero{width:46px;height:46px;border-radius:50%;background:var(--azul);color:#fff;font-family:'Urbanist',sans-serif;font-weight:900;font-size:19px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.paso h3{font-size:17px;margin-bottom:8px}
.paso p{font-size:14px;color:var(--texto-suave)}

/* ===== Por qué elegirnos ===== */
.porque{background:var(--superficie-2)}
.porque-grilla{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:50px}
.razon{background:var(--superficie);border-radius:18px;padding:34px 26px;text-align:center;box-shadow:0 8px 26px rgba(0,15,118,.06)}
.razon .icono{width:62px;height:62px;margin:0 auto 18px;border-radius:16px;background:var(--pais-suave);display:flex;align-items:center;justify-content:center}
.razon h3{font-size:16.5px;margin-bottom:8px}
.razon p{font-size:13.5px;color:var(--texto-suave)}

/* ===== Secciones de dos columnas (texto izquierda, grilla derecha) como España ===== */
.dos-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
.dos-col .col-texto .intro{margin:0}
.dos-col .pasos-grilla,.dos-col .porque-grilla{grid-template-columns:repeat(2,1fr);margin-top:0}

/* ===== Contacto ===== */
.contacto-grilla{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;margin-top:46px;align-items:start}
.dato-contacto{display:flex;gap:16px;margin-bottom:24px}
.dato-contacto .icono{width:48px;height:48px;border-radius:12px;background:var(--superficie-2);display:flex;align-items:center;justify-content:center;flex:none}
.dato-contacto h4{font-size:15.5px;margin-bottom:2px}
.dato-contacto p{font-size:14.5px;color:var(--texto-suave)}
.formulario{background:var(--superficie);border-radius:20px;box-shadow:0 16px 44px rgba(0,15,118,.1);padding:38px}
.formulario .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formulario label{font-family:'Urbanist',sans-serif;font-weight:700;font-size:13.5px;color:var(--titulo);display:block;margin:14px 0 6px}
.formulario input,.formulario textarea{width:100%;border:1.5px solid var(--borde-campo);border-radius:10px;padding:12px 14px;font-family:'Manrope',sans-serif;font-size:14.5px;color:var(--texto);transition:border-color .2s;background:var(--campo)}
.formulario input:focus,.formulario textarea:focus{outline:none;border-color:var(--azul-medio)}
.formulario textarea{min-height:120px;resize:vertical}
.formulario button{margin-top:22px;width:100%;border:none;cursor:pointer}

/* ===== Footer ===== */
footer{background:var(--pie);color:var(--pie-fuerte)}
.footer-arriba{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:50px;padding:70px 0 50px}
.footer-arriba .marca .nombre{color:#fff}
.footer-arriba p{font-size:14px;margin-top:16px;color:var(--pie-texto)}
.footer-arriba h4{color:#fff;font-size:16px;margin-bottom:18px}
.footer-arriba ul{list-style:none}
.footer-arriba li{margin-bottom:10px}
.footer-arriba li a{font-size:14px;color:var(--pie-texto);transition:color .2s}
.footer-arriba li a:hover{color:var(--terracota)}
.footer-contacto span{display:block;font-size:13px;color:var(--pie-tenue)}
.footer-contacto strong{color:#fff;font-weight:600;font-size:14.5px}
.footer-paises{display:flex;gap:10px;margin-top:22px}
.footer-paises a{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:7px 14px;border-radius:99px;font-size:13px;font-weight:600;transition:background .2s}
.footer-paises a:hover{background:rgba(255,255,255,.16)}
.footer-paises .bandera{width:18px;height:18px;border-radius:50%;overflow:hidden}
.footer-paises .bandera svg{width:100%;height:100%}
.footer-abajo{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:13px}
.footer-abajo .contenedor{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ===== WhatsApp flotante ===== */
.wsp-flotante{position:fixed;bottom:26px;right:26px;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(37,211,102,.45);z-index:950;transition:transform .2s}
.wsp-flotante:hover{transform:scale(1.1)}

/* ===== Animaciones de aparición al hacer scroll (como la web de España) =====
   Las clases las asigna animaciones.js; sin JavaScript todo queda visible. */
.anim{opacity:0}
.anim.visible{animation-duration:1.25s;animation-timing-function:ease;animation-fill-mode:both;animation-delay:var(--anim-delay,0s)}
.anim-sube.visible{animation-name:fadeInUp}
.anim-baja.visible{animation-name:fadeInDown}
.anim-izq.visible{animation-name:fadeInLeft}
.anim-der.visible{animation-name:fadeInRight}
.anim-fade.visible{animation-name:fadeIn}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.anim{opacity:1!important;animation:none!important}}

/* ===== Aviso de geolocalización ===== */
.aviso-geo{position:fixed;bottom:26px;left:26px;max-width:350px;background:var(--superficie);border-left:4px solid var(--pais);border-radius:14px;box-shadow:0 14px 40px rgba(0,15,118,.22);padding:16px 42px 16px 18px;font-size:13.5px;color:var(--texto-suave);line-height:1.5;z-index:980;animation:aviso-entra .4s ease}
.aviso-geo strong{color:var(--titulo);display:block;margin-bottom:3px;font-family:'Urbanist',sans-serif;font-size:14.5px}
.aviso-geo button{position:absolute;top:8px;right:10px;border:none;background:none;font-size:17px;color:var(--texto-tenue);cursor:pointer;line-height:1}
@keyframes aviso-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ===== Responsive ===== */
@media(max-width:960px){
  .grilla-servicios{grid-template-columns:repeat(2,1fr)}
  .pasos-grilla,.porque-grilla{grid-template-columns:repeat(2,1fr)}
  .quienes .contenedor,.contacto-grilla,.dos-col{grid-template-columns:1fr}
  .footer-arriba{grid-template-columns:1fr 1fr}
  nav.principal{position:fixed;inset:0 0 0 auto;width:300px;background:var(--superficie);flex-direction:column;align-items:flex-start;padding:90px 30px 30px;gap:6px;box-shadow:-10px 0 40px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .3s;z-index:960}
  nav.principal.abierta{transform:translateX(0)}
  nav.principal>a,nav.principal .desplegable>a{font-size:17px;padding:10px 0}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:0 0 0 14px;min-width:0}
  .btn-wsp-header{display:none}
  .hamburguesa{display:block;z-index:970}
  .barra-top .datos span:nth-child(n+2){display:none}
}
@media(max-width:960px){
  /* En móviles/tablets el parallax fijo no funciona bien (iOS): la imagen scrollea normal */
  .cta{background-attachment:scroll}
}
@media(max-width:600px){
  section{padding:60px 0}
  .grilla-servicios,.pasos-grilla,.porque-grilla,.footer-arriba,.dos-col .pasos-grilla,.dos-col .porque-grilla{grid-template-columns:1fr}
  .collage{gap:14px}
  .collage .col{gap:14px}
  .collage .col-a img{height:170px}
  .collage .col-b img{height:250px}
  .contador{padding:18px 12px}
  .contador .num{font-size:32px}
  .tarjeta-soporte{padding:20px 18px}
  .hero{padding:80px 0}
  .formulario{padding:26px}
  .formulario .fila{grid-template-columns:1fr}
}

/* ===== Páginas interiores ===== */
.banner-pagina{background:linear-gradient(rgba(0,15,118,.9),rgba(0,15,118,.82)),url('img/9.jpg') center/cover;color:#fff;padding:70px 0 60px}
.banner-pagina h1{color:#fff;font-size:clamp(30px,4vw,46px);font-weight:900;margin-bottom:10px}
.migas{font-size:14px;opacity:.9}
.migas a{color:var(--terracota);font-weight:700}
.migas a:hover{color:#fff}
.detalle-grilla{display:grid;grid-template-columns:1.3fr .8fr;gap:56px;align-items:start}
.detalle p{margin-bottom:16px;color:var(--texto-suave)}
.detalle h2{margin:10px 0 6px}
.lista-checks{list-style:none;margin:18px 0;padding:0}
.lista-checks li{padding-left:36px;position:relative;margin-bottom:12px;color:var(--texto-suave)}
.lista-checks li::before{content:"✓";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--pais-suave);color:var(--titulo);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.caja-experiencia{background:var(--azul);color:#fff;border-radius:18px;padding:38px 30px;text-align:center;position:sticky;top:130px;box-shadow:0 18px 44px rgba(0,15,118,.25)}
.caja-experiencia .num{font-family:'Urbanist',sans-serif;font-size:54px;font-weight:900;color:var(--terracota);line-height:1.1}
.caja-experiencia .txt{font-size:15px;opacity:.92;margin-bottom:18px}
.caja-experiencia .icono-servicio{width:110px;height:110px;border-radius:20px;background:var(--superficie);margin:0 auto 20px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.caja-experiencia .icono-servicio img{max-width:80%;max-height:80%;object-fit:contain}
.faq{background:var(--superficie-2)}
.faq-lista{max-width:840px;margin:44px auto 0;text-align:left}
.faq-lista details{background:var(--superficie);border-radius:14px;margin-bottom:14px;box-shadow:0 6px 20px rgba(0,15,118,.06);overflow:hidden}
.faq-lista summary{cursor:pointer;padding:18px 22px;font-family:'Urbanist',sans-serif;font-weight:800;font-size:15.5px;color:var(--titulo);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{content:"+";font-size:24px;color:var(--terracota-texto);flex:none;line-height:1}
.faq-lista details[open] summary::after{content:"−"}
.faq-lista .faq-cuerpo{padding:0 22px 20px;color:var(--texto-suave);font-size:14.5px}
.mision-grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px}
@media(max-width:960px){.detalle-grilla{grid-template-columns:1fr}.caja-experiencia{position:static}.mision-grilla{grid-template-columns:1fr}}
/* ===== Tiempo de escritura de Codigo 16 Horas Aproximadamente! Ing Carlos Barreto, Lic. Balbuena Pablo. ===== */
/* ===== El que quiere Celeste que le cueste, Frase Celebre del Ingeniero Barreto! jaja ===== */

/* ============================================================================
   TEMA OSCURO
   Se activa de dos maneras: si el visitante lo elige con el botón de la barra
   de arriba, o si su móvil/ordenador ya está en modo oscuro. Si lo elige claro
   a mano, esa decisión gana sobre la del sistema.
   ============================================================================ */
:root[data-theme="dark"]{
  --fondo:#0F1420;
  --superficie:#1A2233;
  --superficie-2:#151C2B;
  --titulo:#93B0FF;
  --texto:#E4E8F0;
  --texto-suave:#A3ACBF;
  --texto-tenue:#99A4B8;
  --claro:#151C2B;
  --blanco:#1A2233;
  --borde:#2A3346;
  --borde-campo:#33405A;
  --campo:#141B29;
  --pie:#080B12;
  --azul-medio:#6E93E8;
  --sombra-color:0,0,0;
  --terracota-texto:#DA906E;  /* en oscuro vuelve al de la marca: sobre fondo oscuro ya se lee bien */
  --pais-suave:#412528;  /* el suave del pais en oscuro: mas claro que la tarjeta, para que el cuadrado del icono se vea como un realce */
  --aviso-error:#E8A87C;
}
/* ---- Selector de idioma CA · ES · EN, en la barra de arriba -------------- */
.selector-idioma{display:flex;align-items:center;gap:2px;font-family:'Urbanist',sans-serif;
  font-weight:700;font-size:12px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:2px;flex:none}
.selector-idioma a{padding:3px 9px;border-radius:99px;color:#fff;opacity:.7;
  transition:background .2s,opacity .2s;line-height:1.5}
.selector-idioma a:hover{opacity:1;background:rgba(255,255,255,.18)}
.selector-idioma a.on{opacity:1;background:#fff;color:var(--azul)}
@media(max-width:600px){.selector-idioma a{padding:3px 7px;font-size:11px}}

/* ---- El botón para cambiar de tema, en la barra de arriba ---------------- */
.btn-tema{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);
  color:#fff;border-radius:50%;cursor:pointer;padding:0;transition:background .2s;flex:none}
.btn-tema:hover{background:rgba(255,255,255,.25)}
.btn-tema svg{width:16px;height:16px;display:block}
/* Se muestra el sol o la luna según en qué tema estemos */
.btn-tema .luna{display:block}
.btn-tema .sol{display:none}
:root[data-theme="dark"] .btn-tema .luna{display:none}
:root[data-theme="dark"] .btn-tema .sol{display:block}
/* ---- Retoques que sólo hacen falta en oscuro ----------------------------- */
:root[data-theme="dark"] .tarjeta-servicio .imagen,
:root:not([data-theme="light"]) .tarjeta-servicio .imagen{
  background:linear-gradient(135deg,var(--superficie-2),var(--superficie))}
/* Los iconos de los servicios son PNG con fondo claro: sobre el oscuro se ven
   recortados, así que se les deja su propia base blanca. */
:root[data-theme="dark"] .caja-experiencia .icono-servicio,
:root:not([data-theme="light"]) .caja-experiencia .icono-servicio{background:#fff}

/* ===== La barra de arriba en el móvil =====================================
   En pantallas chicas no entra todo en una línea: la dirección, el selector
   de idioma, el botón del tema y el selector de país. Antes se partía sola y
   los controles quedaban desparramados, uno a cada lado.
   Ahora la dirección va centrada arriba y los tres controles juntos debajo.

   Y el menú de países deja de anclarse al botón: se ancla a la barra, con un
   margen a cada lado. Así no se puede salir de la pantalla, esté el botón
   donde esté.                                                              */
@media(max-width:700px){
  .barra-top .contenedor{justify-content:center;gap:10px;row-gap:8px}
  .barra-top .datos{width:100%;justify-content:center;text-align:center}
  /* En movil la lista de paises ocupa todo el ancho, asi que NO se cuelga del
     boton (que queda descentrado) sino de la barra de arriba. Para eso la barra
     tiene que estar posicionada: sin esto el menu se cuelga del documento y
     "abajo del todo" lo manda fuera de la pantalla, invisible. */
  .barra-top{position:relative}
  .selector-pais{position:static}
  .menu-paises{left:14px;right:14px;min-width:0;width:auto;
    top:calc(100% + 8px);max-height:70vh;overflow-y:auto}
  .menu-paises a{padding:12px}
}
@media(max-width:380px){
  /* En los móviles más chicos la dirección ocupa demasiado y empuja al resto */
  .barra-top .datos{display:none}
}