/* =========================================================================
   Soft Warehouse S.A. — Sitio corporativo FIT-BANK
   Hoja de estilos compartidos y de rutas históricas. Organizada por bloques:
     1. Tokens (colores, tipografia, medidas)   6. Pagina Modulos
     2. Reset y utilidades                      7. Pagina Funcionalidad
     3. Cabecera y navegacion                   8. Pagina Clientes
     4. Pie de pagina                           9. Pagina Nosotros
     5. Pagina Caracteristicas                 10. Pagina Contacto
   La composición exclusiva de la vista principal está en
   css/paginas/inicio.css. Para cambiar la identidad visual basta con editar
   los tokens del bloque 1 de este archivo.
   ========================================================================= */

/* ============================ 1. TOKENS ================================= */
:root{
  /* Paleta tomada del logo y de las diapositivas originales */
  --azul:          #0093D0;   /* azul principal del logo FIT-BANK        */
  --azul-osc:      #00719F;   /* hover y textos sobre fondo claro        */
  --azul-medio:    #2FB0DF;
  --azul-claro:    #99D0ED;
  --azul-panal:    #DDF5FF;   /* fondo de la tarjeta introductoria       */
  --petroleo:      #155F82;   /* barra oscura de la diapositiva 2        */
  --petroleo-osc:  #0E4257;
  --naranja:       #F78F1E;   /* acento del logo                         */
  --naranja-osc:   #D9740A;

  --tinta:         #16242C;   /* texto principal                         */
  --tinta-suave:   #4A5C66;   /* texto secundario                        */
  --linea:         #D3DEE3;
  --blanco:        #FFFFFF;
  --fondo-a:       #FBFDFD;   /* degradado de fondo, claro               */
  --fondo-b:       #C9D6D9;   /* degradado de fondo, oscuro              */

  /* Tipografia */
  --f-titulo: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-texto:  "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Medidas */
  --alto-cabecera: 4.25rem;
  --ancho-max: 84rem;
  --radio: 0.625rem;
  --radio-lg: 1rem;
  --sombra-sm: 0 1px 3px rgba(21,95,130,.10), 0 1px 2px rgba(21,95,130,.06);
  --sombra:    0 4px 14px rgba(21,95,130,.13);
  --sombra-lg: 0 10px 34px rgba(21,95,130,.18);
  --transicion: 180ms ease;
}

