/* =================================================================
   crmcampings.es — hoja de estilos única

   Registro visual: SaaS sobrio y compacto. Inter en todo, titulares
   pesados pero contenidos, tarjetas de esquina blanda sobre fondos
   que alternan blanco y hueso, y un héroe oscuro en degradado del
   azul de marca al verde bosque. El acento es el verde; el azul
   manda en los botones de acción.
   ================================================================= */

:root{
  /* Tinta y fondos */
  --blanco:     #ffffff;
  --hueso:      #f6f8f4;
  --hueso-2:    #eaf0e6;
  --noche:      #0b1a2e;   /* arranque del degradado y pie */
  --bosque:     #0d3320;
  --bosque-2:   #14452a;
  --tinta:      #0f1e15;
  --tinta-2:    #47584e;
  --tinta-3:    #78877e;
  --linea:      #e4eae0;
  --linea-2:    #cfd9c9;

  /* Marca */
  --azul:       #004488;
  --azul-vivo:  #0a5fb4;
  --azul-claro: #e6eef7;
  --verde:      #2f8c16;
  --verde-vivo: #45bd1c;
  --verde-claro:#e8f5e1;
  --verde-luz:  #7ede4f;   /* sobre fondo oscuro */

  /* Estados del plano: funcionales, no decorativos */
  --est-libre:    #45bd1c;
  --est-llegada:  #e08600;
  --est-ocupada:  #004488;
  --est-salida:   #0e9aa0;
  --est-limpieza: #c9482a;
  --est-parcelista:#7248c4;
  --est-bloqueada:#95a19b;

  /* Medidas */
  --ancho:      75rem;
  --ancho-est:  60rem;
  --medida:     46rem;   /* medida de lectura de la entradilla */

  --r-s:  8px;
  --r-b: 10px;   /* botones */
  --r:   14px;   /* tarjetas */
  --r-l: 20px;   /* paneles grandes */
  --pil: 999px;

  --sombra:   0 1px 2px rgba(15,30,21,.04), 0 4px 24px rgba(15,30,21,.06);
  --sombra-m: 0 2px 4px rgba(15,30,21,.05), 0 12px 32px -12px rgba(15,30,21,.18);
  --sombra-l: 0 4px 8px rgba(15,30,21,.06), 0 32px 64px -24px rgba(15,30,21,.35);

  --degradado-noche: linear-gradient(150deg, #0b1a2e 0%, #0d3320 58%, #14452a 100%);
  --degradado-cta:   linear-gradient(135deg, #14452a 0%, #1c6b3b 52%, #2f8c16 100%);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--blanco);
  color:var(--tinta-2);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  font-size:1rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --- Tipografía ------------------------------------------------ */
h1,h2,h3,h4{
  color:var(--tinta);
  font-weight:800;
  letter-spacing:-.022em;
  line-height:1.18;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2rem, 1.45rem + 2vw, 2.9rem); line-height:1.15; letter-spacing:-.028em; }
h2{ font-size:clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing:-.025em; }
h3{ font-size:1.1rem; font-weight:700; letter-spacing:-.012em; line-height:1.35; }
h4{ font-size:.95rem; font-weight:700; letter-spacing:-.008em; }

p{ margin:0 0 1.1em; max-width:none; }
.medida-ancha p{ max-width:none; }

a{ color:var(--azul-vivo); text-underline-offset:.2em; text-decoration-thickness:1px; }
a:hover{ color:var(--azul); }
strong{ font-weight:600; color:var(--tinta); }
hr{ border:0; border-top:1px solid var(--linea); margin:3rem 0; }

.entradilla{
  font-size:clamp(1.02rem, .98rem + .25vw, 1.15rem);
  line-height:1.72; color:var(--tinta-2); max-width:46rem; font-weight:400;
}

/* Rótulo de sección: píldora verde en versalitas */
.rotulo{
  display:inline-block;
  font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--verde); background:var(--verde-claro);
  padding:.32rem .85rem; border-radius:var(--pil); margin:0 0 1rem;
  line-height:1.5;
}
.rotulo-azul{ color:var(--azul); background:var(--azul-claro); }

/* Subrayado grueso para destacar dentro de un titular */
.marca-texto{
  background:linear-gradient(to top, var(--verde-vivo) 0 .16em, transparent .16em);
  padding-bottom:.02em;
}

:focus-visible{ outline:3px solid var(--azul-vivo); outline-offset:3px; border-radius:4px; }

.saltar{
  position:absolute; left:-9999px; top:0; background:var(--azul); color:#fff;
  padding:.75rem 1.1rem; z-index:200; border-radius:0 0 var(--r-s) 0;
}
.saltar:focus{ left:0; top:0; }

/* Iconos en línea */
.icono{ width:1.25rem; height:1.25rem; flex:0 0 auto; display:block; }
.icono-s{ width:1rem; height:1rem; }

/* --- Estructura ------------------------------------------------ */
.env{ width:min(100% - 3rem, var(--ancho)); margin-inline:auto; }
.env-est{ width:min(100% - 3rem, var(--ancho-est)); margin-inline:auto; }
@media (max-width:40rem){ .env,.env-est{ width:calc(100% - 2rem); } }

section{ padding-block:clamp(3.5rem, 2rem + 5vw, 6rem); }
.seccion-hueso,.franja{ background:var(--hueso); }
.franja + .franja{ padding-top:0; }
.seccion-oscura{ background:var(--degradado-noche); color:#c6d8cb; }
.seccion-oscura h1,.seccion-oscura h2,.seccion-oscura h3,.seccion-oscura h4{ color:#fff; }
.seccion-oscura p{ color:rgba(255,255,255,.72); }
.seccion-oscura .entradilla{ color:rgba(255,255,255,.72); }
.seccion-oscura .rotulo{ background:rgba(69,189,28,.16); color:var(--verde-luz); }
.seccion-oscura a:not(.boton){ color:var(--verde-luz); }

/* Encabezado centrado de sección */
.enc-centro{ text-align:center; max-width:44rem; margin:0 auto clamp(2rem,1rem + 2vw,3rem); }
.enc-centro p{ margin-inline:auto; }
.enc-centro p:last-child{ margin-bottom:0; }
.enc-centro .entradilla{ margin-inline:auto; }
/* El encabezado ya trae su propio margen inferior: la rejilla que le sigue no suma otro. */
.enc-centro + *{ margin-top:0; }

/* --- Cabecera -------------------------------------------------- */
.cabecera{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--linea);
}
.cabecera-int{ display:flex; align-items:center; gap:1rem; min-height:4.9rem; position:relative; }
.marca{ display:flex; align-items:center; flex:0 0 auto; }
.marca img{ height:2.6rem; width:auto; display:block; }

.nav{ margin-inline:auto; display:flex; align-items:center; gap:.15rem; }
/* Solo los enlaces directos: los botones del menú móvil cuelgan de .acciones-movil
   y tienen que conservar su propio color. */
.nav > a{
  font-size:.9rem; font-weight:500; color:var(--tinta-2); text-decoration:none;
  padding:.45rem .8rem; border-radius:var(--r-s); white-space:nowrap;
  transition:color .18s ease, background .18s ease;
}
.nav > a:hover{ color:var(--verde); }
.nav > a[aria-current]{ color:var(--tinta); font-weight:600; }

.acciones{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.acciones .boton{ padding:.5rem 1.15rem; font-size:.875rem; }

.hamburguesa{
  display:none; margin-left:auto; background:var(--hueso-2); border:0;
  border-radius:var(--r-s); padding:.55rem 1rem; cursor:pointer; color:var(--tinta);
  font-family:inherit; font-size:.9rem; font-weight:600;
}

.acciones-movil{ display:none; }

@media (max-width:66rem){
  .hamburguesa{ display:block; }
  .nav{
    position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
    padding:.6rem; margin-top:.55rem; box-shadow:var(--sombra-l);
  }
  .nav[hidden]{ display:none; }
  .nav > a{ padding:.8rem 1rem; }
  .acciones{ display:none; }
  .acciones-movil{
    display:flex; flex-direction:column; gap:.5rem;
    margin-top:.5rem; padding-top:.6rem; border-top:1px solid var(--linea);
  }
  .acciones-movil .boton{ width:100%; }
}

/* --- Botones ----------------------------------------------------
   Todos macizos: ninguno va con borde y el fondo hueco. El primario
   es el azul de marca, el secundario un relleno claro, y sobre fondo
   oscuro el secundario pasa a blanco translúcido.
   ---------------------------------------------------------------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:inherit; font-size:.95rem; font-weight:600; letter-spacing:-.005em; line-height:1.4;
  padding:.72rem 1.45rem; border-radius:var(--r-b); border:0;
  text-decoration:none; cursor:pointer; background:var(--azul); color:#fff;
  transition:background .18s ease, color .18s ease, transform .15s ease, box-shadow .18s ease;
}
.boton:hover{ background:var(--azul-vivo); color:#fff; transform:translateY(-1px); }
.boton .icono{ width:1.05rem; height:1.05rem; }
.boton-verde{ background:var(--verde); }
.boton-verde:hover{ background:var(--verde-vivo); }
/* Secundario: relleno claro sobre fondo claro. */
.boton-linea{ background:var(--hueso-2); color:var(--tinta); }
.boton-linea:hover{ background:var(--linea-2); color:var(--tinta); }
.boton-grande{ padding:.87rem 1.95rem; font-size:1rem; }
.boton-claro{ background:#fff; color:var(--bosque); }
.boton-claro:hover{ background:#fff; color:var(--bosque); box-shadow:0 8px 24px -8px rgba(0,0,0,.35); }
/* Secundario sobre fondo oscuro: blanco translúcido, tampoco hueco. */
.seccion-oscura .boton-linea,.heroe .boton-linea{
  background:rgba(255,255,255,.14); color:#fff;
}
.seccion-oscura .boton-linea:hover,.heroe .boton-linea:hover{
  background:rgba(255,255,255,.24); color:#fff;
}
.botonera{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:1.8rem; }
.botonera-centro{ justify-content:center; }

@media (prefers-reduced-motion: reduce){ *{ transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* --- Héroe ----------------------------------------------------- */
.heroe{
  position:relative; overflow:hidden; color:rgba(255,255,255,.72);
  background:var(--degradado-noche);
  padding-block:clamp(3rem, 2rem + 3.5vw, 5.5rem);
}
.heroe::before,.heroe::after{
  content:''; position:absolute; border-radius:50%; pointer-events:none;
}
.heroe::before{
  top:-140px; right:-120px; width:620px; height:620px;
  background:radial-gradient(circle, rgba(69,189,28,.20) 0%, transparent 70%);
}
.heroe::after{
  bottom:-120px; left:-100px; width:440px; height:440px;
  background:radial-gradient(circle, rgba(10,95,180,.22) 0%, transparent 70%);
}
.heroe > *{ position:relative; z-index:1; }
.heroe-rejilla{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,1rem + 3vw,3.5rem); align-items:center;
}
@media (max-width:68rem){ .heroe-rejilla{ grid-template-columns:1fr; } }

.heroe-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(69,189,28,.14); border:1px solid rgba(69,189,28,.38);
  color:#96e86e; font-size:.8rem; font-weight:600; line-height:1.5;
  padding:.35rem 1rem; border-radius:var(--pil); margin:0 0 1.4rem;
}
.heroe-badge .icono{ width:1rem; height:1rem; }
.heroe h1{ color:#fff; margin-bottom:.42em; }
.heroe h1 span{ color:var(--verde-vivo); }
.heroe .entradilla{ color:rgba(255,255,255,.72); max-width:36rem; }
/* El H2 del heroe es el subtitulo de la pagina, no un titular de seccion:
   pesa menos que un h2 normal para que el H1 siga mandando. */
.heroe-h2{
  color:rgba(255,255,255,.78); max-width:38rem;
  font-size:clamp(1.08rem,1rem + .45vw,1.3rem); font-weight:500;
  line-height:1.55; letter-spacing:-.012em; margin:0 0 .9em;
}
.migas-heroe{ color:rgba(255,255,255,.5); margin-bottom:1.1rem; }
.migas-heroe a{ color:rgba(255,255,255,.72); }
.migas-heroe a:hover{ color:#fff; }

.heroe .botonera{ margin-top:2rem; }

/* Sobre fondo oscuro, el <strong> del texto no puede seguir siendo tinta. */
.heroe strong,.seccion-oscura strong,.cierre strong{ color:#fff; font-weight:600; }

.heroe-cifras{ display:flex; flex-wrap:wrap; gap:1.4rem 2rem; margin-top:2.6rem; }
.heroe-cifras .cifra{ display:flex; flex-direction:column; }
.cifra-num{ font-size:1.4rem; font-weight:800; color:#fff; line-height:1.1; letter-spacing:-.025em; margin:0; }
.cifra-num span{ color:var(--verde-vivo); }
.cifra-pie{ font-size:.78rem; color:rgba(255,255,255,.5); margin:.15rem 0 0; max-width:9.5rem; line-height:1.45; }

.firma{
  margin-top:2rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.14);
  font-size:.86rem; color:rgba(255,255,255,.5); max-width:30rem; line-height:1.6;
}

/* --- Tira de confianza ------------------------------------------ */
.tira{ background:var(--blanco); border-bottom:1px solid var(--linea); padding-block:1.1rem; }
.tira-lista{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.6rem 2rem; list-style:none; margin:0; padding:0;
}
.tira-it{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.88rem; font-weight:500; color:var(--tinta-2);
}
.tira-it .icono{ color:var(--verde); width:1.05rem; height:1.05rem; }

/* --- Cinta de datos -------------------------------------------- */
.cinta{ background:var(--hueso); border-block:1px solid var(--linea); padding-block:clamp(2.5rem,1.5rem + 2.5vw,3.5rem); }
.cinta-rejilla{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; }
@media (max-width:60rem){ .cinta-rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.5rem; } }
@media (max-width:30rem){ .cinta-rejilla{ grid-template-columns:1fr; } }
.dato-cifra{
  font-family:inherit; font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem); font-weight:800;
  color:var(--tinta); margin:0 0 .25em; letter-spacing:-.03em; line-height:1;
}
.dato-cifra span{ color:var(--verde); }
.dato-pie{ font-size:.9rem; color:var(--tinta-2); margin:0; max-width:none; line-height:1.6; }
.cinta .fuente{ margin-top:2rem; }

/* --- Tarjetas genéricas ----------------------------------------- */
.bloques{ display:grid; gap:1.2rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.bloques-auto{ grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
@media (max-width:62rem){ .bloques{ grid-template-columns:1fr; } }

.bloque{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:1.6rem 1.5rem 1.7rem; transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.bloque:hover{ box-shadow:var(--sombra-m); border-color:var(--linea-2); transform:translateY(-2px); }
.bloque h3{ margin-bottom:.5em; }
.bloque p{ font-size:.95rem; margin-bottom:0; }
.bloques-ejes .bloque:first-child{ background:var(--degradado-noche); border-color:transparent; }
.bloques-ejes .bloque:first-child h3{ color:#fff; }
.bloques-ejes .bloque:first-child p{ color:rgba(255,255,255,.72); }
.bloques-ejes .bloque:first-child a{ color:var(--verde-luz); }
.bloques-ejes .bloque:first-child .icono-caja{ background:rgba(69,189,28,.16); color:var(--verde-luz); }

/* Caja de icono cuadrada y blanda, la marca visual de las tarjetas */
.icono-caja{
  display:grid; place-items:center; width:2.75rem; height:2.75rem;
  border-radius:var(--r-b); background:var(--verde-claro); color:var(--verde);
  margin-bottom:1.1rem;
}
.icono-caja .icono{ width:1.35rem; height:1.35rem; }
.icono-caja-azul{ background:var(--azul-claro); color:var(--azul); }
.seccion-oscura .icono-caja{ background:rgba(69,189,28,.16); color:var(--verde-luz); }

/* --- Pasos numerados (secuencia real, por eso va numerada) ------- */
.paso-num{
  display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%;
  background:var(--verde); color:#fff; font-size:1.05rem; font-weight:700; line-height:1;
  margin:0 0 1.1rem; letter-spacing:0;
}
.pasos{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.6rem; }
.paso-b{ text-align:center; }
.paso-b .paso-num{ margin:0 auto .9rem; }
.paso-b h3{ font-size:1rem; margin-bottom:.4em; }
.paso-b p{ font-size:.9rem; margin:0; max-width:none; }
@media (max-width:70rem){
  .pasos{ grid-template-columns:1fr; gap:1.3rem; max-width:38rem; margin-inline:auto; }
  .paso-b{ display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:1.1rem; align-items:start; text-align:left; }
  .paso-b .paso-num{ margin:0; }
  .paso-b h3{ margin-top:.3rem; }
}

/* --- Ventajas (lista con icono, a media página) ----------------- */
.ventajas{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1.5rem; }
.ventaja{ display:grid; grid-template-columns:2.75rem minmax(0,1fr); gap:1.1rem; align-items:start; }
.ventaja .icono-caja{ margin:0; }
.ventaja h3{ margin:.3rem 0 .35em; font-size:1.02rem; }
.ventaja p{ margin:0; font-size:.95rem; max-width:34rem; }

/* --- Diferencias (dos columnas de texto) ------------------------ */
.pares{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.2rem 3rem; margin-top:2.5rem; }
@media (max-width:58rem){ .pares{ grid-template-columns:1fr; gap:1.8rem; } }
.par h3{ margin-bottom:.45em; }
.par p{ margin:0; font-size:.95rem; }
.par::before{
  content:''; display:block; width:2.2rem; height:3px; border-radius:2px;
  background:var(--verde-vivo); margin-bottom:1.1rem;
}

/* --- Panel del plano ------------------------------------------- */
.plano-panel{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r-l); box-shadow:var(--sombra-l); overflow:hidden;
}
.heroe .plano-panel{ border-color:rgba(255,255,255,.14); box-shadow:0 32px 80px rgba(0,0,0,.45); }
.plano-barra{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem;
  padding:.8rem 1.1rem; border-bottom:1px solid var(--linea);
  font-size:.86rem; background:var(--hueso);
}
.plano-titulo{ font-weight:600; color:var(--tinta); }
.plano-titulo span{ color:var(--tinta-3); font-weight:400; }
.plano-fecha{ margin-left:auto; display:flex; align-items:center; gap:.45rem; }
.plano-fecha output{ min-width:9.5rem; text-align:center; font-weight:600; font-variant-numeric:tabular-nums; color:var(--tinta); }
.paso{
  width:2rem; height:2rem; display:grid; place-items:center; cursor:pointer;
  background:var(--hueso-2); border:0; border-radius:var(--r-s);
  color:var(--tinta); font-size:.95rem; line-height:1;
}
.paso:hover{ background:var(--linea-2); }
.paso:disabled{ opacity:.35; cursor:default; }

.tiempo{
  -webkit-appearance:none; appearance:none; width:8rem; height:2rem; background:transparent;
  cursor:pointer; margin:0;
}
.tiempo::-webkit-slider-runnable-track{ height:4px; background:var(--linea-2); border-radius:2px; }
.tiempo::-moz-range-track{ height:4px; background:var(--linea-2); border-radius:2px; }
.tiempo::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:1.05rem; height:1.05rem; margin-top:-.45rem;
  background:var(--verde); border:3px solid #fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.tiempo::-moz-range-thumb{ width:1.05rem; height:1.05rem; background:var(--verde); border:3px solid #fff; border-radius:50%; }
@media (max-width:34rem){ .tiempo{ display:none; } }

.plano-lienzo{ position:relative; background:var(--blanco); }
.plano-lienzo svg{ display:block; width:100%; height:auto; touch-action:manipulation; }

.parcela{ cursor:pointer; animation:parcela-entra .4s ease both; }
@keyframes parcela-entra{ from{ opacity:0; } to{ opacity:1; } }
.parcela .cuerpo{ transition:fill .18s ease; }
.parcela:hover .cuerpo{ stroke:var(--tinta); stroke-width:1.8; }
.parcela.sel .cuerpo{ stroke:var(--tinta); stroke-width:2.6; }
.parcela text{ pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .parcela{ animation:none; } }

.plano-leyenda{
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; padding:.8rem 1.1rem;
  border-top:1px solid var(--linea); font-size:.78rem; color:var(--tinta-2); background:var(--hueso);
}
.leyenda-it{ display:inline-flex; align-items:center; gap:.4rem; }
.leyenda-it i{ width:.75rem; height:.75rem; border-radius:3px; display:block; }

.ficha{
  position:absolute; right:1rem; top:1rem; width:16rem; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra-l);
  padding:1rem 1.05rem; font-size:.86rem; line-height:1.5; color:var(--tinta-2);
}
.ficha[hidden]{ display:none; }
.ficha h4{ margin:0 0 .1rem; font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
.ficha .ficha-est{ font-weight:600; font-size:.82rem; margin-bottom:.7rem; }
.ficha dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem; }
.ficha dt{ color:var(--tinta-3); }
.ficha dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; font-weight:500; color:var(--tinta); }
.ficha-acciones{ margin-top:.8rem; padding-top:.7rem; border-top:1px solid var(--linea); display:flex; gap:.4rem; flex-wrap:wrap; }
.ficha-acciones span{ font-size:.75rem; background:var(--hueso); border-radius:var(--r-s); padding:.25rem .6rem; color:var(--tinta-2); }
.ficha .cerrar{ position:absolute; top:.5rem; right:.55rem; background:none; border:0; cursor:pointer; color:var(--tinta-3); font-size:1.2rem; line-height:1; padding:.2rem; }
@media (max-width:34rem){ .ficha{ position:static; width:auto; margin:1rem; box-shadow:none; } }

/* --- Colores de estado del plano -------------------------------- */
.f-libre{ background:var(--est-libre); }
.f-llegada{ background:var(--est-llegada); }
.f-ocupada{ background:var(--est-ocupada); }
.f-salida{ background:var(--est-salida); }
.f-limpieza{ background:var(--est-limpieza); }
.f-parcelista{ background:var(--est-parcelista); }
.f-bloqueada{ background:var(--est-bloqueada); }
.c-libre{ color:#2f8c16; }
.c-llegada{ color:#b06a00; }
.c-ocupada{ color:var(--est-ocupada); }
.c-salida{ color:#0b7d82; }
.c-limpieza{ color:var(--est-limpieza); }
.c-parcelista{ color:var(--est-parcelista); }
.c-bloqueada{ color:#6d7a75; }

/* Ilustraciones de interfaz dibujadas en SVG */
.mock{ display:block; width:100%; height:auto; border-radius:var(--r-l); box-shadow:var(--sombra-l); }

/* --- Jornada (secuencia con horas) ------------------------------ */
.jornada{ margin-top:2.5rem; display:grid; gap:.9rem; }
.hora{
  display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:1.8rem;
  padding:1.4rem 1.6rem; align-items:start;
  background:var(--blanco); border-radius:var(--r); border:1px solid var(--linea);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.hora:hover{ box-shadow:var(--sombra-m); border-color:var(--linea-2); }
.hora time{
  font-weight:800; font-size:1.05rem; color:var(--verde);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.hora h3{ margin:0 0 .35em; }
.hora p{ margin:0; font-size:.95rem; max-width:none; }
@media (max-width:44rem){ .hora{ grid-template-columns:1fr; gap:.4rem; padding:1.3rem 1.2rem; } }

/* --- Módulos --------------------------------------------------- */
.modulos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:1.1rem; margin-top:2.2rem; }
.modulo{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:1.5rem 1.4rem 1.6rem; transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.modulo:hover{ box-shadow:var(--sombra-m); border-color:var(--linea-2); transform:translateY(-2px); }
.modulo h3{ font-size:1.05rem; margin-bottom:.4em; }
.modulo p{ font-size:.92rem; margin:0; }
.modulo ul{ margin:.9rem 0 0; padding-left:1.05rem; font-size:.88rem; }
.modulo li{ margin-bottom:.25rem; }
.modulo .fase{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--verde); background:var(--verde-claro); border-radius:var(--pil);
  padding:.2rem .65rem; margin-bottom:.8rem;
}
.modulo .fase[data-fase="2"]{ color:var(--azul); background:var(--azul-claro); }
.modulo .fase[data-fase="3"],.modulo .fase[data-fase="4"]{ color:var(--tinta-2); background:var(--hueso-2); }

/* --- Perfiles --------------------------------------------------- */
.perfiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.1rem; margin-top:2.2rem; }
.perfil{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); padding:1.6rem 1.5rem;
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.perfil:hover{ box-shadow:var(--sombra-m); border-color:var(--linea-2); transform:translateY(-2px); }
.perfil h3{ font-size:1.05rem; margin-bottom:.45em; }
.perfil p{ font-size:.92rem; margin:0; }

/* --- Normativa -------------------------------------------------- */
.normas{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); margin-top:2.2rem; }
.norma{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:1.6rem 1.5rem; border-top:3px solid var(--azul);
}
.norma h3{ font-size:1.05rem; margin-bottom:.35em; }
.norma .ref{ font-size:.78rem; color:var(--tinta-3); display:block; margin-bottom:.7rem; }
.norma p{ font-size:.92rem; margin:0; }
.seccion-oscura .norma{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);
  border-top-color:var(--verde-vivo);
}
.seccion-oscura .norma .ref{ color:rgba(255,255,255,.45); }

/* --- Listas de comprobación ------------------------------------- */
.incluido{ display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.65rem 1.6rem; list-style:none; padding:0; margin:1.8rem 0 0; font-size:.95rem; }
.incluido li{ padding-left:1.65rem; position:relative; }
.incluido li::before{
  content:''; position:absolute; left:0; top:.42em; width:1.05rem; height:1.05rem;
  border-radius:50%; background:var(--verde-claro);
  box-shadow:inset 0 0 0 2px var(--verde-vivo);
}

/* --- Tablas ---------------------------------------------------- */
.tabla-env{ overflow-x:auto; margin:2rem 0; border:1px solid var(--linea); border-radius:var(--r); background:var(--blanco); }
table.tabla{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.tabla th,table.tabla td{ text-align:left; padding:.85rem 1.1rem; border-bottom:1px solid var(--linea); vertical-align:top; }
table.tabla th{ font-weight:600; background:var(--hueso); color:var(--tinta); }
table.tabla tr:last-child td{ border-bottom:0; }

/* --- Preguntas -------------------------------------------------- */
.faq{ max-width:50rem; margin:2.2rem auto 0; display:grid; gap:.7rem; }
.faq details{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); }
.faq details[open]{ border-color:var(--linea-2); box-shadow:var(--sombra); }
.faq summary{
  font-weight:600; font-size:1rem; color:var(--tinta); cursor:pointer;
  padding:1.1rem 3rem 1.1rem 1.4rem; position:relative; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:1.25rem; top:50%; transform:translateY(-50%);
  font-weight:400; font-size:1.5rem; color:var(--verde); line-height:1;
}
.faq details[open] summary::after{ content:'\2212'; }
.faq details > div{ padding:0 1.4rem 1.3rem; }
.faq p{ font-size:.95rem; margin-bottom:.7em; max-width:none; }
.faq p:last-child{ margin-bottom:0; }

/* --- Fotografías y medias tintas -------------------------------- */
.foto{ display:block; width:100%; height:auto; border-radius:var(--r-l); object-fit:cover; background:var(--hueso-2); }
.foto-alta{ aspect-ratio:4/5; }
.foto-ancha{ aspect-ratio:16/9; }
.medio{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,1rem + 3vw,4rem); align-items:center; }
.medio-invertido > *:first-child{ order:2; }
@media (max-width:58rem){
  .medio{ grid-template-columns:1fr; }
  .medio-invertido > *:first-child{ order:0; }
}
.foto-pendiente{
  display:grid; place-items:center; text-align:center; border-radius:var(--r-l);
  background:repeating-linear-gradient(45deg, var(--hueso) 0 12px, var(--hueso-2) 12px 24px);
  color:var(--tinta-3); font-size:.85rem; padding:2rem; min-height:16rem;
  border:1px dashed var(--linea-2);
}

/* --- Llamada final ---------------------------------------------- */
.cierre{ background:var(--degradado-cta); color:rgba(255,255,255,.85); text-align:center; }
.cierre h1,.cierre h2{ color:#fff; max-width:22ch; margin-inline:auto; }
.cierre p{ color:rgba(255,255,255,.85); margin-inline:auto; }
.cierre .rotulo{ background:rgba(255,255,255,.18); color:#fff; }
.cierre .botonera{ justify-content:center; }
.cierre .boton{ background:#fff; color:var(--bosque); }
.cierre .boton:hover{ background:#fff; color:var(--bosque); box-shadow:0 10px 30px -10px rgba(0,0,0,.4); }
.cierre .boton-linea{ background:rgba(255,255,255,.18); color:#fff; }
.cierre .boton-linea:hover{ background:rgba(255,255,255,.3); color:#fff; }

/* --- Cabecera de página interior --------------------------------- */
.cabecera-pagina{
  background:var(--hueso); border-bottom:1px solid var(--linea);
  padding-block:clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.cabecera-pagina .entradilla{ max-width:44rem; }
.cabecera-pagina.centrada{ text-align:center; }
.cabecera-pagina.centrada .entradilla{ margin-inline:auto; }

/* --- Formularios ------------------------------------------------ */
.formulario{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); padding:1.8rem 1.7rem 1.9rem; box-shadow:var(--sombra); }
.campos{ display:grid; gap:1.1rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.campos .ancho{ grid-column:1 / -1; }
@media (max-width:46rem){ .campos{ grid-template-columns:1fr; } }

.campo label{ display:block; font-size:.85rem; font-weight:600; color:var(--tinta); margin-bottom:.35rem; }
.campo .pista{ display:block; font-weight:400; font-size:.8rem; color:var(--tinta-3); margin:-.2rem 0 .4rem; }
.campo input,.campo select,.campo textarea{
  width:100%; font-family:inherit; font-size:.95rem; padding:.7rem .85rem; color:var(--tinta);
  background:var(--hueso); border:1.5px solid var(--linea); border-radius:var(--r-s);
  transition:border-color .18s ease, background .18s ease;
}
.campo textarea{ min-height:8rem; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ background:#fff; border-color:var(--verde); outline:none; }
.campo.error input,.campo.error select,.campo.error textarea{ border-color:#c9482a; background:#fdf3f0; }
.campo .msg-error{ display:block; font-size:.82rem; color:#a8391e; margin-top:.3rem; font-weight:500; }
.trampa{ position:absolute; left:-9999px; }
.opcional{ font-weight:400; color:var(--tinta-3); }

.consent{ display:flex; gap:.7rem; align-items:flex-start; }
.consent input{ width:auto; margin-top:.35rem; flex:0 0 auto; accent-color:var(--verde); }
.consent label{ font-weight:400; font-size:.92rem; line-height:1.55; margin:0; color:var(--tinta-2); }

/* Informacion basica de proteccion de datos (art. 13 RGPD).
   Banda propia de ancho completo justo debajo del formulario: metida en una
   columna quedaba en letra pequena y apretada, que es justo lo que no puede
   pasar con la informacion que hay que haber leido antes de marcar la casilla. */
.capa-datos{
  background:var(--hueso); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  padding:clamp(1.8rem,1.4rem + 1vw,2.6rem) 0;
}
.primera-capa h2{
  font-size:.82rem; margin:0 0 1.2rem; color:var(--tinta-3);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.primera-capa dl{
  margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.3rem 2.2rem;
}
.primera-capa dt{
  font-weight:700; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--verde); margin-bottom:.3rem;
}
.primera-capa dd{ margin:0; font-size:.88rem; line-height:1.6; color:var(--tinta-2); }
@media (max-width:34rem){ .primera-capa dl{ grid-template-columns:1fr; gap:1rem; } }

.rc-aviso{ font-size:.78rem; color:var(--tinta-3); margin:1.3rem 0 0; max-width:38rem; line-height:1.55; }
.rc-aviso a{ color:var(--tinta-3); }
.grecaptcha-badge{ visibility:hidden; }

.aviso{ padding:1.1rem 1.3rem; border-radius:var(--r); background:var(--azul-claro); margin-bottom:1.5rem; font-size:.95rem; border:1px solid rgba(0,68,136,.14); }
.aviso.ok{ background:var(--verde-claro); border-color:rgba(47,140,22,.2); }
.aviso.mal{ background:#fbeee9; border-color:rgba(201,72,42,.2); }
.aviso p{ max-width:none; }
.aviso p:last-child{ margin-bottom:0; }
.aviso h3{ margin-bottom:.35em; font-size:1.05rem; }

.dos-columnas{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:2.5rem; align-items:start; }
@media (max-width:58rem){ .dos-columnas{ grid-template-columns:1fr; gap:2rem; } }

/* --- Textos legales --------------------------------------------- */
.legal{ max-width:42rem; }
.legal > *:first-child{ margin-top:0; }
.legal h2{ font-size:1.4rem; margin-top:2.6rem; }
.legal h3{ margin-top:1.8rem; font-size:1.1rem; }
.legal p,.legal li{ font-size:.98rem; }
.legal ul{ padding-left:1.4rem; max-width:40rem; }
.legal li{ margin-bottom:.4rem; }
.legal .actualizado{ font-size:.86rem; color:var(--tinta-3); }
mark.pendiente{ background:#fbe6b8; color:#6a4a05; padding:.05em .35em; border-radius:4px; }

.migas{ font-size:.85rem; color:var(--tinta-3); margin-bottom:1rem; }
.migas a{ color:var(--tinta-2); }
.fuente{ font-size:.82rem; color:var(--tinta-3); margin-top:1.2rem; max-width:44rem; line-height:1.6; }
.seccion-oscura .fuente,.heroe .fuente{ color:rgba(255,255,255,.45); }

/* --- Pie -------------------------------------------------------- */
.pie{ background:var(--noche); color:rgba(255,255,255,.6); padding:clamp(3rem,2rem + 2.5vw,4rem) 0 1.8rem; }
.pie-rejilla{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2.5rem; }
@media (max-width:58rem){ .pie-rejilla{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:34rem){ .pie-rejilla{ grid-template-columns:1fr; } }
.pie img{ height:2.4rem; width:auto; margin-bottom:1rem; filter:brightness(0) invert(1); opacity:.92; }
.pie p{ font-size:.9rem; color:rgba(255,255,255,.55); max-width:26rem; }
.pie a{ color:rgba(255,255,255,.8); }
.pie h4{ font-size:.75rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:.9rem; }
.pie-nav{ list-style:none; margin:0; padding:0; }
.pie-nav li{ margin-bottom:.5rem; }
.pie-nav a{ font-size:.9rem; color:rgba(255,255,255,.7); text-decoration:none; }
.pie-nav a:hover{ color:#fff; }
.pie-fin{
  margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:center;
  font-size:.84rem; color:rgba(255,255,255,.4);
}
.pie-fin a{ color:rgba(255,255,255,.4); text-decoration:none; }
.pie-fin a:hover{ color:rgba(255,255,255,.75); }
.pie-fin .der{ margin-left:auto; }

/* --- Cobertura del pie ------------------------------------------ */
/* Las 52 provincias y, en sus landings, los municipios. Se despliegan
   con <details>, que ya es un desplegable nativo: sin JavaScript. */
.pie-geo{ margin-top:2.2rem; border-top:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.16); }
.pie-geo-caja + .pie-geo-caja{ border-top:1px solid rgba(255,255,255,.08); }
.pie-geo summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 0; cursor:pointer; list-style:none;
  font-size:.85rem; font-weight:600; color:rgba(255,255,255,.55);
}
.pie-geo summary::-webkit-details-marker{ display:none; }
.pie-geo summary:hover{ color:rgba(255,255,255,.9); }
.pie-geo summary > span:first-child{ display:inline-flex; align-items:center; gap:.5rem; }
.pie-geo summary .icono{ width:1rem; height:1rem; flex:0 0 auto; }
.pie-geo-mas{ font-size:1.2rem; line-height:1; transition:transform .2s; }
@media (prefers-reduced-motion:reduce){ .pie-geo-mas{ transition:none; } }
.pie-geo-caja[open] .pie-geo-mas{ transform:rotate(45deg); }
.pie-geo-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));
  gap:0 1.5rem; padding:.25rem 0 1.6rem;
}
.pie-geo-rejilla a{
  font-size:.82rem; line-height:1.5; color:rgba(255,255,255,.42);
  text-decoration:none; margin-bottom:.45rem;
}
.pie-geo-rejilla a:hover{ color:#fff; text-decoration:underline; }
@media (max-width:36rem){ .pie-geo-rejilla{ grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); } }

/* --- Cookies ---------------------------------------------------- */
/* --- WhatsApp flotante ---
   Enlace a wa.me, no un widget: sin script de terceros y sin cookies.
   Se esconde mientras el aviso de cookies está abierto, porque taparle a
   nadie el botón de «Rechazar» es justo lo que la AEPD no admite. */
.wasap{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:140;
  width:3.5rem; height:3.5rem; border-radius:50%;
  display:grid; place-items:center;
  background:#25d366; color:#fff;
  box-shadow:0 .5rem 1.5rem -.4rem rgba(15,30,21,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wasap:hover,
.wasap:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 .75rem 1.75rem -.4rem rgba(15,30,21,.5);
  color:#fff;
}
.wasap:focus-visible{ outline:3px solid var(--azul); outline-offset:3px; }
.wasap svg{ display:block; }

/* El aviso de cookies ocupa toda la franja de abajo: mientras esté, fuera. */
body:has(#cookies:not([hidden])) .wasap{ display:none; }

@media (max-width:37.5rem){
  .wasap{ right:1rem; bottom:1rem; width:3.25rem; height:3.25rem; }
  .wasap svg{ width:26px; height:26px; }
}

@media (prefers-reduced-motion:reduce){
  .wasap{ transition:none; }
  .wasap:hover, .wasap:focus-visible{ transform:none; }
}

.cookies{
  position:fixed; inset:auto 0 0 0; z-index:150;
  background:var(--blanco); border-top:1px solid var(--linea);
  box-shadow:0 -10px 40px -20px rgba(15,30,21,.5); padding:1rem 0;
}
.cookies[hidden]{ display:none; }
.cookies-int{
  width:min(100% - 3rem, var(--ancho)); margin-inline:auto;
  display:flex; align-items:center; gap:.6rem 2rem; flex-wrap:wrap;
}
.cookies-texto{ flex:1 1 26rem; }
.cookies h2{ font-size:.98rem; margin:0 0 .2rem; }
.cookies p{ font-size:.87rem; margin:0; max-width:54rem; line-height:1.6; }
.cookies .botonera{ margin:0 0 0 auto; flex:0 0 auto; gap:.6rem; }
/* Aceptar y rechazar idénticos: que rechazar cueste más es justo lo que la AEPD no admite */
.cookies .boton-consent{
  font-size:.9rem; padding:.57rem 1.65rem; min-width:8.5rem;
  background:var(--hueso-2); color:var(--tinta);
}
.cookies .boton-consent:hover{ background:var(--linea-2); color:var(--tinta); }
@media (max-width:42rem){
  .cookies-int{ width:calc(100% - 2rem); }
  .cookies .botonera{ margin-left:0; width:100%; }
  .cookies .boton-consent{ flex:1 1 0; min-width:0; }
}

/* --- Utilidades -------------------------------------------------- */
.solo-lector{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.centrado{ text-align:center; margin-inline:auto; }
.centrado p,.centrado .entradilla{ margin-inline:auto; }
.mt0{ margin-top:0; }
.mt-1{ margin-top:1rem; }
.mt-2{ margin-top:2rem; }
.mt-25{ margin-top:2.5rem; }
.mt-3{ margin-top:3rem; }
.mb-1{ margin-bottom:.7rem; }
.mb-2{ margin-bottom:2rem; }
.a-36{ max-width:36rem; }
.a-46{ max-width:46rem; }
.a-52{ max-width:52rem; }
.a-56{ max-width:56rem; }
.a-58{ max-width:58rem; }
.col-nombre{ width:11rem; }
.logo-solo{ height:1.85rem; width:auto; display:block; }

/* --- Selector de idioma ------------------------------------------ */
/* Es un <details> nativo: funciona sin JavaScript. */
.idiomas{ position:relative; }
.idiomas summary{
  display:inline-flex; align-items:center; gap:.35rem;
  list-style:none; cursor:pointer;
  font-size:.85rem; font-weight:600; color:var(--tinta-2);
  padding:.45rem .7rem; border-radius:var(--r-b);
  transition:background .18s ease, color .18s ease;
}
.idiomas summary::-webkit-details-marker{ display:none; }
/* Un borde y una flecha: sin ellos el selector se lee como un adorno y la
   web parece estar sólo en castellano. */
.idiomas summary{ border:1px solid var(--linea); }
.idiomas-flecha{ width:.85rem; height:.85rem; flex:0 0 auto; transition:transform .18s ease; }
.idiomas[open] .idiomas-flecha{ transform:rotate(180deg); }
.idiomas summary:hover{ background:var(--hueso-2); color:var(--verde); }
.idiomas[open] summary{ background:var(--hueso-2); color:var(--verde); }
.idiomas ul{
  position:absolute; top:calc(100% + .4rem); right:0; z-index:120;
  list-style:none; margin:0; padding:.35rem;
  min-width:9.5rem;
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r); box-shadow:var(--sombra-l);
}
.idiomas li{ margin:0; }
.idiomas ul a{
  display:block; padding:.5rem .7rem; border-radius:var(--r-s);
  font-size:.88rem; font-weight:500; color:var(--tinta-2); text-decoration:none;
}
.idiomas ul a:hover{ background:var(--hueso); color:var(--verde); }
.idiomas ul a[aria-current]{ background:var(--verde-claro); color:var(--verde); font-weight:600; }

@media (max-width:66rem){
  .acciones-movil .idiomas{ order:-1; }
  .idiomas summary{ justify-content:center; }
  .idiomas ul{ position:static; box-shadow:none; margin-top:.35rem; }
}

/* Barra de idiomas: una tira fina encima de la cabecera con los cinco a
   la vista. Es lo primero que se ve y no hay que descubrir nada. */
.barra-idiomas{
  background:var(--hueso-2);
  border-bottom:1px solid var(--linea);
  font-size:.82rem;
}
.barra-idiomas-int{ display:flex; justify-content:flex-end; }
.barra-idiomas ul{
  display:flex; flex-wrap:wrap; gap:0;
  list-style:none; margin:0; padding:0;
}
.barra-idiomas li{ margin:0; }
.barra-idiomas a{
  display:block; padding:.4rem .75rem;
  color:var(--tinta-2); text-decoration:none; font-weight:500;
}
.barra-idiomas a:hover{ color:var(--verde); background:var(--blanco); }
.barra-idiomas a[aria-current]{ color:var(--verde); font-weight:700; }

@media (max-width:44rem){
  .barra-idiomas-int{ justify-content:center; }
  .barra-idiomas a{ padding:.4rem .55rem; }
}

/* Idiomas del pie */
.pie-idiomas{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .9rem;
  margin-top:2rem; padding-top:1.2rem;
  border-top:1px solid var(--linea);
  font-size:.85rem; color:var(--tinta-2);
}
.pie-idiomas ul{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; list-style:none; margin:0; padding:0; }
.pie-idiomas li{ margin:0; }
.pie-idiomas a{ color:var(--tinta-2); text-decoration:none; }
.pie-idiomas a:hover{ color:var(--verde); text-decoration:underline; }
.pie-idiomas a[aria-current]{ color:var(--verde); font-weight:600; }