/* ====================== 2. RESET Y UTILIDADES =========================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0;
  font-family:var(--f-texto);
  color:var(--tinta);
  background:var(--fondo-a);
  line-height:1.5;
  min-height:100vh;
}
img{ max-width:100%; display:block; }
a{ color:var(--azul-osc); }
button{ font:inherit; }

/* Fondo degradado con la curva suave de las diapositivas originales */
.fondo-diapositiva{
  position:relative;
  background:
    radial-gradient(120% 90% at 8% 0%,  #FFFFFF 0%, rgba(255,255,255,0) 55%),
    radial-gradient(120% 120% at 100% 100%, var(--fondo-b) 0%, rgba(201,214,217,0) 60%),
    linear-gradient(160deg, var(--fondo-a) 0%, #EEF3F4 55%, #DCE5E7 100%);
}
.fondo-diapositiva::after{           /* la "ola" inferior izquierda */
  content:""; position:fixed; inset:auto 0 -30vh 0; height:80vh;
  background:radial-gradient(60% 100% at 30% 100%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none; z-index:0;
}
.fondo-diapositiva > *{ position:relative; z-index:1; }

.contenedor{ width:min(100% - 2.5rem, var(--ancho-max)); margin-inline:auto; }
.solo-lectores{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.solo-lectores:focus{
  position:fixed; top:.75rem; left:.75rem; z-index:1000;
  width:auto; height:auto; overflow:visible; clip:auto; white-space:normal;
  padding:.65rem 1rem; color:#fff; background:var(--petroleo-osc);
  border-radius:var(--radio); box-shadow:var(--sombra);
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--naranja); outline-offset:2px; border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* Titulo de seccion, como en las diapositivas (centrado, negrita, oscuro) */
.titulo-seccion{
  font-family:var(--f-titulo); font-weight:700; text-align:center;
  color:var(--tinta); letter-spacing:.01em; margin:0 0 1rem;
  font-size:clamp(1.15rem, 2.4vh, 1.55rem);
}

/* ==================== 3. CABECERA Y NAVEGACION ========================== */
.cabecera{
  position:sticky; top:0; z-index:60;
  min-height:var(--alto-cabecera);
  display:flex; align-items:center;
  /* Fondo identico al del pie de pagina (bloque 4): var(--petroleo-osc).
     Opaco a proposito: al ser sticky, cualquier transparencia dejaria ver
     el contenido al desplazarse y el color ya no coincidiria con el pie. */
  background:var(--petroleo-osc);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.cabecera--oscura{
  /* Se conserva por compatibilidad con el atributo data-oscura del HTML.
     Ahora la cabecera ya es oscura por defecto, asi que no cambia nada. */
  background:var(--petroleo-osc); border-bottom-color:rgba(255,255,255,.10);
}
.cabecera__interior{
  width:min(100% - 2rem, var(--ancho-max));
  margin-inline:auto; display:flex; align-items:center; gap:1.25rem;
}
.cabecera__logo{ flex:0 0 auto; display:block; }
.cabecera__logo img{
  /* +10 % sobre los valores originales (2.4 / 5.2vh / 3.15).
     El maximo 3.465rem sigue por debajo de --alto-cabecera (4.25rem),
     asi que la barra no crece y los calc() que dependen de esa medida
     (menu lateral y menu movil) siguen alineados. */
  height:clamp(2.64rem, 5.72vh, 3.465rem); width:auto;
  image-rendering:auto;
}
.cabecera__nav{ margin-left:auto; }
.nav-lista{
  list-style:none; display:flex; align-items:center;
  gap:clamp(.5rem, 1.6vw, 1.4rem); margin:0; padding:0;
}
.nav-lista a{
  display:inline-block; padding:.4rem .15rem;
  font-size:clamp(.8rem, .95vw, .95rem); font-weight:600;
  /* Sobre el fondo oscuro. El antiguo var(--petroleo) daba 1.55:1 sobre
     --petroleo-osc, es decir, ilegible. Este azul palido da 9.5:1. */
  color:#E4F2F8; text-decoration:none;
  border-bottom:2px solid transparent; transition:var(--transicion);
  white-space:nowrap;
}
.nav-lista a:hover{ color:#FFFFFF; border-bottom-color:var(--naranja); }
.nav-lista a[aria-current="page"]{ color:#FFFFFF; border-bottom-color:var(--naranja); }

/* Boton hamburguesa (solo movil) */
.nav-boton{
  display:none; margin-left:auto; width:2.75rem; height:2.75rem;
  border:1px solid rgba(255,255,255,.40); border-radius:var(--radio);
  background:transparent; color:#FFFFFF; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-boton svg{ width:1.4rem; height:1.4rem; }

@media (max-width:60rem){
  .nav-boton{ display:inline-flex; }
  .cabecera__nav{
    position:absolute; inset:var(--alto-cabecera) 0 auto 0;
    /* El desplegable movil tambien va oscuro; si no, al abrirlo aparece
       un panel blanco pegado a una barra oscura. */
    background:var(--petroleo-osc); border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:var(--sombra); display:none;
  }
  .cabecera__nav.abierto{ display:block; }
  .nav-lista{ flex-direction:column; align-items:stretch; gap:0; padding:.5rem 0; }
  .nav-lista a{
    padding:.85rem 1.5rem; font-size:1rem; color:#E4F2F8;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .nav-lista li:last-child a{ border-bottom:none; }
}

/* ========================= 4. PIE DE PAGINA ============================= */
.pie{
  background:var(--petroleo-osc); color:#CFE3EC; margin-top:auto;
  padding:2.25rem 0 1.5rem; font-size:.875rem;
}
.pie__grid{
  display:grid; gap:1.75rem;
  grid-template-columns:repeat(auto-fit, minmax(15rem,1fr));
  align-items:start;
}
.pie h3{ color:#fff; font-size:.95rem; margin:0 0 .6rem; }
.pie a{ color:#9FD4EA; text-decoration:none; }
.pie a:hover{ color:#fff; text-decoration:underline; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
/* Sin filtro de color: el logo va a todo color, igual que en la cabecera.
   Antes llevaba filter:brightness(0) invert(1), que lo aplanaba a blanco.
   Se quito porque el fondo del pie y el de la cabecera son ahora el mismo
   (--petroleo-osc) y los dos logos de la pagina deben verse identicos.
   ATENCION: si algun dia el pie vuelve a un fondo claro, hay que revisar
   este logo -- a todo color sobre blanco pierde legibilidad. */
.pie__logo{ height:2.4rem; width:auto; margin-bottom:.75rem; }
.pie__legal{
  border-top:1px solid rgba(255,255,255,.15); margin-top:1.75rem;
  padding-top:1rem; font-size:.8rem; color:#9DB6C2;
}

/* ============ 5. PAGINA CARACTERISTICAS (diapositiva 2) ================
   Requisito: al 100 % de zoom las 12 tarjetas deben entrar en una pantalla.
   Se logra con tipografia clamp() referida a la altura del viewport (vh):
     - en pantallas normales al 100 % manda el valor en vh -> todo encaja;
     - al aumentar el zoom el viewport en px CSS se reduce, clamp toma el
       minimo en rem y las tarjetas crecen fisicamente, con scroll normal.
   ======================================================================= */
.pantalla{ min-height:100dvh; display:flex; flex-direction:column; }
.pantalla__cuerpo{ flex:1; display:flex; flex-direction:column; min-height:0; }

.caracteristicas{ padding:clamp(.75rem, 2vh, 1.5rem) 0 clamp(.75rem, 2vh, 1.5rem); }
.caracteristicas__intro{
  background:var(--azul-panal); border:1px solid #BFE7F7;
  border-radius:var(--radio); text-align:center;
  padding:clamp(.6rem, 1.5vh, 1.1rem) clamp(1rem, 3vw, 2rem);
  margin-bottom:clamp(.75rem, 1.8vh, 1.25rem);
/*font-size:clamp(.82rem, 1.55vh, 1.05rem); line-height:1.45;*/
  font-size:clamp(1.02rem, 1.93vh, 1.31rem); line-height:1.45;
  color:var(--petroleo-osc);
}
.caracteristicas__intro strong{ color:var(--petroleo); }

.rejilla-caracteristicas{
  flex:1; display:grid; gap:clamp(.5rem, 1.3vh, 1rem);
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:1fr; min-height:0;
}
.tarjeta-caracteristica{
  position:relative; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra-sm);
  padding:clamp(.85rem, 1.9vh, 1.4rem) clamp(.7rem, 1.2vw, 1.1rem) clamp(.6rem, 1.4vh, 1rem);
  display:flex; align-items:center; justify-content:center; text-align:center;
/*  font-size:clamp(.74rem, 1.42vh, .95rem); line-height:1.4; */
  font-size:clamp(1.11rem, 2.13vh, 1.425rem); line-height:1.4;
  color:var(--tinta-suave); transition:var(--transicion);
}
.tarjeta-caracteristica:hover{
  transform:translateY(-2px); box-shadow:var(--sombra); border-color:var(--azul-claro);
}
.tarjeta-caracteristica__n{
  position:absolute; top:clamp(.25rem,.7vh,.5rem); left:clamp(.5rem,.8vw,.75rem);
  font-weight:700; color:var(--azul);
  font-size:clamp(.68rem, 1.25vh, .85rem); line-height:1;
}
.tarjeta-caracteristica strong{ color:var(--tinta); font-weight:700; }

@media (max-width:64rem){
  .rejilla-caracteristicas{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .pantalla{ min-height:0; }
}
/* Indicadores del carrusel: ocultos en escritorio, visibles en movil */
.carrusel-puntos{
  display:none; justify-content:center; gap:.4rem; padding:.25rem 0 .75rem;
}
/* Movil: carrusel tarjeta por tarjeta */
@media (max-width:40rem){
  .rejilla-caracteristicas{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:1rem; padding-bottom:1rem; -webkit-overflow-scrolling:touch;
  }
  .tarjeta-caracteristica{
    flex:0 0 84%; scroll-snap-align:center; min-height:11rem; font-size:.95rem;
  }
  .carrusel-puntos{ display:flex; }
}
.carrusel-puntos span{
  width:.5rem; height:.5rem; border-radius:50%; background:var(--linea);
  transition:var(--transicion);
}
.carrusel-puntos span.activo{ background:var(--azul); width:1.35rem; border-radius:.25rem; }

/* ================ 6. PAGINA MODULOS (diapositiva 3) ==================== */
.modulos-portada{
  flex:1; display:grid; align-items:center; gap:clamp(1rem, 3vw, 3rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding:clamp(1rem, 3vh, 2rem) 0;
}
.modulos-portada__titulo{
  color:var(--naranja-osc); font-weight:700; letter-spacing:.02em;
  font-size:clamp(1rem, 2.6vh, 1.5rem); margin:0 0 clamp(.6rem,1.6vh,1.2rem);
}
.lista-cobertura{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(.2rem,.85vh,.5rem); }
.lista-cobertura a,
.lista-cobertura span{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
/*  color:var(--petroleo); font-size:clamp(.8rem, 1.6vh, 1.02rem);*/
  color:var(--petroleo); font-size:clamp(1.02rem, 1.93vh, 1.31rem);
  padding:clamp(.2rem,.55vh,.4rem) .5rem; border-radius:var(--radio);
  transition:var(--transicion);
}
.lista-cobertura a::before,
.lista-cobertura span::before{
  content:"›"; color:var(--naranja); font-weight:700; font-size:1.15em; line-height:1;
}
.lista-cobertura a:hover{ background:var(--azul-panal); color:var(--azul-osc); }
.lista-cobertura span{ color:var(--tinta-suave); }
.modulos-portada__figura img{
  width:100%; height:auto; max-height:78vh; object-fit:contain; margin-inline:auto;
}
@media (max-width:60rem){
  .modulos-portada{ grid-template-columns:1fr; }
  .modulos-portada__figura{ order:-1; }
  .modulos-portada__figura img{ max-height:45vh; }
}

/* ========= 7. PAGINA FUNCIONALIDAD (diapositivas 4 a 13) ==============
   Izquierda: menu completo con desplazamiento propio.
   Derecha: titulo, imagen y tarjeta explicativa del elemento elegido.
   ======================================================================= */
.func{
  display:grid; gap:clamp(1rem, 2.5vw, 2.5rem);
  grid-template-columns:minmax(17rem, 26rem) minmax(0,1fr);
  padding:clamp(1rem, 2.5vh, 1.75rem) 0 2.5rem;
  align-items:start;
}
/* --- menu lateral --- */
.menu-lateral{
  position:sticky; top:calc(var(--alto-cabecera) + 1rem);
  max-height:calc(100dvh - var(--alto-cabecera) - 2rem);
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.72); border:1px solid var(--linea);
  border-radius:var(--radio-lg); box-shadow:var(--sombra-sm); overflow:hidden;
}
.menu-lateral__titulo{
  margin:0; padding:.9rem 1.1rem .7rem;
  color:var(--naranja-osc); font-size:1rem; font-weight:700; letter-spacing:.04em;
  border-bottom:1px solid var(--linea); background:var(--blanco);
}
.menu-lateral__desplaza{ overflow-y:auto; overscroll-behavior:contain; padding:.5rem .5rem 1rem; }
.menu-lateral__desplaza::-webkit-scrollbar{ width:9px; }
.menu-lateral__desplaza::-webkit-scrollbar-thumb{ background:var(--azul-claro); border-radius:9px; }
.menu-lateral__desplaza::-webkit-scrollbar-track{ background:#EDF3F5; }

.grupo{ border-bottom:1px solid #E8EFF2; }
.grupo:last-child{ border-bottom:none; }
.grupo__boton{
  width:100%; display:flex; align-items:center; gap:.55rem; text-align:left;
  padding:.6rem .65rem; background:none; border:0; cursor:pointer;
  color:var(--petroleo); font-weight:700; font-size:.92rem; border-radius:var(--radio);
  transition:var(--transicion);
}
.grupo__boton:hover{ background:var(--azul-panal); }
.grupo__boton[aria-expanded="true"]{ color:var(--azul-osc); }
.grupo__flecha{
  flex:0 0 auto; width:.7rem; height:.7rem; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform var(--transicion);
  margin-left:auto;
}
.grupo__boton[aria-expanded="true"] .grupo__flecha{ transform:rotate(45deg); }
.grupo__items{ list-style:none; margin:0 0 .35rem; padding:0 0 0 .3rem; display:grid; gap:1px; }
.grupo__items[hidden]{ display:none; }
.grupo__items a{
  display:block; padding:.4rem .6rem .4rem 1.35rem; position:relative;
  color:var(--tinta-suave); text-decoration:none; font-size:.845rem; line-height:1.35;
  border-radius:var(--radio); transition:var(--transicion);
}
.grupo__items a::before{
  content:"›"; position:absolute; left:.5rem; color:var(--azul-claro); font-weight:700;
}
.grupo__items a:hover{ background:var(--azul-panal); color:var(--azul-osc); }
.grupo__items a[aria-current="true"]{
  background:var(--azul); color:#fff; font-weight:600;
}
.grupo__items a[aria-current="true"]::before{ color:#fff; }

/* --- panel derecho --- */
.panel{ min-width:0; }
.panel__titulo{
  text-align:center; font-weight:700; color:var(--tinta);
  font-size:clamp(1.05rem, 2.3vw, 1.5rem); letter-spacing:.01em;
  margin:0 0 1rem; text-transform:uppercase;
}
.panel__figura{
  margin:0 0 1.1rem; display:flex; justify-content:center; gap:1rem; align-items:center;
  flex-wrap:wrap;
}
.panel__figura img{
  border-radius:var(--radio); box-shadow:var(--sombra);
  max-height:min(46vh, 26rem); width:auto; object-fit:contain; background:var(--blanco);
}
.panel__figura img.panel__figura--secundaria{ max-height:min(38vh, 21rem); box-shadow:var(--sombra-sm); }
.panel__figura--suelta img{ box-shadow:none; background:transparent; }
.tarjeta-panel{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio-lg); box-shadow:var(--sombra);
  padding:1.1rem 1.4rem; text-align:center;
}
.tarjeta-panel h3{
  margin:0 0 .5rem; color:var(--petroleo); font-size:1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em;
}
.tarjeta-panel p{ margin:0; color:var(--tinta-suave); font-size:.95rem; }
.tarjeta-panel__borrador{
  display:inline-block; margin-top:.7rem; font-size:.72rem; letter-spacing:.04em;
  color:var(--naranja-osc); background:#FFF3E2; border:1px solid #FBD9AC;
  border-radius:999px; padding:.15rem .6rem;
}
/* lista de integraciones: alineada a la izquierda dentro de la tarjeta,
   con ancho limitado para que las lineas no se hagan demasiado largas */
.lista-integraciones{
  list-style:none; margin:0 auto; padding:0; display:grid; gap:.35rem;
  width:min(100%, 34rem); text-align:left;
}
.lista-integraciones li{
  display:flex; gap:.6rem; align-items:baseline;
  font-size:.92rem; color:var(--petroleo); padding:.3rem .25rem;
  border-bottom:1px solid #EEF4F6;
}
.lista-integraciones li:last-child{ border-bottom:none; }
.lista-integraciones li::before{ content:"›"; color:var(--naranja); font-weight:700; }

@media (max-width:60rem){
  .func{ grid-template-columns:1fr; }
  .menu-lateral{ position:static; max-height:none; }
  .menu-lateral__desplaza{ max-height:22rem; }
}

/* ============ 8. PAGINA CLIENTES (diapositivas 14 y 15) ================ */
.bloque-clientes{ padding:clamp(1.25rem,3vh,2rem) 0; }
.bloque-clientes h2{
  font-size:clamp(1.05rem,2.2vw,1.4rem); color:var(--tinta);
  text-align:center; margin:0 0 1.1rem; font-weight:700;
}
.marco-logos{
  border:2px solid var(--azul-claro); border-radius:var(--radio-lg);
  background:rgba(255,255,255,.8); padding:1.25rem clamp(.75rem,2vw,1.75rem);
  margin-bottom:1.75rem;
}
.rejilla-logos{
  display:grid; gap:clamp(.75rem,1.8vw,1.5rem);
  grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr));
  align-items:center;
}
.rejilla-logos figure{
  margin:0; height:4.25rem; display:flex; align-items:center; justify-content:center;
  padding:.35rem;
}
.rejilla-logos img{
  max-height:100%; width:auto; object-fit:contain;
  filter:saturate(.92); transition:var(--transicion);
}
.rejilla-logos figure:hover img{ filter:none; transform:scale(1.06); }
.rejilla-crecimiento{
  display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr));
}
.rejilla-crecimiento figure{
  margin:0; background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:var(--sombra-sm); padding:.75rem; text-align:center;
}
.rejilla-crecimiento figcaption{
  margin-top:.5rem; font-size:.85rem; color:var(--tinta-suave); font-weight:600;
}

/* ============= 9. PAGINA NOSOTROS (diapositiva 16) ===================== */
.nosotros{ padding:clamp(1.25rem,3vh,2rem) 0 3rem; display:grid; gap:1.25rem; }
.nosotros__barra{ display:flex; justify-content:flex-end; }
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--azul); color:#fff; text-decoration:none; font-weight:600;
  border:0; border-radius:var(--radio); cursor:pointer;
  padding:.7rem 2rem; font-size:1rem; box-shadow:var(--sombra-sm);
  transition:var(--transicion);
}
.boton:hover{ background:var(--azul-osc); box-shadow:var(--sombra); }
.boton:disabled{ background:#9FB6C0; cursor:not-allowed; box-shadow:none; }
.boton--grande{ padding:.85rem 3rem; font-size:1.05rem; }

.tarjetas-hito{
  display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(17rem,1fr));
}
.tarjeta{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio-lg); box-shadow:var(--sombra-sm); padding:1.25rem 1.4rem;
}
.tarjeta__cabeza{ display:flex; align-items:center; gap:.85rem; margin-bottom:.75rem; }
.tarjeta__icono{
  flex:0 0 auto; width:2.85rem; height:2.85rem; border-radius:var(--radio);
  background:var(--azul-panal); display:flex; align-items:center; justify-content:center;
}
.tarjeta__icono img{ width:1.5rem; height:1.5rem; }
.tarjeta p{ margin:0; color:var(--tinta-suave); font-size:.92rem; }
.tarjeta .tarjeta__titulo{
  margin:0; font-size:1.15rem; color:var(--petroleo); font-weight:700;
}
.tarjeta .tarjeta__cifra{
  margin:0; font-size:1.9rem; font-weight:800; color:var(--petroleo); line-height:1.05;
}
.tarjeta .tarjeta__cifra small{
  font-size:.82rem; font-weight:600; color:var(--azul); margin-left:.35rem;
  display:inline-block; max-width:9rem; line-height:1.25; vertical-align:middle;
}
/* Tarjetas anchas: icono, titulo pegado a la izquierda y cifras a la derecha */
.tarjeta--ancha .tarjeta__cabeza{ flex-wrap:wrap; gap:1rem 2rem; }
.tarjeta--ancha .tarjeta__titulo{ margin-right:auto; }
.etiquetas{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; padding:0; list-style:none; }
.etiquetas li{
  background:var(--azul-panal); color:var(--petroleo); border:1px solid #C3E6F5;
  border-radius:999px; padding:.25rem .85rem; font-size:.82rem; font-weight:600;
}
.nota{ font-size:.82rem; color:#7C8E97; font-style:italic; margin:0; }

/* ============== 10. PAGINA CONTACTO (diapositiva 17) =================== */
.contacto{ padding:clamp(1.25rem,3vh,2rem) 0 3rem; }
.formulario{
  width:min(100%, 34rem); margin-inline:auto;
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio-lg); box-shadow:var(--sombra); padding:1.5rem clamp(1rem,3vw,2rem) 1.75rem;
}
.formulario__intro{ text-align:center; color:var(--tinta-suave); font-size:.92rem; margin:0 0 1.25rem; }
.campo{ margin-bottom:1rem; }
.campo > label{
  display:block; font-size:.85rem; font-weight:600; color:var(--petroleo); margin-bottom:.3rem;
}
.campo .obligatorio{ color:var(--naranja-osc); }
.campo input, .campo select, .campo textarea{
  width:100%; padding:.65rem .8rem; font-family:inherit; font-size:.95rem;
  color:var(--tinta); background:#FBFDFE;
  border:1px solid var(--linea); border-radius:var(--radio);
  transition:var(--transicion);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  border-color:var(--azul); background:#fff; box-shadow:0 0 0 3px rgba(0,147,208,.15);
}
.campo textarea{ min-height:7rem; resize:vertical; }
.campo--telefono .fila{ display:flex; gap:.5rem; }
.campo--telefono select{ flex:0 0 9.5rem; }
.campo__error{
  display:none; margin-top:.3rem; font-size:.8rem; color:#C3251B; font-weight:600;
}
.campo.invalido input, .campo.invalido select, .campo.invalido textarea{
  border-color:#E0796F; background:#FFF7F6;
}
.campo.invalido .campo__error{ display:block; }
.campo__ayuda{ font-size:.78rem; color:#8496A0; margin-top:.25rem; }
.contador{ font-size:.78rem; color:#8496A0; text-align:right; }

/* Trampa antispam: invisible para personas, visible para robots */
.trampa{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden; opacity:0;
}
.captcha{
  background:var(--azul-panal); border:1px solid #C3E6F5; border-radius:var(--radio);
  padding:.85rem 1rem; margin-bottom:1rem;
}
.captcha__pregunta{ font-weight:700; color:var(--petroleo); font-size:1rem; }
.aviso{
  border-radius:var(--radio); padding:.85rem 1rem; margin-bottom:1rem; font-size:.9rem;
  display:none;
}
.aviso--ok{ display:block; background:#E7F7EE; border:1px solid #A9DEC2; color:#1B6B45; }
.aviso--error{ display:block; background:#FDEEEC; border:1px solid #F0B7B0; color:#A3241A; }
.formulario__acciones{ text-align:center; margin-top:1.25rem; }

/* ==================== PORTADA (diapositiva 1) ========================== */
.portada{
  position:relative; min-height:calc(100dvh - var(--alto-cabecera));
  display:flex; align-items:center; overflow:hidden;
}
.portada__fondo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.portada::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(6,32,46,.88) 0%, rgba(6,32,46,.62) 45%, rgba(6,32,46,.25) 100%);
}
.portada__contenido{ position:relative; z-index:2; padding:3rem 0; color:#fff; max-width:52rem; }
.portada h1{
  font-size:clamp(1.9rem, 5.2vw, 3.6rem); font-weight:300; line-height:1.12;
  margin:0 0 1.25rem; letter-spacing:-.01em;
}
.portada h1 strong{ font-weight:700; display:block; }
.portada__lema{
  font-size:clamp(.9rem, 1.9vw, 1.15rem); letter-spacing:.06em;
  text-transform:uppercase; color:#CFE7F2; margin:0 0 .9rem;
}
.portada__normativa{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0 0 1.4rem; padding:0; }
.portada__normativa li{
  border:1px solid rgba(255,255,255,.55); border-radius:var(--radio);
  padding:.25rem .9rem; font-size:.85rem; font-weight:600; letter-spacing:.04em;
  background:rgba(255,255,255,.08);
}
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.75rem; }
.boton--fantasma{
  background:transparent; border:2px solid rgba(255,255,255,.7); color:#fff;
}
.boton--fantasma:hover{ background:rgba(255,255,255,.15); border-color:#fff; }

/* =========================================================================
   11. VERSIÓN BILINGÜE (Español / Inglés)
   Bloque añadido para el conmutador de idioma. NO modifica ninguna regla
   anterior: la maquetación, la navegación y las siete páginas siguen
   exactamente igual que en la versión en español.
   ========================================================================= */

/* --- 11.1 Evitar el parpadeo al abrir el sitio en inglés --------------
   i18n.js pone .i18n-espera en <html> antes de pintar y la quita en cuanto
   ha traducido. Solo actúa cuando el idioma NO es el de defecto (español),
   así que la versión en español no se ve afectada en absoluto. */
.i18n-espera body{ visibility:hidden; }

/* --- 11.2 Conmutador ES | EN de la cabecera --------------------------
   Va al final de la barra, después del menú. La cabecera es azul petróleo,
   así que el conmutador va en claro sobre transparente. */
.cabecera__idioma{ flex:0 0 auto; display:flex; align-items:center; margin-left:1rem; }

.conmutador-idioma{
  display:inline-flex; align-items:stretch;
  border:1px solid rgba(255,255,255,.42); border-radius:999px; overflow:hidden;
  background:transparent;
}
.conmutador-idioma__op{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:.78rem; font-weight:700; letter-spacing:.06em;
  color:#DCEEF7; padding:.3rem .7rem; line-height:1.4;
  transition:var(--transicion);
}
.conmutador-idioma__op:hover{ background:rgba(255,255,255,.14); color:#fff; }
.conmutador-idioma__op.activo{ background:var(--azul); color:#fff; cursor:default; }
.conmutador-idioma__op:focus-visible{ outline:2px solid var(--naranja); outline-offset:-2px; }

/* En móvil la hamburguesa pasa al final, para que el orden sea
   logo … idioma  menú. */
@media (max-width:60rem){
  .cabecera__idioma{ margin-left:auto; }
  .nav-boton{ order:1; margin-left:.6rem; }
}

/* --- 11.3 Elección de idioma en la portada ---------------------------
   Bloque compacto bajo los dos botones. Usa el mismo conmutador, en
   tamaño mayor y con los colores de la portada. */
.elige-idioma{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  margin-top:1.5rem; padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.22);
}
.elige-idioma__rotulo{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#CFE7F2;
}
.elige-idioma .conmutador-idioma{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.55);
}
.elige-idioma .conmutador-idioma__op{
  color:#fff; font-size:.88rem; padding:.45rem 1.25rem; letter-spacing:.08em;
}
.elige-idioma .conmutador-idioma__op:hover{ background:rgba(255,255,255,.18); color:#fff; }
.elige-idioma .conmutador-idioma__op.activo{ background:var(--naranja); color:#fff; }