/* Atelyf — hoja única.
   Tipografía: Bebas Neue (condensada, de cartel) para lo que grita, y Manrope
   para lo que se lee. La referencia es gazeinstitute.com. */

@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/bebas-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/bebas-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  /* tinta: azulada, nunca negra del todo */
  --tinta:#15212E;
  --tinta-2:#4A5868;
  --tinta-3:#7C8B9B;

  /* el azul de la marca */
  /* Los azules salen del logotipo, medidos sobre el original:
     el cuerpo de la K, su degradado y el celeste del check. */
  --azul:#0B5AC4;          /* el de la palabra «Atelyf» */
  --azul-osc:#0446AC;      /* el fondo del degradado de la K */
  --azul-claro:#E9F3FE;
  --azul-borde:#BBD9FA;
  --azul-vivo:#53B3FE;     /* el celeste del check, tal cual */

  /* el azul hondo de las secciones que mandan */
  --hondo:#072D6B;
  --hondo-2:#0B3E8C;

  /* colores con sentido, no de adorno:
     verde = ya está cobrado · naranja = falta por cobrar o algo va mal */
  --verde:#0E8A5F;
  --verde-claro:#E4F5EE;
  --verde-borde:#B5E2CE;

  --naranja:#B4491B;
  --naranja-claro:#FBEFE8;
  /* el morado es SOLO para los festivos: ningun otro estado lo usa */
  --morado:#6D3FA8;
  --morado-claro:#F1EAFA;
  --morado-borde:#D9C7F0;
  --naranja-borde:#F2D9C9;

  /* rojizo: solo para el día que se le va de las manos */
  --rojo:#A82E22;
  --rojo-claro:#FBEAE7;
  --rojo-borde:#F0CFC9;

  /* superficies: frías, para que el azul no desentone */
  --fondo:#F3F6FA;
  --fondo-2:#E6EDF5;
  --papel:#FFFFFF;
  --linea:#DFE6EE;
  --linea-fuerte:#C4D0DD;

  /* sombras: suaves y amplias */
  --s1:0 1px 2px rgba(15,41,66,.05), 0 2px 8px rgba(15,41,66,.05);
  --s2:0 2px 6px rgba(15,41,66,.06), 0 10px 30px rgba(15,41,66,.07);
  --s3:0 4px 12px rgba(15,41,66,.07), 0 18px 50px rgba(15,41,66,.10);

  --r:12px;
  --r-s:8px;
  --r-l:16px;
  --r-btn:12px;   /* los botones son cajas, no pastillas: cabe mas texto */

  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Bebas Neue','Arial Narrow',Impact,sans-serif;
}

*{box-sizing:border-box}
/* gana a cualquier display de clase: si algo esta hidden, no se ve */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font:18px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto}
a{color:var(--azul-osc);text-underline-offset:2px}

h1,h2{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.96;
  letter-spacing:.012em;
  margin:0 0 .4em;
}
h1{font-size:2.375rem}
h2{font-size:1.75rem}
/* h3 se queda en la sans: son subtitulos, no carteles */
h3{font-family:var(--sans);font-weight:800;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em;margin:0 0 .45em}
p{margin:0 0 1em}
small{font-size:.8125rem}

/* kicker: mayúsculas pequeñas con tracking, como en lashesandorra */
.kicker{
  font-family:var(--sans);
  font-size:.6875rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--tinta-3);
}

/* ---------- estructura ---------- */
.env{max-width:980px;margin:0 auto;padding:0 18px}

/* La aplicacion va a ancho completo: se usa en el movil y en la tienda no hay
   que leer parrafos, hay que ver listas. La portada sigue con su columna,
   que ahi si hay texto que leer. */
body.panel .env{max-width:none}
.env-est{max-width:620px;margin:0 auto;padding:0 18px}
/* El menu de abajo va fijo y tapa el final de la pagina. El hueco que se le
   deja tiene que contar TAMBIEN la franja del movil (la rayita del iPhone).
   Va sobre «main.env» y no sobre «main» a proposito: «.env» trae un «padding»
   entero y, con menos peso, se lo comia. Asi es como el final de las pantallas
   quedaba debajo del menu. */
main.env{padding-top:6px;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
/* la publica no tiene menu fijo abajo: ese hueco dejaba una franja blanca */
main.publica{padding-top:6px;padding-bottom:0}
/* En el movil 24 px entre bloques dejaban franjas vacias; en ancho si caben. */
.seccion{margin:18px 0}

/* la vuelta atras: lo primero de la pantalla, antes del titulo */
.atras{
  display:inline-flex;align-items:center;gap:5px;margin:14px 0 -6px;
  color:var(--tinta-2);text-decoration:none;font-size:.875rem;font-weight:700;
  padding:8px 12px 8px 8px;border-radius:999px;min-height:40px;
}
.atras:hover{color:var(--azul-osc);background:var(--fondo-2)}
.atras .ico{flex:0 0 auto}

/* el simbolo de la moneda hace de icono en el menu */
.ico-moneda{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.0625rem;line-height:1;letter-spacing:-.02em;
  flex:0 0 auto;
}

/* ---------- barra superior ---------- */
.barra{
  /* Sin backdrop-filter a proposito: en una barra fija y con la pagina larga,
     el desenfoque obliga al navegador a repintar todo el rato y hay maquinas
     donde la pagina se queda pillada. No compensa por un efecto que casi no
     se ve, asi que va de color solido. */
  background:#F3F6FA;
  border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:20;
}
.barra .env{display:flex;align-items:center;justify-content:space-between;height:62px;gap:12px}
/* La marca es el logotipo, no texto: la tipografia del logo no es ninguna de
   las dos de la web y escribirlo a mano quedaba como otra marca distinta. */
.marca{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.marca img{height:28px;width:auto;display:block}
@media (min-width:760px){ .marca img{height:32px} }
.barra nav{display:flex;gap:8px;align-items:center}
.barra nav a{
  color:var(--tinta-2);text-decoration:none;font-size:.875rem;font-weight:600;
  padding:8px 13px;border-radius:999px;
}
.barra nav a:hover{color:var(--azul-osc);background:var(--fondo-2)}

/* El boton de la barra manda: es el unico sitio de la cabecera donde se entra. */
.barra nav a.barra-btn{color:#fff;background:var(--azul);padding:9px 16px;border-radius:var(--r-btn)}
.barra nav a.barra-btn:hover{background:var(--azul-osc);color:#fff}
.barra.oscura nav a{color:#C3D2E0}
.barra.oscura nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.barra.oscura nav a.barra-btn{background:var(--azul-vivo);color:var(--hondo)}
.barra.oscura nav a.barra-btn:hover{background:#fff;color:var(--hondo)}
/* en el movil no caben cinco: los dos de contexto se esconden */
.solo-ancho{display:none}
@media (min-width:700px){ .solo-ancho{display:inline-flex} }

/* ---------- menú inferior ---------- */
.menu{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:#fff;
  border-top:1px solid var(--linea);
  display:flex;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 20px rgba(22,36,31,.05);
}
.menu a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 2px 7px;text-decoration:none;
  color:var(--tinta-3);font-size:.75rem;line-height:1.2;font-weight:600;
  border-radius:14px;
}
.menu a .ico{opacity:.85}
.menu a.on .ico{opacity:1}
.menu a.on{color:var(--azul-osc);background:var(--azul-claro)}
.menu .pin{position:relative}
.menu .pin::after{
  content:"";position:absolute;top:7px;left:50%;margin-left:11px;
  width:7px;height:7px;border-radius:50%;background:var(--naranja);
}

/* Cada titulo de seccion lleva su rayita: da ritmo y no cuesta nada leerlo. */
/* Sin barrita de color delante del titulo: Pedro no la quiere en ningun
   sitio de la web. El titulo se sostiene solo. */
.seccion > h2{position:relative}

/* ---------- superficies ---------- */
.caja{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--s1)}
.caja-p{padding:20px}
.caja+.caja{margin-top:14px}

.lista{
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--s1);
}
/* En la aplicacion las listas van A SANGRE, de un borde de la pantalla al
   otro: metidas en una caja con margenes se veia el fondo por los lados y la
   tira de color de cada cita quedaba flotando dentro. */
body.panel .lista{
  margin-left:-18px;margin-right:-18px;
  border-left:0;border-right:0;border-radius:0;box-shadow:none;
}
.lista>*{border-bottom:1px solid var(--linea)}
.lista>*:last-child{border-bottom:0}

.fila{display:flex;gap:14px;align-items:center;padding:15px 18px;text-decoration:none;color:inherit}
a.fila:hover{background:var(--fondo)}
.fila-cuerpo{flex:1;min-width:0}
.fila-cuerpo b{display:block;font-weight:600}
.fila-cuerpo small{color:var(--tinta-2);display:block;margin-top:2px;font-size:.9375rem}
.fila-fin{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}

/* ---------- citas ---------- */
/* A ancho completo: la hora va en la cabecera, no en una columna lateral. */
/* El color del cliente pinta la TARJETA entera (el fondo y el borde salen de
   PHP, que es quien sabe su color). Nada de rayas de color al lado. */
.cita{
  display:block;padding:15px 18px 16px;position:relative;
  border:1px solid var(--linea);border-radius:var(--r-s);background:#fff;
}
/* Las citas van sueltas, cada una con su color: sin caja que las envuelva,
   que seria una caja dentro de otra. */
.lista-citas{display:grid;gap:10px}
.cita.hecha{background:var(--verde-claro)!important;border-color:var(--verde-borde)!important}
.cita.hecha .vt-nombre{color:var(--verde)}
.cita.hecha .vt-hora{color:var(--verde)}
.cita.anulada{background:var(--fondo-2)!important;border-color:var(--linea)!important}
.cita.anulada .vt-nombre{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--tinta-3)}

/* Se pisa con otra o no da tiempo de llegar: la tarjeta entera en rojo, y
   dentro lo que pasa. Ver el dia en rojo sin saber cual es la casa no vale. */
.cita.choca{background:var(--rojo-claro)!important;border-color:var(--rojo)!important}
.cita.choca .vt-hora,
.cita.choca .vt-nombre{color:var(--rojo)}
.vt-choca{
  margin-top:6px;font-size:.9375rem;line-height:1.45;font-weight:700;color:#8E2016;
}
.vt-choca::before{content:"A0  "}
/* la cabecera: hora, cuanto dura y cuanto es, todo en una linea */
.vt-cab{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:2px;
  font-variant-numeric:tabular-nums;
}
.vt-hora{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em}
.vt-dur{font-size:.8125rem;color:var(--tinta-3)}
.vt-eur{
  margin-left:auto;font-size:.9375rem;font-weight:800;color:var(--tinta-2);
  letter-spacing:-.01em;
}
.cita.hecha .vt-eur{color:var(--verde)}

.vt{min-width:0}
.vt-nombre{
  font-weight:600;display:block;color:inherit;text-decoration:none;
  font-size:1.25rem;line-height:1.2;
}
a.vt-nombre:hover{color:var(--azul-osc)}
.vt-datos{color:var(--tinta-2);font-size:.9375rem;margin-top:3px}
.vt-datos a{color:var(--tinta-2);text-decoration:none;border-bottom:1px solid var(--linea-fuerte)}
.vt-datos a:hover{color:var(--azul-osc);border-color:var(--azul)}
.vt-acc{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
/* la etiqueta de estado vive entre botones: tiene que medir como ellos */
.vt-acc .eti{padding:8px 13px;font-size:.6875rem;line-height:1.15}
/* «Cobrada» se puede volver a pulsar para deshacer el cobro */
button.eti{font-family:inherit;cursor:pointer;border:1px solid transparent}
button.eti.ok:hover{background:var(--verde);color:#fff;border-color:var(--verde)}

/* Lo que le vas a cobrar: la cuenta hecha, no un campo vacio que preguntar. */
.cobro-visto{
  background:var(--verde-claro);border:1px solid var(--verde-borde);
  border-radius:var(--r-s);padding:14px 16px;
}
.cobro-visto b{
  display:block;font-size:1.625rem;font-weight:800;color:var(--verde);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;
}
.cobro-visto small{display:block;color:var(--tinta-2);font-size:.9375rem;margin-top:3px}
.cobro-otro{margin-top:10px}
.cobro-otro > summary{
  cursor:pointer;color:var(--azul-osc);font-size:.9375rem;font-weight:700;
  list-style:none;text-underline-offset:3px;text-decoration:underline;
}
.cobro-otro > summary::-webkit-details-marker{display:none}
.cobro-otro > summary::marker{content:""}

/* Un solo boton de contacto: al tocarlo salen las dos maneras, debajo. Es un
   <details> normal, asi que funciona sin JavaScript en cualquier telefono. */
.contactar{display:inline-block}
.contactar > summary{list-style:none;cursor:pointer}
.contactar > summary::-webkit-details-marker{display:none}
.contactar > summary::marker{content:""}
.contactar[open] > summary{background:var(--azul);color:#fff;border-color:var(--azul)}
.contactar-menu{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
/* En «Hoy» el boton va a lo ancho, que es la pantalla donde se usa de pie. */
.ahora-tel .contactar,.ahora-tel .contactar > summary{width:100%}
.ahora-tel .contactar-menu{display:grid;grid-template-columns:1fr 1fr}

/* ---------- los ratos libres, cada uno con su tono ----------
   Todo lo que es hueco va en verde: cuanto mas cabe, mas fuerte. Asi la
   pantalla no es una lista gris igual de arriba abajo y se ve de un vistazo
   cual merece coger el telefono. */
.fila.hueco{position:relative}
.fila.hueco .ico{color:inherit}

.fila.h-todo{background:#D6F0E4;color:#0A6B49}
.fila.h-grande{background:var(--verde-claro);color:var(--verde)}
.fila.h-medio{background:#EFFAF5;color:#147956}
.fila.h-corto{background:#F7FCFA;color:#3E7A66}
.fila.h-todo .fila-cuerpo small,
.fila.h-grande .fila-cuerpo small,
.fila.h-medio .fila-cuerpo small,
.fila.h-corto .fila-cuerpo small{color:inherit;opacity:.82}

/* y lo que NO es hueco, para que el verde signifique algo */
.fila.h-lleno{background:var(--rojo-claro);color:var(--rojo)}
.fila.h-lleno .fila-cuerpo small{color:inherit;opacity:.82}
.fila.h-libra{background:var(--fondo-2);color:var(--tinta-3)}

/* el aviso de que un dia no cuadra */
.choques{
  background:var(--rojo-claro);border:1px solid var(--rojo-borde);
  border-radius:var(--r-s);
  padding:14px 16px;margin-bottom:14px;
}
.choques b{display:block;color:var(--rojo);font-size:.9375rem;margin-bottom:6px}
.choques ul{margin:0;padding-left:20px}
.choques li{color:#8E2016;font-size:.9375rem;line-height:1.5;margin-bottom:4px}
.choques li:last-child{margin-bottom:0}
.choques li a{color:inherit;font-weight:700;text-underline-offset:3px}
.choques li.justo{color:var(--naranja)}
/* El mismo aviso en la ficha de una cita: dice el problema y, debajo, esta
   el formulario para cambiar la hora. Avisar sin poder arreglarlo no sirve. */
.choques.aja{background:var(--naranja-claro);border-color:var(--naranja-borde)}
.choques.aja b{color:var(--naranja)}
.choques p{margin:0;font-size:.9375rem;line-height:1.55;color:#8E2016}
.choques.aja p{color:#8A4A22}
.choques .arreglo{margin-top:10px;font-weight:700;color:var(--tinta-1)}

/* La llamada desde la ficha del cliente: ancho completo, una sola linea. */
.encaje-llamada{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--azul-claro);border:1px solid var(--azul-borde);
  border-radius:var(--r-s);padding:15px 17px;margin-bottom:14px;
  text-decoration:none;color:var(--azul-osc);
}
.encaje-llamada:hover{background:#DCEBFE}
.encaje-llamada b{display:block;font-size:1.0625rem;font-weight:800}
.encaje-llamada small{display:block;color:var(--tinta-2);font-size:.875rem;line-height:1.45;margin-top:2px}
.encaje-llamada .ico{flex:0 0 auto}

/* ---------- qué día ponerle a un cliente ---------- */
/* Cada propuesta a ancho completo, una debajo de otra, con su porqué y su
   botón. Nada de columnas: se lee de arriba abajo y se decide. */
.encajes{display:grid;gap:14px}
.encaje{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-s);
  padding:18px 18px 16px;
}
.encaje-1{border-color:var(--azul-borde);background:var(--azul-claro)}
.encaje-eti{
  display:inline-block;font-size:.6875rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;color:#fff;background:var(--azul);
  border-radius:999px;padding:4px 11px;margin-bottom:10px;
}
.encaje-tit{display:block;font-size:1.375rem;line-height:1.2;font-weight:800;color:var(--tinta-1)}
.encaje-cuando{display:block;color:var(--tinta-2);font-size:.9375rem;margin-top:4px}
.encaje-porques{margin:14px 0 16px;padding:0;list-style:none;display:grid;gap:8px}
.encaje-porques li{
  position:relative;padding-left:22px;font-size:.9375rem;line-height:1.5;color:var(--tinta-2);
}
.encaje-porques li::before{
  content:"";position:absolute;left:4px;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--verde);
}
.encaje-porques b{color:var(--tinta-1);font-weight:700}
@media (min-width:760px){
  .encajes{grid-template-columns:1fr 1fr}
  .encaje-1{grid-column:1 / -1}
}

/* ---------- avisos ---------- */
.aviso{display:flex;gap:14px;padding:16px 18px;align-items:flex-start}
.aviso-txt{flex:1;min-width:0;font-size:1rem}
.aviso-txt b{font-weight:700}
.aviso-acc{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.cabecera-aviso{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 18px 2px;
}
.cabecera-aviso span:first-child{
  font-size:.6875rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--tinta-3);
}
.cabecera-aviso .cuenta{
  font-size:.75rem;font-weight:700;color:var(--naranja);
  background:var(--naranja-claro);border-radius:999px;padding:3px 10px;
}

/* El precio de antes, tachado, junto al de lanzamiento. */
.tarifa-antes{
  font-size:.5em;font-weight:700;opacity:.6;margin-right:10px;
  text-decoration:line-through;text-decoration-thickness:3px;
}

/* La oferta de lanzamiento, en la pantalla donde se decide. */
.oferta-cabecera{
  background:var(--azul-osc);color:#fff;border-radius:var(--r);
  padding:24px 22px;margin-bottom:6px;
}
.oferta-cabecera.ultimo{background:var(--rojo)}
.oferta-cabecera h1{color:#fff;font-size:1.875rem;line-height:1.1}
.oferta-cabecera p{color:#D6E4F7;font-size:1rem;line-height:1.55}
.oferta-cabecera.ultimo p{color:#FBE3E0}
.oferta-cabecera b{color:#fff}
.oferta-eti{
  display:inline-block;background:rgba(255,255,255,.18);color:#fff;
  border-radius:999px;padding:5px 13px;font-size:.6875rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;
}
.precio-caja.con-oferta{border-color:var(--azul);box-shadow:0 0 0 2px var(--azul-claro)}
.precio-antes{
  color:var(--tinta-3);font-size:1.125rem;font-weight:700;
  text-decoration:line-through;text-decoration-thickness:2px;
}

/* La tira de la prueba: lo primero que se ve, en todas las pantallas, y se
   pone roja el ultimo dia. No se puede cerrar a proposito: es el unico sitio
   donde se entera de que el precio de lanzamiento se le acaba. */
.tira-prueba{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:var(--azul-osc);color:#fff;text-decoration:none;
  padding:11px 18px;font-size:.9375rem;line-height:1.4;text-align:center;
}
.tira-prueba b{color:#fff}
.tira-prueba.ultimo{background:var(--rojo)}
.tira-prueba-txt{max-width:62ch}
.tira-prueba-btn{
  flex:0 0 auto;background:#fff;color:var(--azul-osc);border-radius:999px;
  padding:7px 16px;font-weight:800;font-size:.875rem;white-space:nowrap;
}
.tira-prueba.ultimo .tira-prueba-btn{color:var(--rojo)}
.tira-prueba:hover .tira-prueba-btn{background:var(--azul-claro)}

/* El boton de Ayuda de la barra de arriba: se ve desde cualquier pantalla y
   abre el chat con nosotros. Lleva un punto cuando hay respuesta sin leer. */
.ayuda-btn{
  display:inline-flex;align-items:center;gap:7px;position:relative;
  background:var(--verde-claro);border:1px solid var(--verde-borde);
  color:var(--verde);border-radius:999px;padding:8px 15px 8px 12px;
  font-weight:800;font-size:.875rem;text-decoration:none;
}
.ayuda-btn:hover{background:#D6F0E4}
.ayuda-btn.aqui{background:var(--verde);border-color:var(--verde);color:#fff}
.ayuda-punto{
  position:absolute;top:4px;right:6px;width:9px;height:9px;border-radius:999px;
  background:var(--rojo);border:2px solid var(--papel);
}
/* En el movil se aprieta un poco, pero la palabra NO se quita: un icono
   suelto no dice donde lleva. */
@media (max-width:420px){
  .ayuda-btn{padding:7px 12px 7px 10px;gap:6px;font-size:.8125rem}
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-weight:800;font-size:.9375rem;letter-spacing:.02em;text-transform:uppercase;
  padding:15px 20px;border-radius:var(--r-btn);
  border:1px solid var(--azul);background:var(--azul);color:#fff;
  text-decoration:none;cursor:pointer;min-height:54px;
  box-shadow:0 1px 2px rgba(15,41,66,.16), 0 4px 14px rgba(15,41,66,.14);
  transition:background .15s, box-shadow .15s, transform .06s;
}
.btn:hover{background:var(--azul-osc);border-color:var(--azul-osc);box-shadow:0 2px 4px rgba(15,41,66,.18), 0 8px 22px rgba(15,41,66,.18)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:default;box-shadow:none}

.btn-2{
  background:var(--papel);color:var(--tinta);border-color:var(--linea-fuerte);
  box-shadow:0 1px 2px rgba(22,36,31,.05);
}
.btn-2:hover{background:var(--papel);border-color:var(--tinta-3);box-shadow:0 2px 8px rgba(22,36,31,.08)}

.btn-s{padding:9px 14px;min-height:44px;font-size:.8125rem;letter-spacing:.02em;border-radius:10px}
.btn-peligro{background:var(--papel);color:#9C2B2B;border-color:#E8CFCF;box-shadow:none}
.btn-peligro:hover{background:#FCF4F4;border-color:#9C2B2B;box-shadow:none}
/* Algunos botones se reconocen por el color antes que por la letra. */
.btn-wasap{background:#1EA855;border-color:#1EA855;color:#fff;box-shadow:0 1px 2px rgba(10,70,40,.18), 0 4px 14px rgba(10,70,40,.14)}
.btn-wasap:hover{background:#178544;border-color:#178544}
.btn-problema{background:var(--naranja-claro);color:var(--naranja);border-color:var(--naranja-borde);box-shadow:none}
.btn-problema:hover{background:var(--naranja);border-color:var(--naranja);color:#fff;box-shadow:none}
.btn-tel{background:var(--papel);color:var(--azul-osc);border-color:var(--azul-borde)}
.btn-tel:hover{background:var(--azul-claro);border-color:var(--azul);color:var(--azul-osc)}
.btn-hecha{background:var(--verde);border-color:var(--verde)}
.btn-hecha:hover{background:#0B7350;border-color:#0B7350}

.btn-ancho{width:100%}
.btn-fila{display:flex;gap:10px;flex-wrap:wrap}
/* dos botones a la par, cada uno su mitad */
/* Cambiar los dias de aqui en adelante: va recogido, porque es otra cosa
   distinta de guardar esta cita y no se hace todos los dias. */
.cambiar-dias{margin-top:16px;border-top:1px solid var(--linea);padding-top:16px}
.cambiar-dias > summary{
  cursor:pointer;color:var(--azul-osc);font-weight:700;font-size:.9375rem;
  list-style:none;text-decoration:underline;text-underline-offset:3px;
}
.cambiar-dias > summary::-webkit-details-marker{display:none}
.cambiar-dias > summary::marker{content:""}

.dos-botones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dos-botones .btn{width:100%;padding-left:12px;padding-right:12px}

.enlace-flojo{
  color:var(--tinta-3);font-size:.875rem;text-decoration:none;
  border-bottom:1px solid var(--linea-fuerte);padding-bottom:1px;
}
.enlace-flojo:hover{color:var(--azul-osc);border-color:var(--azul)}

/* ---------- formularios ---------- */
label{display:block;font-weight:600;font-size:.9375rem;margin-bottom:8px;color:var(--tinta-2)}
.campo{margin-bottom:18px}
.campo small{color:var(--tinta-3);display:block;margin-top:6px;line-height:1.45}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],
input[type=number],input[type=date],input[type=time],input[type=month],select,textarea{
  width:100%;font:inherit;padding:15px 16px;
  border:1px solid var(--linea-fuerte);border-radius:var(--r-s);
  background:var(--papel);color:var(--tinta);min-height:58px;
  transition:border-color .15s, box-shadow .15s;
}
textarea{min-height:100px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--azul);
  box-shadow:0 0 0 3px var(--azul-claro);
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23546561' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px;
}
.mal input,.mal select{border-color:#9C2B2B}
.mal input:focus,.mal select:focus{box-shadow:0 0 0 3px #FBECEC}
.error-campo{color:#9C2B2B;font-size:.8125rem;margin-top:6px;font-weight:600}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Dentro de una rejilla cada celda se niega a encogerse por debajo de lo que
   mide su contenido (min-width:auto). Los campos de hora y de fecha traen su
   propio ancho de fabrica, mas grande de la cuenta, y con eso se salian de la
   caja por la derecha en el movil. */
.dos > *,.campo{min-width:0}
input[type=date],input[type=time],input[type=month]{
  -webkit-appearance:none;appearance:none;max-width:100%;
}
.check{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:.9375rem;color:var(--tinta)}
.check input{width:26px;height:26px;min-height:0;margin:0;flex:0 0 26px;accent-color:var(--azul)}

/* ---------- mensajes ---------- */
.flash{
  padding:14px 18px;border-radius:var(--r);margin:18px 0;
  background:var(--azul-claro);border:1px solid var(--azul-borde);
  color:var(--azul-osc);font-size:.9375rem;font-weight:500;
  box-shadow:var(--s1);
}
.flash.mal{background:#FBECEC;border-color:#EDD3D3;color:#8A2020}
.nota{
  background:var(--naranja-claro);border:1px solid var(--naranja-borde);color:#7A3312;
  padding:14px 18px;border-radius:var(--r);font-size:.9375rem;line-height:1.5;
}

/* ---------- etiquetas y cifras ---------- */
.eti{
  display:inline-block;font-size:.6875rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;padding:4px 10px;border-radius:999px;
  background:var(--azul-claro);color:var(--azul-osc);
}
.eti.ok{background:var(--verde-claro);color:var(--verde);border:1px solid var(--verde-borde)}
.eti.n{background:var(--naranja-claro);color:var(--naranja);border:1px solid var(--naranja-borde)}
.eti.g{background:var(--fondo-2);color:var(--tinta-2)}
/* las horas no se escriben en mayusculas: «2 h 55», no «2 H 55» */
.eti.t{text-transform:none;letter-spacing:0;background:var(--fondo-2);color:var(--tinta-2);font-weight:600}

.cifras{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--s1);
}
.cifra{padding:18px 12px;text-align:center;border-right:1px solid var(--linea)}
.cifra.bien b{color:var(--verde)}
.cifra:last-child{border-right:0}
.cifra b{
  display:block;font-family:var(--display);font-size:1.875rem;font-weight:400;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;line-height:1;
}
.cifra small{color:var(--tinta-3);font-size:.75rem;display:block;margin-top:4px}
.cifra.acento b{color:var(--naranja)}

.bolita{
  width:40px;height:40px;border-radius:999px;flex:0 0 40px;
  display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:700;color:#fff;letter-spacing:.01em;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);
}

/* ---------- agenda ---------- */
/* El día manda: va suelto, a ancho completo y por encima de su lista. Antes
   era una barrita gris metida DENTRO de la caja, y quedaba pequeño y con
   pinta de caja dentro de otra. */
.dia-jefe{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin:0 0 12px;padding:0 2px 11px;
  border-bottom:2px solid var(--linea);
}
.dia-jefe h2{
  /* Sin mayúsculas: «Domingo 13 de septiembre» en versales se parte en dos
     lineas en un movil y se lee peor. */
  font-family:var(--display);font-size:1.375rem;font-weight:400;
  letter-spacing:.01em;line-height:1.15;margin:0;text-transform:none;
}
.dia-jefe small{
  color:var(--tinta-2);font-size:.9375rem;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dia-jefe.hoy{border-bottom-color:var(--azul)}
.dia-jefe.hoy h2{color:var(--azul-osc)}
.dia-jefe.hoy small{color:var(--azul)}
/* «hoy» como sello, que dentro del titular en mayúsculas se leía fatal */
.dia-jefe-fin{display:flex;align-items:center;gap:10px}
.jefe-hoy{
  display:inline-block;
  font-family:var(--sans);font-size:.625rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--azul);
  padding:3px 7px;border-radius:3px;
}
/* el punto lleva el color del dia por si mismo */

.nav-fecha{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.nav-fecha b{font-family:var(--display);font-size:1.375rem;font-weight:400;letter-spacing:.01em;text-transform:uppercase}

.mes{
  display:grid;grid-template-columns:repeat(7,1fr);
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--s1);
}
.mes .cd{
  background:var(--fondo-2);text-align:center;font-size:.6875rem;font-weight:700;
  color:var(--tinta-3);padding:9px 0;text-transform:uppercase;letter-spacing:.08em;
  border-bottom:1px solid var(--linea);
}
.mes .d{
  position:relative;background:var(--papel);min-height:74px;padding:7px 6px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:2px;
  border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);
}
.mes .d:nth-child(7n+7){border-right:0}
.mes .d .n{font-size:.9375rem;font-weight:800;color:var(--tinta);line-height:1}
.mes .d .puntos{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px}
.mes .d .puntos i{width:6px;height:6px;border-radius:999px;background:currentColor;opacity:.85}
.mes .d .euros{font-size:.625rem;font-weight:800;letter-spacing:.01em;margin-top:auto}

/* El color del día gana a la casilla en blanco: «.mes .d» pesa dos clases,
   así que el nivel tiene que pesar tres o no se ve. */
.mes .d.n-vacio{background:var(--papel)}
.mes .d.n-hueco{background:var(--verde-claro);color:var(--verde)}
.mes .d.n-completo{background:var(--azul-claro);color:var(--azul-osc)}
.mes .d.n-tope{background:var(--naranja-claro);color:var(--naranja)}
.mes .d.n-libra{background:var(--fondo-2);color:var(--tinta-3)}
.n-choque{background:var(--rojo-claro);color:#8E2016}
.n-choque .n,.n-choque .euros{color:#8E2016}
/* el dia que no cuadra: manda sobre la carga, por eso es el mas fuerte */
.mes .d.n-choque{background:var(--rojo-claro);color:#8E2016;box-shadow:inset 0 0 0 2px var(--rojo)}
.mes .d.n-choque .n{color:#8E2016}
/* el festivo manda sobre todo menos sobre el choque: es lo primero que hay
   que ver, porque ese dia no deberia haber nadie apuntado */
.n-festivo{background:var(--morado-claro);color:var(--morado)}
.n-festivo .n,.n-festivo .euros{color:var(--morado)}
.mes .d.n-festivo{background:var(--morado-claro);color:var(--morado);box-shadow:inset 0 0 0 2px var(--morado-borde)}
.mes .d.n-festivo .n{color:var(--morado)}
.mes .d.n-hueco .n,.mes .d.n-completo .n,.mes .d.n-tope .n{color:inherit}
.mes .d.fuera{opacity:.45}
.mes .d.hoy{box-shadow:inset 0 0 0 2px var(--azul)}
.mes .d.hoy .n{color:var(--azul-osc)}
.mes .d.elegido{box-shadow:inset 0 0 0 3px var(--tinta)}
.mes .d.elegido .n{color:var(--tinta)}

/* ---------- cómo está el día, de un vistazo ----------
   Los colores no son de adorno: salen de lo que trabaja ese día comparado con
   las horas que ella ha dicho que quiere trabajar. */
.n-vacio{background:var(--papel)}
.n-hueco{background:var(--verde-claro);color:var(--verde)}
.n-hueco .n,.n-hueco .euros{color:var(--verde)}
.n-completo{background:var(--azul-claro);color:var(--azul-osc)}
.n-completo .n,.n-completo .euros{color:var(--azul-osc)}
.n-tope{background:var(--naranja-claro);color:var(--naranja)}
.n-tope .n,.n-tope .euros{color:var(--naranja)}
.n-libra{background:var(--fondo-2);color:var(--tinta-3)}
.n-libra .n{color:var(--tinta-3)}

/* la bolita que acompaña al nombre del día */
.punto-carga{
  display:inline-block;width:9px;height:9px;border-radius:999px;
  margin-right:7px;vertical-align:1px;background:var(--linea-fuerte);
}
.n-hueco    .punto-carga{background:var(--verde)}
.n-completo .punto-carga{background:var(--azul)}
.n-tope     .punto-carga{background:var(--naranja)}
.n-choque   .punto-carga,.punto-carga.n-choque{background:var(--rojo)}
.n-festivo  .punto-carga,.punto-carga.n-festivo{background:var(--morado)}
.n-libra    .punto-carga{background:var(--linea-fuerte)}
.punto-carga.n-hueco{background:var(--verde)}
.punto-carga.n-completo{background:var(--azul)}
.punto-carga.n-tope{background:var(--naranja)}
.punto-carga.n-libra{background:var(--linea-fuerte)}
.punto-carga.n-vacio{background:var(--linea-fuerte)}

.leyenda{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:14px}
.ley{
  display:inline-flex;align-items:center;gap:6px;background:none!important;
  font-size:.75rem;color:var(--tinta-2);
}
.ley i{width:12px;height:12px;border-radius:4px;border:1px solid var(--linea);display:block}
.ley.n-vacio    i{background:var(--papel)}
.ley.n-hueco    i{background:var(--verde-claro);border-color:var(--verde-borde)}
.ley.n-completo i{background:var(--azul-claro);border-color:var(--azul-borde)}
.ley.n-tope     i{background:var(--naranja-claro);border-color:var(--naranja-borde)}
.ley.n-choque   i{background:var(--rojo-claro);border-color:var(--rojo)}
.ley.n-festivo  i{background:var(--morado-claro);border-color:var(--morado)}
.ley.n-libra    i{background:var(--fondo-2)}

/* ---------- tabla ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:.875rem}
.tabla th{
  text-align:left;font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--tinta-3);padding:12px 14px;border-bottom:1px solid var(--linea);font-weight:700;
}
.tabla td{padding:13px 14px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.desliza{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- vacío ---------- */
.vacio{text-align:center;padding:28px 22px;color:var(--tinta-3)}
.vacio b{
  display:block;color:var(--tinta);font-family:var(--display);
  font-size:1.5rem;font-weight:400;margin-bottom:8px;letter-spacing:.01em;text-transform:uppercase;
}

/* ---------- portada ---------- */
.hero{
  padding:52px 0 44px;
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(12,107,79,.07), transparent 60%),
    linear-gradient(var(--papel), var(--papel));
  border-bottom:1px solid var(--linea);
}
.hero h1{font-size:2.5rem;max-width:15ch;font-weight:600}
.marca-txt{
  background:linear-gradient(transparent 58%, var(--azul-borde) 58%, var(--azul-borde) 94%, transparent 94%);
  padding:0 .05em;
}
.hero p.lead{font-size:1.0625rem;color:var(--tinta-2);max-width:48ch;line-height:1.6}

.puntos{list-style:none;padding:0;margin:0}
.puntos li{padding:16px 0 16px 34px;position:relative;border-bottom:1px solid var(--linea)}
.puntos li:last-child{border-bottom:0}
.puntos li::before{
  content:"";position:absolute;left:2px;top:21px;width:9px;height:16px;
  border:2.5px solid var(--azul);border-top:0;border-left:0;
  transform:rotate(38deg);border-radius:0 0 2px 0;
}
.puntos li b{display:block;margin-bottom:3px;font-size:1.0625rem}
.puntos li small{color:var(--tinta-3);line-height:1.55;display:block}

.precio-caja{text-align:center;padding:32px 24px}
.precio{
  font-family:var(--display);font-size:4rem;font-weight:400;
  letter-spacing:.01em;line-height:.9;
}
.precio small{
  font-family:var(--sans);font-size:.9375rem;font-weight:700;
  color:var(--tinta-3);letter-spacing:0;text-transform:none;
}

/* ---------- el pie ----------
   En columnas con su titulo: es donde se llega a todo lo que la web tiene, y
   donde un buscador entiende de que va el sitio entero. */
.pie{padding:34px 0 40px;margin-top:0;font-size:.875rem}
.pie-cols{display:grid;gap:26px}
.pie-marca img{height:26px;width:auto;display:block;margin-bottom:12px}
.pie-marca p{margin:0 0 8px;line-height:1.55;max-width:38ch}
.pie-precio{font-size:.8125rem}

.pie-grupo{display:flex;flex-direction:column;gap:7px}
.pie-grupo h2{
  font-family:var(--sans);font-size:.6875rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;margin:0 0 4px;color:#A9C4E4;
}
.pie a{text-decoration:none;line-height:1.45;border-bottom:1px solid transparent;display:inline-block}
.pie a:hover{border-color:currentColor}

.pie-abajo{
  margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8125rem;
}
.pie-abajo p{margin:0}
.pie-legal a{margin-left:16px}
.pie-legal a:first-child{margin-left:0}

@media (min-width:760px){
  .pie-cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
  .pie{padding:46px 0 40px}
}

/* ---------- texto largo ---------- */
.texto{max-width:68ch;line-height:1.65}
.texto h2{margin-top:1.9em;font-size:1.25rem}
.texto h3{margin-top:1.6em;font-size:1.0625rem;color:var(--tinta)}
.texto ul{padding-left:1.25em}
.texto li{margin-bottom:.45em}
.texto code{
  background:var(--fondo-2);padding:2px 6px;border-radius:5px;
  font-size:.875em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- escritorio ---------- */
@media (min-width:760px){
  h1{font-size:2.25rem}
  .hero{padding:76px 0 60px}
  .hero h1{font-size:3.25rem}
  main.env{padding-bottom:48px}
  .caja-p{padding:24px}
  .seccion{margin:24px 0}

  .menu{
    position:static;border-top:0;border-bottom:1px solid var(--linea);
    max-width:none;margin:0;padding:8px 28px;background:transparent;
    box-shadow:none;gap:4px;
  }
  body.panel .env{padding:0 28px}
  .menu a{flex:0 0 auto;padding:9px 18px;font-size:.9375rem}
  .menu .pin::after{top:6px;right:8px}

  .dos-esc{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .cita{padding:18px 24px 20px 28px}
  .vt-nombre{font-size:1.3125rem}
  body.panel .lista{margin-left:-28px;margin-right:-28px}
  .aviso{padding:18px 22px}
  .dia-jefe{margin-bottom:14px;padding-bottom:13px}
  .dia-jefe h2{font-size:1.625rem}
  .mes .d{min-height:98px;padding:10px 10px}
  .mes .d .n{font-size:1.0625rem}
  .mes .d .euros{font-size:.75rem}
  .mes .cd{font-size:.75rem;padding:11px 0}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

@media print{
  .menu,.barra,.vt-acc,.btn,.pie{display:none}
  body{background:#fff}
}

/* ═══════════════════════════════════════════════════════════════
   PASO A PASO (wizard)
   Una pregunta por pantalla. Sin JavaScript se ven todos los pasos
   seguidos y el formulario funciona igual: solo se pierde el paso a paso.
   ═══════════════════════════════════════════════════════════════ */

.paso-cabecera{
  display:flex;align-items:center;gap:14px;margin-bottom:6px;
}
.paso-atras{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:999px;border:1px solid var(--linea-fuerte);
  background:var(--papel);color:var(--tinta-2);cursor:pointer;padding:0;
}
.paso-atras:hover{border-color:var(--tinta-3);color:var(--tinta)}
.paso-cuenta{
  font-size:.875rem;font-weight:700;color:var(--tinta-3);
  letter-spacing:.04em;margin-left:auto;
}

.barra-paso{height:6px;background:var(--fondo-2);border-radius:999px;overflow:hidden;margin:10px 0 26px}
.barra-paso i{display:block;height:100%;background:var(--azul);border-radius:999px;transition:width .3s ease}

.pasos .paso{display:none;animation:entra .22s ease}
.pasos .paso.visible{display:block}
.js-no .pasos .paso{display:block;border-bottom:1px solid var(--linea);padding-bottom:22px;margin-bottom:22px}
.js-no .barra-paso,.js-no .paso-cabecera,.js-no .paso-pie{display:none}

@keyframes entra{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.paso h1{font-size:2.125rem;margin-bottom:10px}
.paso .ayuda{color:var(--tinta-2);font-size:1rem;margin:-2px 0 22px;line-height:1.5}
.paso .campo:last-of-type{margin-bottom:0}

/* barra de acción pegada abajo, como una app */
.paso-pie{
  position:sticky;bottom:0;margin-top:28px;
  padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, var(--fondo) 22%);
}
.paso-pie .btn{width:100%}

/* ---------- elegir entre pocas opciones (dedo, no desplegable) ---------- */
.opciones{display:grid;gap:12px}
.opcion{
  display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  padding:18px 20px;border:2px solid var(--linea);border-radius:var(--r);
  background:var(--papel);cursor:pointer;font:inherit;color:inherit;
  box-shadow:var(--s1);transition:border-color .15s, background .15s;
}
.opcion:hover{border-color:var(--linea-fuerte)}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion .marca-op{
  flex:0 0 26px;width:26px;height:26px;border-radius:999px;
  border:2px solid var(--linea-fuerte);display:flex;align-items:center;justify-content:center;
}
.opcion .marca-op svg{opacity:0;color:#fff;transform:scale(.6);transition:opacity .15s, transform .15s}
.opcion b{display:block;font-size:1.0625rem;font-weight:700}
.opcion small{display:block;color:var(--tinta-2);font-size:.9375rem;margin-top:2px;line-height:1.4}
.opcion:has(input:checked){border-color:var(--azul);background:var(--azul-claro)}
.opcion:has(input:checked) .marca-op{background:var(--azul);border-color:var(--azul)}
.opcion:has(input:checked) .marca-op svg{opacity:1;transform:none}

/* ---------- días de la semana ---------- */
.dias{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.dia-op{position:relative}
.dia-op input{position:absolute;opacity:0;pointer-events:none}
.dia-op span{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;border:2px solid var(--linea);border-radius:14px;
  background:var(--papel);font-weight:700;font-size:1rem;cursor:pointer;
  color:var(--tinta-2);transition:all .15s;
}
.dia-op input:checked+span{background:var(--azul);border-color:var(--azul);color:#fff}
.dia-op input:focus-visible+span{outline:3px solid var(--azul-claro);outline-offset:2px}

/* ---------- la cita que toca ahora ---------- */
.ahora{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-l);
  box-shadow:var(--s2);overflow:hidden;
}
.ahora-cinta{
  display:flex;align-items:center;gap:8px;padding:11px 22px;
  background:var(--azul);color:#fff;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
}
.ahora-cinta.pasada{background:var(--tinta-2)}
.ahora-cuerpo{padding:22px}
.ahora-hora{
  font-family:var(--display);font-size:3.25rem;font-weight:400;
  letter-spacing:.01em;line-height:.9;font-variant-numeric:tabular-nums;
}
.ahora-hora small{
  font-family:var(--sans);font-size:1rem;font-weight:700;
  color:var(--tinta-3);letter-spacing:0;margin-left:12px;vertical-align:4px;
}
.ahora-nombre{font-size:1.5rem;font-weight:700;margin:12px 0 4px;line-height:1.25;letter-spacing:-.015em}
.ahora-donde{display:flex;align-items:center;gap:8px;color:var(--tinta-2);font-size:1rem}
.ahora-donde a{color:var(--tinta-2);text-decoration:none;border-bottom:1px solid var(--linea-fuerte)}
.ahora-nota{
  margin-top:16px;padding:14px 16px;background:var(--naranja-claro);
  border:1px solid var(--naranja-borde);border-radius:var(--r-s);
  color:#7A3312;font-size:.9375rem;line-height:1.5;
}
.ahora-acc{display:grid;gap:10px;margin-top:20px}
.ahora-acc .btn{width:100%}
.ahora-tel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}

/* ---------- resto del día, compacto ---------- */
.luego{margin-top:14px}
.luego-tit{
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--tinta-3);margin:22px 0 10px;
}
.mini{display:flex;align-items:center;gap:14px;padding:14px 18px;text-decoration:none;color:inherit}
.mini:hover{background:var(--fondo)}
.mini-hora{
  font-weight:700;font-variant-numeric:tabular-nums;font-size:1rem;
  min-width:48px;color:var(--tinta-2);
}
.mini b{flex:1;min-width:0;font-weight:600;font-size:1.0625rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .eti{flex:0 0 auto}
/* Hecha no es tachada: es verde. Tachado se reserva para lo que NO se hizo. */
.mini.hecha b{color:var(--verde)}
.mini.hecha .mini-hora{color:var(--verde)}
.mini.anulada b{text-decoration:line-through;color:var(--tinta-3)}

/* ---------- un solo aviso, el que más urge ---------- */
.aviso-uno{
  display:flex;gap:14px;align-items:flex-start;padding:18px 20px;
  background:var(--naranja-claro);border:1px solid var(--naranja-borde);
  border-radius:var(--r);color:#6E2F10;
}
.aviso-uno .ico{flex:0 0 auto;color:var(--naranja);margin-top:1px}
.aviso-uno-txt{flex:1;min-width:0;font-size:1rem;line-height:1.45}
.aviso-uno-txt b{font-weight:700}
.aviso-mas{
  display:block;text-align:center;padding:13px;margin-top:-1px;
  background:var(--papel);border:1px solid var(--linea);border-top:0;
  border-radius:0 0 var(--r) var(--r);
  color:var(--tinta-2);text-decoration:none;font-weight:600;font-size:.9375rem;
}
.aviso-mas:hover{background:var(--fondo);color:var(--azul-osc)}

/* ---------- hecho: confirmación grande ---------- */
.hecho{text-align:center;padding:40px 24px}
.hecho-circulo{
  width:84px;height:84px;border-radius:999px;background:var(--azul-claro);
  color:var(--azul);display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;animation:brinca .4s ease;
}
@keyframes brinca{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* ---------- escritorio ---------- */
@media (min-width:760px){
  body{font-size:17px}
  .menu a{flex:0 0 auto;flex-direction:row;gap:9px;padding:11px 18px;font-size:.9375rem}
  .menu a .ico{width:21px;height:21px}
  .menu .pin::after{top:8px;left:auto;right:8px;margin-left:0}
  .ahora-acc{grid-template-columns:1fr 1fr}
  .paso-pie{position:static;background:none;padding:0}
  .paso-pie .btn{width:auto;min-width:220px}
}

/* ═══════════════════════════════════════════════════════════════
   MAPA Y RUTA
   ═══════════════════════════════════════════════════════════════ */

.mapa-caja{
  height:340px;border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--s1);background:var(--fondo-2);
}
.mapa-caja.chico{height:230px}

/* el número de cada parada sobre el mapa */
.pin-ruta span{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:999px;
  background:var(--azul);color:#fff;font-weight:700;font-size:.9375rem;
  border:2.5px solid #fff;box-shadow:0 2px 8px rgba(22,36,31,.35);
}
.leaflet-container{font:inherit!important;background:var(--fondo-2)}
.leaflet-control-attribution{font-size:10px!important;background:rgba(255,255,255,.8)!important}
.leaflet-popup-content{font:inherit;font-size:.9375rem}

/* ---------- el salto de una casa a la siguiente ---------- */
.salto{
  display:flex;align-items:center;gap:12px;
  padding:11px 18px 11px 20px;
  background:var(--fondo);border-bottom:1px solid var(--linea);
  color:var(--tinta-2);font-size:.9375rem;
}
.salto .ico{flex:0 0 auto;color:var(--tinta-3)}
.salto b{font-weight:700;color:var(--tinta)}
.salto.justo{background:var(--naranja-claro);color:#7A3312}
.salto.justo .ico{color:var(--naranja)}
.salto small{color:var(--tinta-3);font-size:.8125rem}

/* línea de tiempo de la ruta */
.ruta-lista{position:relative}
.ruta-parada{display:flex;gap:14px;padding:16px 18px;align-items:flex-start}
.ruta-num{
  flex:0 0 32px;width:32px;height:32px;border-radius:999px;
  background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.9375rem;margin-top:1px;
}
.ruta-parada.hecha .ruta-num{background:var(--tinta-3)}
.ruta-parada.sin-pin .ruta-num{background:var(--fondo-2);color:var(--tinta-3);border:2px dashed var(--linea-fuerte)}
.ruta-cuerpo{flex:1;min-width:0}
.ruta-cuerpo b{display:block;font-size:1.0625rem;font-weight:600}
.ruta-parada.hecha .ruta-cuerpo b{text-decoration:line-through;color:var(--tinta-3)}
.ruta-cuerpo small{display:block;color:var(--tinta-2);font-size:.9375rem;margin-top:2px}
.ruta-hora{
  font-weight:700;font-variant-numeric:tabular-nums;font-size:1rem;
  white-space:nowrap;color:var(--tinta-2);
}

.zona-eti{
  display:inline-block;font-size:.6875rem;font-weight:700;
  letter-spacing:.04em;padding:3px 9px;border-radius:999px;
  background:var(--fondo-2);color:var(--tinta-2);
}

/* ---------- entrar con Google ---------- */
.btn-google{
  background:var(--papel);color:var(--tinta);border-color:var(--linea-fuerte);
  box-shadow:0 1px 2px rgba(22,36,31,.06);gap:11px;
}
.btn-google:hover{background:var(--papel);border-color:var(--tinta-3);box-shadow:0 2px 10px rgba(22,36,31,.1)}
.btn-google svg{flex:0 0 20px}

.separador{
  display:flex;align-items:center;gap:14px;margin:22px 0;
  color:var(--tinta-3);font-size:.875rem;
}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--linea)}

/* ---------- desglose de la previsión del mes ---------- */
.desglose-barra{
  display:flex;height:10px;border-radius:999px;overflow:hidden;
  background:var(--fondo-2);margin-bottom:16px;
}
.desglose-barra i{display:block;height:100%}
.desglose-linea{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--linea);font-size:.9375rem;
}
.desglose-linea:last-child{border-bottom:0}
.desglose-linea span{display:flex;align-items:center;gap:9px;color:var(--tinta-2)}
.desglose-linea span i{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.desglose-linea b{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}


/* ═══════════════════════════════════════════════════════════════
   PORTADA — un día de trabajo, hora a hora
   ═══════════════════════════════════════════════════════════════ */

/* ---------- arranque ---------- */
.obertura{
  background:var(--hondo);color:#fff;
  padding:64px 0 78px;position:relative;overflow:hidden;
}
.obertura::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 340px at 88% -8%, rgba(83,179,254,.24), transparent 66%);
  pointer-events:none;
}
.obertura .env{position:relative}
.obertura-kicker{
  font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.22em;
  color:var(--azul-vivo);margin:0 0 20px;
}
.obertura-titular{
  font-family:var(--display);font-size:clamp(2.75rem,11vw,4.75rem);
  font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.012em;
  margin:0 0 24px;color:#fff;
}
.obertura-titular em{
  /* Solo el color del check: el subrayado sobre el azul hondo quedaba como un
     recuadro pegado debajo de la palabra. */
  font-style:normal;color:var(--azul-vivo);
  box-shadow:inset 0 -0.09em 0 var(--azul-vivo);
}
.obertura-texto{
  color:#B9BFC6;font-size:1.0625rem;line-height:1.55;max-width:40ch;margin:0 0 32px;
}
.obertura-acc{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.obertura-acc .btn{background:var(--azul-vivo);border-color:var(--azul-vivo);color:var(--hondo)}
.obertura-acc .btn:hover{background:#fff;border-color:#fff;color:var(--hondo)}
.obertura-link{
  color:#fff;text-decoration:none;font-weight:700;font-size:.9375rem;
  border-bottom:2px solid rgba(255,255,255,.28);padding-bottom:3px;
}
.obertura-link:hover{border-color:var(--azul-vivo);color:var(--azul-vivo)}

/* ---------- la foto de fondo ----------
   Como en andomes: la foto viste la seccion entera por detras y encima va un
   velo del azul de marca, que si no el titular no se lee. */
.obertura-fondo{position:absolute;inset:0;overflow:hidden;line-height:0}
.obertura-fondo-img{
  width:100%;height:100%;object-fit:cover;object-position:72% 26%;display:block;
  filter:brightness(1.18) contrast(.92) saturate(.85);
}
.obertura.con-fondo::before{
  /* Un velo parejo y fuerte: la foto tiene que notarse por detras, no
     competir con el titular. Es como lo resuelve andomes. */
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(7,45,107,.96) 10%, rgba(7,45,107,.70) 45%, rgba(7,45,107,.52));
}
.obertura .env{position:relative;z-index:2}

/* ---------- los marrones que desfilan ----------
   Columna estrecha, al lado del titular: una foto de la gestion y en dos
   lineas el marron que es. Sube despacio y en bucle. */
.desfile{
  position:relative;overflow:hidden;
  height:300px;margin-top:34px;
  -webkit-mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.desfile-tira{
  display:flex;flex-direction:column;gap:10px;
  animation:desfilar 42s linear infinite;will-change:transform;
}
@keyframes desfilar{ from{transform:translateY(0)} to{transform:translateY(-50%)} }

.marron{
  display:flex;align-items:center;gap:12px;flex:0 0 auto;
  background:rgba(4,32,78,.72);border:1px solid rgba(255,255,255,.15);
  border-radius:3px;padding:9px 13px 9px 9px;
}
.marron-foto{
  width:52px;height:52px;flex:0 0 52px;object-fit:cover;border-radius:2px;display:block;
}
.marron-txt{min-width:0}
.marron-txt b{display:block;color:#fff;font-size:.875rem;font-weight:800;line-height:1.25}
.marron-txt small{display:block;color:#A9C4E4;font-size:.75rem;margin-top:2px;line-height:1.35}

@media (prefers-reduced-motion:reduce){ .desfile-tira{animation:none} }

.obertura-baja{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.12);
}
.obertura-baja span{
  position:absolute;left:18px;bottom:-1px;width:56px;height:3px;background:var(--azul-vivo);
}

/* ---------- la tira del día ----------
   Va sobre claro a propósito: una pantalla entera en oscuro cansa, y las
   cajitas oscuras sobre fondo oscuro no se distinguían de nada. */
.dia{background:var(--papel);color:var(--tinta);padding:10px 0 70px}
.dia .env{position:relative}

.hito{
  display:grid;gap:14px;
  padding:34px 0;
  border-top:1px solid var(--linea);
}
.hito:first-child{border-top:0}

.hito-hora time{
  display:block;font-family:var(--display);font-size:2.75rem;font-weight:400;
  line-height:.9;letter-spacing:.012em;color:var(--azul);
  font-variant-numeric:tabular-nums;
}
.dia .hito-hora time{color:var(--azul-osc)}
.hito-donde{
  display:block;margin-top:6px;
  font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--tinta-3);
}

.hito-cuerpo h3{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.625rem;color:var(--tinta);margin:0 0 8px;
  line-height:1;letter-spacing:.012em;
}
.hito-cuerpo p{color:var(--tinta-2);font-size:1rem;line-height:1.6;margin:0;max-width:46ch}

/* ---------- las piezas: trozos reales de la app ---------- */
/* Sin caja: el ejemplo se apoya en el fondo y lo sostienen la tipografia y
   el color. Todo metido en recuadros cargaba la pagina sin aportar nada. */
.pieza{margin:0;background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.p-dia{font-family:var(--display);font-size:1.75rem;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.p-sub{color:var(--tinta-3);font-size:.8125rem;margin-top:5px}
.p-nombre{font-weight:800;font-size:1.125rem;margin-bottom:10px}
.p-nota{color:var(--naranja);font-size:.9375rem;line-height:1.5;font-weight:700;margin-top:4px}
.p-boton{
  background:var(--azul);color:#fff;border-radius:999px;padding:13px;
  text-align:center;font-weight:800;font-size:.9375rem;letter-spacing:.03em;text-transform:uppercase;
}
.p-pie{color:var(--tinta-3);font-size:.8125rem;margin-top:10px;text-align:center}
.p-deben .p-pie{text-align:left}

.p-ruta{display:flex;align-items:center;gap:12px}
.p-punto{
  flex:0 0 30px;width:30px;height:30px;border-radius:999px;background:var(--azul);
  color:#fff;                 /* el numero sobre el azul: heredaba la tinta y no se leia */
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.875rem;
}
.p-linea{
  flex:1;font-size:.875rem;color:var(--tinta-2);text-align:center;
  border-top:2px dotted var(--linea-fuerte);padding-top:9px;
}
.p-linea b{color:var(--tinta);font-weight:800}

.p-deben{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:1rem;
}
.p-deben b{font-family:var(--display);font-size:1.875rem;color:var(--naranja);letter-spacing:.01em;line-height:1}

.p-aviso{padding-left:0}
.p-aviso b{display:block;font-size:1rem;margin-bottom:3px}
.p-aviso span{color:var(--tinta-2);font-size:.875rem}

.p-hueco{padding-left:0}
.p-hueco b{display:block;font-size:1rem;margin-bottom:3px}
.p-hueco span{color:var(--tinta-2);font-size:.875rem;line-height:1.5;display:block}

/* ---------- cierre de mes ---------- */
.cierre{
  background:linear-gradient(160deg, var(--azul-osc), var(--azul));
  color:#fff;padding:56px 0;text-align:center;position:relative;overflow:hidden;
}
/* La foto de las llaves va AQUI, de fondo: como banda suelta hacia un hueco
   enorme y no pintaba nada entre la cabecera y los dolores. */
.cierre-fondo{position:absolute;inset:0;line-height:0}
.cierre-fondo-img{
  width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block;
  filter:brightness(1.1) saturate(.8);
}
.cierre.con-fondo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(165deg, rgba(4,70,172,.93), rgba(7,45,107,.88));
}
.cierre .env{position:relative;z-index:2}
.cierre-kicker{
  font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.22em;
  margin:0 0 14px;color:rgba(255,255,255,.72);
}
.cierre-cifra{
  font-family:var(--display);font-size:clamp(4rem,18vw,7rem);line-height:.88;
  letter-spacing:.01em;margin-bottom:18px;
}
.cierre-texto{
  color:rgba(255,255,255,.9);font-size:1.0625rem;line-height:1.55;
  max-width:42ch;margin:0 auto;
}

/* ---------- tarifa ---------- */
.tarifa{background:var(--hondo);padding:56px 0 70px}
.tarifa-caja{
  border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:38px 26px;text-align:center;color:#fff;
  background:linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.tarifa-kicker{
  font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;
  color:var(--azul-vivo);margin:0 0 16px;
}
.tarifa-precio{
  font-family:var(--display);font-size:clamp(3.5rem,16vw,5.5rem);line-height:.88;
  letter-spacing:.01em;margin-bottom:16px;
}
.tarifa-precio small{
  font-family:var(--sans);font-size:1rem;font-weight:700;
  color:#93A8BD;letter-spacing:0;
}
.tarifa-texto{color:#C3D2E0;font-size:1rem;line-height:1.55;max-width:40ch;margin:0 auto 28px}
.btn-claro{background:#fff;color:var(--hondo);border-color:#fff}
.btn-claro:hover{background:var(--azul-vivo);border-color:var(--azul-vivo);color:var(--hondo)}

/* el pie, sobre el azul hondo */
.pie{background:var(--hondo);color:#8399AE;border-top:1px solid rgba(255,255,255,.1);margin-top:0}
.pie a{color:#C3D2E0}
.pie a:hover{color:var(--azul-vivo)}

@media (min-width:820px){
  .obertura{padding:92px 0 104px}
  .obertura-texto{font-size:1.125rem}
  .obertura .env{
    display:grid;grid-template-columns:1fr 320px;gap:52px;align-items:center;
  }
  .desfile{height:400px;margin-top:0}
  .hito{grid-template-columns:210px 1fr;gap:34px;padding:44px 0}
  .hito-hora{text-align:right}
  .hito-hora time{font-size:3.5rem}
  .hito-cuerpo h3{font-size:2rem}
  .cierre{padding:80px 0}
  .tarifa{padding:80px 0 96px}
  .tarifa-caja{padding:52px 40px}
}

/* la barra, cuando la página empieza en oscuro */
.barra.oscura{
  background:#0F2942;border-bottom-color:rgba(255,255,255,.12);
}
.barra.oscura .marca{color:#fff}
.barra.oscura nav a{color:#C3D2E0}
.barra.oscura nav a:hover{color:#fff;background:rgba(255,255,255,.08)}

.obligatorio{
  font-weight:700;font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--azul-osc);background:var(--azul-claro);
  border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:1px;
}

.barra nav a.aqui{color:var(--azul-osc);background:var(--azul-claro)}

/* ---------- horas y minutos, por separado ---------- */
.duracion{display:flex;align-items:center;gap:9px}
.duracion select{width:auto;min-width:82px;flex:0 0 auto;text-align:center}
.duracion span{color:var(--tinta-2);font-weight:700;font-size:.9375rem}

/* en móviles estrechos, dos columnas dejan los campos inservibles */
@media (max-width:430px){
  .dos{grid-template-columns:1fr}
}
/* la duración necesita su fila entera: son dos desplegables y dos palabras */
.dos .campo:has(.duracion){grid-column:1 / -1}

/* ---------- días fijos: cada uno se abre y se cambia por separado ---------- */
.pauta>summary{
  display:flex;gap:14px;align-items:center;padding:15px 18px;
  cursor:pointer;list-style:none;
}
.pauta>summary::-webkit-details-marker{display:none}
.pauta>summary:hover{background:var(--fondo)}
.pauta[open]>summary{background:var(--fondo);border-bottom:1px solid var(--linea)}

.pauta-abrir{
  flex:0 0 auto;font-weight:800;font-size:.6875rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--azul-osc);background:var(--azul-claro);border:1px solid var(--azul-borde);
  border-radius:999px;padding:6px 12px;
}
.pauta[open] .pauta-abrir{color:var(--tinta-2);background:var(--papel);border-color:var(--linea)}
.pauta[open] .pauta-abrir::after{content:'\00a0✕'}

.pauta-editor{padding:18px}

.pauta-aviso{
  color:var(--tinta-3);font-size:.8125rem;line-height:1.5;
  margin:14px 0;
}

/* ---------- lo que ha salido mal ---------- */
.vt-problema{margin-top:5px;color:var(--naranja);font-weight:600}

.aviso-problema{border-color:var(--naranja-borde);background:var(--naranja-claro)}
.aviso-problema b{color:var(--naranja);font-size:1.0625rem}

.problema-linea{padding:9px 0;border-bottom:1px solid var(--linea)}
.problema-linea:last-child{border-bottom:0;padding-bottom:0}
.problema-linea:first-of-type{padding-top:0}
.problema-linea b{display:block;color:var(--naranja);font-weight:700;font-size:.9375rem}
.problema-linea small{display:block;color:var(--tinta-2);margin-top:1px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--fondo-2);color:var(--tinta-2);
  border-radius:999px;padding:4px 11px;font-size:.8125rem;
}
.chip b{color:var(--tinta);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- mis horas ---------- */
.dia-horario{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;
}
.interruptor{display:flex;align-items:center;gap:12px;cursor:pointer;min-width:0}
.interruptor input{position:absolute;opacity:0;pointer-events:none}
.interruptor b{font-weight:700}
.interruptor .pal{
  flex:0 0 46px;width:46px;height:27px;border-radius:999px;
  background:var(--linea-fuerte);position:relative;transition:background .15s;
}
.interruptor .pal::after{
  content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;
  border-radius:999px;background:#fff;box-shadow:var(--s1);transition:transform .15s;
}
.interruptor input:checked+.pal{background:var(--azul)}
.interruptor input:checked+.pal::after{transform:translateX(19px)}
.interruptor input:focus-visible+.pal{outline:2px solid var(--azul-osc);outline-offset:2px}
.interruptor-linea{display:block;color:var(--tinta-2);font-size:.9375rem;line-height:1.5;margin-top:2px}

/* en la lista de días, el interruptor comparte fila con las horas */
.dia-horario .interruptor{flex:1 1 150px}

/* Un dia puede tener varias franjas: quien para a comer pone dos. Van una
   debajo de otra, con la «y» delante de la segunda para que se lea seguido. */
.dia-franjas{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.dia-horas{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.dia-horas input{width:auto;min-width:112px}
.dia-horas span{color:var(--tinta-3);font-weight:700}
.y-tambien{
  color:var(--tinta-3);font-weight:700;font-size:.875rem;
  min-width:14px;text-align:right;
}
.dia-horario .interruptor:has(input:not(:checked))~.dia-franjas{opacity:.4}

/* solo para lectores de pantalla */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:430px){
  .dia-horario{gap:10px}
  .dia-franjas{flex:1 1 100%}
  .dia-horas{justify-content:space-between}
  .dia-horas input{flex:1 1 0;min-width:0}
}

/* ---------- cuadrar lo que te pagan ---------- */
.cuadre{
  margin:12px 0 0;padding:12px 14px;border-radius:12px;
  font-size:.9375rem;line-height:1.45;font-weight:600;
}
.cuadre.falta{background:var(--naranja-claro);border:1px solid var(--naranja-borde);color:var(--naranja)}
.cuadre.sobra{background:var(--azul-claro);border:1px solid var(--azul-borde);color:var(--azul-osc)}

/* ---------- tenerla como app ---------- */
.instalar-mini{display:flex;align-items:center;gap:14px;padding:15px 18px;flex-wrap:wrap}
.instalar-icono img{display:block;border-radius:11px}
.instalar-acc{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}

.instalar-pasos{margin-top:16px}
.instalar-pasos p{
  margin:0;padding:13px 0;border-top:1px solid var(--linea);
  color:var(--tinta-2);font-size:.9375rem;line-height:1.55;
}
.instalar-pasos p:last-child{padding-bottom:0}

@media (max-width:430px){
  .instalar-acc{flex:1 1 100%}
  .instalar-acc .btn{flex:1 1 0}
}

/* ---------- lo que lleva por ti ---------- */
.lleva{background:var(--fondo);padding:52px 0}
.lleva h2{margin-bottom:20px}
.lleva-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lleva-cosa{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--s1);padding:17px 15px;
}
.lleva-ico{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;
  background:var(--azul-claro);color:var(--azul-osc);margin-bottom:11px;
}
.lleva-cosa b{display:block;font-size:1rem;font-weight:800;line-height:1.25}
.lleva-cosa small{display:block;color:var(--tinta-2);font-size:.875rem;line-height:1.45;margin-top:4px}

/* ---------- la pieza de cuadrar el cobro ---------- */
.p-cuadre span{display:block;font-size:1rem;margin-bottom:6px}
.p-cuadre b{font-family:var(--display);font-size:1.5rem;letter-spacing:.01em;line-height:1;vertical-align:-1px}
.p-cuadre em{
  display:block;font-style:normal;font-size:.9375rem;font-weight:700;
  color:var(--naranja);margin-top:2px;
}

@media (min-width:820px){
  .lleva{padding:72px 0}
  .lleva-rejilla{grid-template-columns:repeat(3,1fr);gap:16px}
  .lleva-cosa{padding:22px 20px}
}

/* ---------- el dolor: donde se reconoce ---------- */
.dolor{background:var(--papel);padding:56px 0}
.dolor h2{margin-bottom:22px}
.dolor-lista{list-style:none;padding:0;margin:0 0 26px}
.dolor-lista li{
  position:relative;padding:15px 0 15px 32px;
  border-bottom:1px solid var(--linea);
  color:var(--tinta);font-size:1.0625rem;line-height:1.5;
}
.dolor-lista li:last-child{border-bottom:0}
.dolor-lista li::before{
  content:"—";position:absolute;left:0;top:15px;
  color:var(--naranja);font-weight:800;
}
.dolor-remate{
  color:var(--tinta-2);font-size:1.0625rem;line-height:1.6;max-width:48ch;margin:0;
  padding-left:0;
}

.obertura-pie{
  color:#93A8BD;font-size:.8125rem;line-height:1.5;margin:22px 0 0;
}

.dia-titulo{margin:34px 0 4px}

/* ---------- dudas ---------- */
.dudas{background:var(--fondo);padding:56px 0}
.dudas h2{margin-bottom:20px}
.duda{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--s1);margin-bottom:10px;
}
.duda summary{
  cursor:pointer;list-style:none;padding:17px 20px;
  font-weight:700;font-size:1.0625rem;line-height:1.4;
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.duda summary::-webkit-details-marker{display:none}
.duda summary::after{
  content:"+";color:var(--azul);font-weight:800;font-size:1.375rem;line-height:1;flex:0 0 auto;
}
.duda[open] summary::after{content:"–"}
.duda p{
  margin:0;padding:0 20px 19px;color:var(--tinta-2);font-size:1rem;line-height:1.6;max-width:58ch;
}
.dudas-pie{color:var(--tinta-2);font-size:.9375rem;line-height:1.55;margin:20px 0 0}
.dudas-pie b{color:var(--tinta);font-weight:800}

.tarifa-pie{color:#93A8BD;font-size:.8125rem;margin:18px 0 0}
.cierre .btn-claro{margin-top:26px}

@media (min-width:820px){
  .dolor{padding:76px 0}
  .dudas{padding:76px 0}
}

/* ---------- totales de una factura ---------- */
.totales div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:7px 0}
.totales span{color:var(--tinta-2);font-size:.9375rem}
.totales b{font-variant-numeric:tabular-nums;font-weight:700}
.totales .totales-fin{
  border-top:2px solid var(--tinta);margin-top:8px;padding-top:12px;
}
.totales .totales-fin span{color:var(--tinta);font-weight:700;font-size:1rem}
.totales .totales-fin b{font-family:var(--display);font-size:1.875rem;line-height:1;letter-spacing:.01em}

/* lo que cuelga de un interruptor */
.desplegable{padding-left:2px}

/* las opciones de cuánto se le cobra: la cifra tiene que leerse */
.opciones-cobro .opcion small{font-size:1.0625rem;font-weight:700;color:var(--tinta);margin-top:1px}
.opciones-cobro .opcion:has(input:checked) small{color:var(--azul-osc)}
@media (min-width:560px){
  .opciones-cobro{grid-template-columns:1fr 1fr}
}

/* ---------- la charla de un ticket ---------- */
.charla{display:grid;gap:12px}
.burbuja{
  max-width:88%;padding:14px 16px;border-radius:var(--r);
  border:1px solid var(--linea);background:var(--papel);box-shadow:var(--s1);
}
.burbuja.mia{margin-left:auto;background:var(--azul-claro);border-color:var(--azul-borde)}
.burbuja-quien{
  font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:var(--tinta-3);margin-bottom:6px;
}
.burbuja.mia .burbuja-quien{color:var(--azul-osc)}
.burbuja-txt{line-height:1.55}
.burbuja-cuando{color:var(--tinta-3);font-size:.75rem;margin-top:8px}

/* lo que apuntó el navegador, tal cual */
.diag-ver{
  background:var(--hondo);color:#C3D2E0;border-radius:var(--r);
  padding:16px;margin:0;overflow-x:auto;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;word-break:break-word;max-height:420px;
}

/* ---------- arrastrar, no ----------
   Las filas y las tarjetas son enlaces. Sin esto, al seleccionar texto con el
   ratón el navegador arranca un arrastre del enlace y puede dejar la página
   sin responder hasta recargar. Seleccionar y copiar sigue funcionando. */
a, button, img, svg, .fila, .cita, .mini {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}

/* ---------- lo que te recomiendo ---------- */
.consejos{display:grid;gap:12px}
.consejo{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--azul-claro);border:1px solid var(--azul-borde);
  border-radius:var(--r);padding:16px 18px;
}
.consejo-ico{
  flex:0 0 34px;width:34px;height:34px;border-radius:10px;
  background:var(--azul);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.consejo-txt{flex:1;min-width:0}
.consejo-txt p{margin:0 0 12px;line-height:1.55;color:var(--tinta)}
.consejo-txt b{font-weight:800}

/* ---------- el dolor y su arreglo, uno al lado del otro ---------- */
/* Cada pinchazo es una tarjeta suelta y corta: antes era una columna larga
   de parrafos y se hacia pesado de leer de pie. */
/* ---------- ¿te suena? ----------
   Los seis casos a la vez y apretados: cada uno es una frase corta y el dato
   que la resuelve. Nada de esconder cosas detras de un boton, que en una
   pagina que capta clientes eso resta. */
.dia-pie{color:var(--tinta-2);margin:0 0 20px;font-size:1rem;max-width:52ch}

.casos{display:grid;gap:12px}
.caso{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-s);
  padding:15px 17px;box-shadow:var(--s1);
}
/* Lo grande es lo que hace; debajo, el ejemplo. Dos piezas, ninguna mas. */
.caso-alto{
  display:block;font-family:var(--display);font-size:1.5rem;line-height:1.08;
  letter-spacing:.01em;color:var(--azul-osc);margin-bottom:8px;
}
.caso-pie{display:block;color:var(--tinta-2);font-size:.9375rem;line-height:1.45}
.caso-naranja{color:var(--naranja)}
.caso-rojo{color:var(--rojo)}
.caso-verde{color:var(--verde)}

@media (min-width:640px){
  .casos{grid-template-columns:1fr 1fr}
}
@media (min-width:980px){
  .casos{grid-template-columns:repeat(3, 1fr)}
  .caso{padding:18px 20px}
}


/* ═══════════════════════════════════════════════════════════════
   CONTENIDO — guías, calculadoras y plantillas
   Columna estrecha y de lectura: aquí sí hay párrafos que leer, al
   revés que en la aplicación, que son listas.
   ═══════════════════════════════════════════════════════════════ */

.env-art{max-width:720px;margin:0 auto;padding:0 20px 70px}

.migas{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:22px 0 18px;font-size:.8125rem;color:var(--tinta-3);
}
.migas a{color:var(--tinta-2);text-decoration:none;border-bottom:1px solid var(--linea-fuerte)}
.migas a:hover{color:var(--azul-osc);border-color:var(--azul)}
.migas-claras{color:rgba(255,255,255,.62);margin-top:0}
.migas-claras a{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.3)}
.migas-claras a:hover{color:#fff;border-color:#fff}

.art-h1{font-size:clamp(2rem,7vw,2.875rem);line-height:1;margin:0 0 20px}

/* La respuesta: lo primero, en grande, con su cifra dentro. */
.art-respuesta{
  font-size:1.1875rem;line-height:1.55;color:var(--tinta);
  padding-left:0;margin:0 0 24px;
}
.art-firma{font-size:.8125rem;color:var(--tinta-3);margin:0 0 26px;line-height:1.6}
.art-fuente{color:var(--tinta-3)}

.art-esencial{
  background:var(--azul-claro);border:1px solid var(--azul-borde);
  border-radius:var(--r-s);padding:18px 20px 18px 38px;margin:0 0 30px;
}
.art-esencial li{margin-bottom:9px;line-height:1.5}
.art-esencial li:last-child{margin-bottom:0}

.art-cuerpo{font-size:1.0625rem;line-height:1.7;color:var(--tinta)}
.art-cuerpo h2{font-size:1.75rem;margin:38px 0 14px;line-height:1.1}
.art-cuerpo h3{font-size:1.125rem;margin:26px 0 8px}
.art-cuerpo p{margin:0 0 1.1em}
.art-cuerpo ul,.art-cuerpo ol{margin:0 0 1.2em;padding-left:24px}
.art-cuerpo li{margin-bottom:8px}
.art-cuerpo a{color:var(--azul-osc);text-decoration:none;border-bottom:1.5px solid var(--azul-borde)}
.art-cuerpo a:hover{border-color:var(--azul)}
.art-cuerpo blockquote{
  margin:0 0 1.2em;padding:16px 20px;background:var(--fondo-2);
  border-radius:var(--r-s);
  font-style:normal;color:var(--tinta-2);
}

/* Las tablas son tablas de verdad: una imagen no la lee ni Google ni una IA. */
.tabla-env{overflow-x:auto;margin:0 0 1.4em;-webkit-overflow-scrolling:touch}
.tabla{border-collapse:collapse;width:100%;font-size:.9375rem;min-width:420px}
.tabla caption{
  text-align:left;font-size:.6875rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;color:var(--tinta-3);padding-bottom:9px;
}
.tabla th,.tabla td{padding:11px 14px;border-bottom:1px solid var(--linea);text-align:left}
.tabla thead th{
  background:var(--fondo-2);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--tinta-2);border-bottom:2px solid var(--linea-fuerte);
}
.tabla tbody tr:last-child td{border-bottom:0}

.art-faq{margin-top:44px;border-top:2px solid var(--linea);padding-top:10px}
.art-faq h2{font-size:1.75rem;margin:22px 0 18px}
.art-faq h3{font-size:1.0625rem;margin:22px 0 6px;color:var(--azul-osc)}
.art-faq p{margin:0;color:var(--tinta-2);line-height:1.65}

.art-cierre{
  margin-top:44px;background:var(--fondo-2);border:1px solid var(--linea);
  border-radius:var(--r);padding:26px 24px;
}
.art-cierre p{margin:0 0 18px;line-height:1.6;font-size:1.0625rem}

/* Lo que va detrás. El enlace es real y está en el HTML: el rastreador no
   hace scroll, y los bots de IA tampoco ejecutan JavaScript. */
.art-sigue{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--linea);
}
.art-sigue-eti{
  display:block;font-size:.6875rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:var(--tinta-3);margin-bottom:8px;
}
.art-sigue a{
  font-family:var(--display);font-size:1.375rem;line-height:1.15;
  color:var(--azul-osc);text-decoration:none;
}
.art-sigue a:hover{color:var(--azul)}

/* los índices */
.lista-art{display:grid;gap:12px;margin-top:26px}
.art-fila{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-s);
  padding:16px 18px;text-decoration:none;color:inherit;box-shadow:var(--s1);
}
.art-fila:hover{border-color:var(--azul-borde);box-shadow:var(--s2)}
.art-fila-txt b{display:block;font-size:1.0625rem;line-height:1.3;margin-bottom:4px}
.art-fila-txt small{color:var(--tinta-2);font-size:.875rem;line-height:1.45;display:block}

/* las calculadoras */
.calc{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:22px;box-shadow:var(--s1);margin-bottom:22px;
}
.calc-campos{display:grid;gap:14px;margin-bottom:14px}
.calc label{display:block;font-size:.875rem;font-weight:700;color:var(--tinta-2)}
.calc label input,.calc label select{margin-top:6px}
.calc-checks{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.calc .btn{width:100%}

.calc-res{
  background:var(--hondo);color:#fff;border-radius:var(--r);
  padding:26px 22px;margin-bottom:34px;
}
.calc-cifra{
  font-family:var(--display);font-size:clamp(2.75rem,12vw,4rem);line-height:.95;
  letter-spacing:.01em;
}
.calc-sub{color:#A9C4E4;margin:6px 0 20px;font-size:.9375rem}
.calc-res .tabla{color:#fff;min-width:0}
.calc-res .tabla caption{color:#8FB2D8}
.calc-res .tabla th,.calc-res .tabla td{border-color:rgba(255,255,255,.14)}
.calc-res .tabla thead th{background:rgba(255,255,255,.06);color:#A9C4E4;border-bottom-color:rgba(255,255,255,.2)}
.calc-pie{color:#8FB2D8;font-size:.8125rem;margin:16px 0 0;line-height:1.5}

.descarga{
  background:var(--verde-claro);border:1px solid var(--verde-borde);
  border-radius:var(--r);padding:22px;margin-bottom:30px;text-align:center;
}
.descarga small{display:block;margin-top:12px;color:var(--verde);font-size:.8125rem}

/* la cabecera azul de las páginas que venden */
.pv-alto{background:var(--hondo);color:#fff;padding:10px 0 46px}
.pv-h1{font-size:clamp(2.125rem,8vw,3.25rem);line-height:.98;margin:0 0 18px;color:#fff}
.pv-entrada{font-size:1.125rem;line-height:1.6;color:#C3D2E0;max-width:46ch;margin:0 0 26px}
.pv-acc{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pv-pie{font-size:.8125rem;color:#8FB2D8}
.pv-bloque{margin-top:40px;font-size:1.0625rem;line-height:1.7}
.pv-bloque h2{font-size:1.75rem;margin:0 0 14px;line-height:1.1}
.pv-bloque p{margin:0 0 1.1em}
.pv-bloque ul{margin:0 0 1.2em;padding-left:24px}
.pv-bloque li{margin-bottom:8px}
.pv-bloque a{color:var(--azul-osc);text-decoration:none;border-bottom:1.5px solid var(--azul-borde)}
.pv-bloque a:hover{border-color:var(--azul)}

@media (min-width:760px){
  .env-art{padding-bottom:90px}
  .calc-campos{grid-template-columns:1fr 1fr}
  .calc .btn{width:auto;min-width:220px}
  .pv-alto{padding:16px 0 60px}
}

/* el artículo que entra por debajo */
.art-siguiente{
  border-top:8px solid var(--fondo-2);margin-top:50px;padding-top:10px;
}

/* ---------- lo que deben, mes a mes ----------
   El mes cerrado es el que toca reclamar: casi todo el mundo paga cuando el
   mes se ha terminado, no antes. */
.deben-meses{display:grid;gap:8px;margin-bottom:14px}
.deben-mes{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--papel);border:1px solid var(--linea);

  border-radius:var(--r-s);padding:12px 15px;
}
.deben-mes-txt b{display:block;font-size:1rem;line-height:1.2}
.deben-mes-txt small{display:block;color:var(--tinta-3);font-size:.8125rem;margin-top:2px}
.deben-mes-eur{font-size:1.0625rem;font-weight:800;white-space:nowrap}

/* el mes en curso: aún no ha terminado, no hay prisa */
.deben-mes .deben-mes-eur{color:var(--tinta-2)}
/* cerrado: ya se puede pasar a cobrar */
.deben-mes.cerrado{background:var(--naranja-claro);border-color:var(--naranja-borde)}
.deben-mes.cerrado .deben-mes-eur{color:var(--naranja)}
.deben-mes.cerrado .deben-mes-txt small{color:var(--naranja)}
/* de hace más de un mes: eso ya es un aviso */
.deben-mes.viejo{background:var(--rojo-claro);border-color:var(--rojo-borde)}
.deben-mes.viejo .deben-mes-eur,
.deben-mes.viejo .deben-mes-txt small{color:var(--rojo)}

.deben-detalle{color:var(--naranja);font-weight:600}

/* ---------- lo que suma el mes que se está mirando ---------- */
.mes-suma{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--s1);padding:16px 18px;margin-bottom:14px;
}
.mes-suma-alto b{
  display:block;font-family:var(--display);font-size:2.25rem;line-height:1;
  letter-spacing:.01em;margin:6px 0 4px;
}
.mes-suma-alto small{display:block;color:var(--tinta-3);font-size:.8125rem}
.mes-suma-parte{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--linea);margin-top:12px;padding-top:10px;
  font-size:.9375rem;color:var(--tinta-2);
}
.mes-suma-parte:first-of-type{margin-top:14px}
.mes-suma-parte b{color:var(--tinta);font-weight:800;white-space:nowrap}
.mes-suma-parte i{
  display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;
  vertical-align:0;
}
.p-hecho{background:var(--verde)}
.p-queda{background:var(--azul-vivo)}

/* ---------- quién hay detrás ----------
   Una sola caja, el texto a un lado y las tres cifras al otro, separadas por
   una raya fina. Sin barras de color: no se usan en toda la web. */
.quienes{background:var(--hondo);color:#C3D2E0;padding:34px 0}
.quienes-caja{display:grid;gap:24px}
.quienes-txt h2{
  font-family:var(--display);font-size:clamp(1.5rem,6vw,2.125rem);line-height:1.05;
  text-transform:uppercase;letter-spacing:.012em;margin:0 0 14px;color:#fff;
}
.quienes-txt p{margin:0 0 12px;font-size:1.0625rem;line-height:1.6}
.quienes-txt p:last-child{margin-bottom:0}
.quienes-txt b{color:#fff;font-weight:700}
/* Sobre el azul hondo un enlace azul no se lee: va en claro y subrayado. */
.quienes-txt a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--azul-vivo)}
.quienes-txt a:hover{text-decoration-color:#fff}

.quienes-cifras{margin:0;display:grid;gap:0}
.quienes-cifras > div{
  padding:16px 0;border-top:1px solid rgba(255,255,255,.15);
}
.quienes-cifras > div:first-child{border-top:0;padding-top:0}
.quienes-cifras dt{
  font-family:var(--display);font-size:1.75rem;line-height:1;letter-spacing:.01em;
  color:var(--azul-vivo);margin-bottom:5px;
}
.quienes-cifras dd{margin:0;font-size:.9375rem;line-height:1.45}

@media (min-width:820px){
  .quienes{padding:54px 0}
  .quienes-caja{grid-template-columns:1.25fr 1fr;gap:52px;align-items:start}
  .quienes-cifras > div:first-child{padding-top:16px;border-top:1px solid rgba(255,255,255,.15)}
}


/* ---------- todo esto, incluido ---------- */
.incluido{background:var(--papel);padding:38px 0 34px}
.incluido h2{font-size:1.875rem;margin:0 0 8px}
.incluido-pie{color:var(--tinta-2);margin:0 0 24px;font-size:1rem}
.incluido-grupos{display:grid;gap:26px}
.incluido-grupo h3{
  font-family:var(--sans);font-size:.6875rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:var(--azul);margin:0 0 12px;
}
.incluido-grupo ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.incluido-grupo li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:1rem;line-height:1.45;color:var(--tinta);
}
.incluido-grupo .ico{flex:0 0 auto;margin-top:2px;color:var(--verde)}

/* La cola: lo que no es una funcion de la aplicacion sino la respuesta de
   siempre —con que se abre, donde vale, quien contesta—. */
.incluido-cola{
  margin:26px 0 0;padding-top:20px;border-top:1px solid var(--linea);
  color:var(--tinta-2);font-size:.9375rem;line-height:1.6;max-width:80ch;
}

@media (min-width:760px){
  .incluido{padding:56px 0 50px}
  /* Todos los grupos con el mismo numero de lineas y las columnas alineadas
     arriba: con grupos de distinto largo la seccion se veia descuadrada. */
  .incluido-grupos{grid-template-columns:repeat(2, 1fr);gap:32px 36px;align-items:start}
  .incluido-grupo ul{gap:12px}
}
@media (min-width:1120px){
  .incluido-grupos{grid-template-columns:repeat(4, 1fr);gap:30px}
  .incluido-grupo li{font-size:.9375rem}
}
/* Cuando van en columnas, todas las lineas ocupan lo mismo aunque el texto
   sea mas corto: si no, un grupo acaba mas arriba que el de al lado y la
   seccion se ve torcida. Cuanto mas estrecha la columna, mas renglones hace
   falta reservar. En movil no aplica: van una debajo de otra. */
@media (min-width:760px){
  .incluido-grupo li{min-height:2.9em}          /* dos columnas: dos renglones */
  .incluido-grupo li > span{display:block}
}
@media (min-width:1120px){
  .incluido-grupo li{min-height:4.35em}         /* cuatro columnas: tres */
}



/* ═══════════════════════════════════════════════════════════════
   LANDING DE LOS ANUNCIOS (/prueba)
   Una sola cosa que hacer: dejar el correo. Sin menú y sin enlaces
   que saquen de aquí, porque cada salida es alguien que se pierde.

   Viste igual que la portada —el mismo titular de palo seco sobre el
   azul hondo, la misma foto por detrás con su velo, el mismo desfile—
   porque quien llega de un anuncio y luego entra en atelyf.com tiene
   que reconocer que es lo mismo.

   Lo que cambia: el reloj de arriba y el botón de abajo no se van de
   la pantalla en ningún momento. La oferta se acaba, y eso hay que
   verlo mientras se lee, no al final.
   ═══════════════════════════════════════════════════════════════ */
body.landing{background:var(--papel)}
.landing .env-est{max-width:640px;margin:0 auto;padding:0 18px;position:relative;z-index:2}

/* ---------- el reloj de arriba ---------- */
.lp-reloj{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--rojo);color:#fff;padding:9px 16px;text-align:center;
  font-size:.9375rem;line-height:1.3;box-shadow:0 2px 12px rgba(168,46,34,.35);
}
.lp-reloj-txt{opacity:.94}
.lp-reloj-txt b{font-weight:800;opacity:1}
.lp-reloj-num{
  font-weight:800;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.18);border-radius:999px;padding:3px 12px;
  animation:latido 2.4s ease-in-out infinite;
}
.lp-reloj.muerto{background:var(--tinta-2);box-shadow:none}
@keyframes latido{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.06);opacity:.9}
}

/* ---------- la cabecera: la misma que la portada ---------- */
.lp-alto{
  position:relative;background:var(--hondo);color:#fff;
  padding:38px 0 44px;overflow:hidden;
}
.lp-alto::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 340px at 88% -8%, rgba(83,179,254,.24), transparent 66%);
  pointer-events:none;
}
.lp-fondo{position:absolute;inset:0;overflow:hidden;line-height:0}
.lp-fondo-img{
  width:100%;height:100%;object-fit:cover;object-position:72% 26%;display:block;
  filter:brightness(1.18) contrast(.92) saturate(.85);
}
.lp-alto.con-fondo::before,
.lp-cierre.con-fondo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(160deg, rgba(7,45,107,.94) 8%, rgba(7,45,107,.80) 52%, rgba(7,45,107,.92));
}
.lp-logo{width:132px;height:auto;display:block;margin:0 0 22px}
.lp-eti{
  display:inline-block;background:var(--verde);color:#fff;border-radius:999px;
  padding:6px 14px;font-size:.75rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;
}
.lp-h1{
  font-family:var(--display);font-size:clamp(2.5rem,10vw,4rem);
  font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.012em;
  margin:18px 0 18px;color:#fff;
}
.lp-h1 em{font-style:normal;color:var(--azul-vivo);box-shadow:inset 0 -0.09em 0 var(--azul-vivo)}
.lp-entrada{color:#B9BFC6;font-size:1.0625rem;line-height:1.55;max-width:40ch;margin:0 0 26px}
.lp-pie-form{color:#93AEC9;font-size:.875rem;line-height:1.5;margin:16px 0 0}

/* ---------- los dos botones ---------- */
/* Un solo boton, y ancho: en la cabecera de la landing no hay nada mas que
   decidir. El segundo («quiero la oferta ya») se quito el 15-09-2026.
   El de arriba se quito el 16-09-2026: ahi va el formulario en persona. */
.lp-dos-botones{display:grid;gap:10px}
.lp-dos-botones .btn{width:100%;min-height:58px;font-size:1rem}
.lp-btn-a{background:var(--verde);border-color:var(--verde);color:#fff}
.lp-btn-a:hover{background:#0B6B4A;border-color:#0B6B4A;color:#fff}

/* ---------- el formulario de la cabecera ----------
   Va en la primera pantalla y por encima de la foto, no debajo de todo. */
.lp-alto .env-est{position:relative;z-index:2}
.lp-alto .lp-form{margin-top:4px}
.lp-alto .lp-h1{margin:16px 0 14px}
.lp-alto .lp-entrada{margin-bottom:20px}

/* ---------- el desfile de la portada, tal cual ---------- */
.lp-desfile{background:var(--hondo);padding:4px 0 30px;overflow:hidden}
.lp-desfile .desfile{max-width:340px;margin:0 auto;height:290px}

/* ---------- la oferta ---------- */
.lp-oferta{background:var(--verde-claro);padding:36px 0;text-align:center}
.lp-oferta-eti{
  display:inline-block;background:var(--verde);color:#fff;border-radius:999px;
  padding:5px 13px;font-size:.6875rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;
}
.lp-oferta h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.875rem,7.5vw,2.75rem);line-height:.98;letter-spacing:.012em;
  color:var(--verde);margin:16px 0 22px;
}
/* Los dos precios, uno al lado del otro tambien en el movil: el tachado y
   el nuevo se ven de un vistazo, que es justo lo que hay que ver. */
.lp-precios{display:flex;gap:10px;justify-content:center}
.lp-precio{
  background:var(--papel);border:2px solid var(--verde-borde);border-radius:var(--r);
  padding:16px 12px;flex:1 1 0;min-width:0;box-shadow:0 6px 18px rgba(14,138,95,.12);
}
.lp-antes{
  display:block;color:var(--tinta-3);font-size:1.0625rem;font-weight:700;
  text-decoration:line-through;text-decoration-thickness:2px;
}
.lp-precio b{display:block;font-size:2rem;font-weight:800;color:var(--verde);line-height:1.05}
.lp-precio small{display:block;color:var(--tinta-3);font-size:.8125rem;margin-top:3px;line-height:1.35}
.lp-oferta-pie{color:var(--tinta-2);font-size:1rem;line-height:1.6;margin:22px 0}
.lp-oferta-pie b{color:var(--tinta)}
.lp-oferta .btn{min-height:56px;padding:14px 30px}

/* ---------- lo que hace ---------- */
.lp-hace{padding:36px 0 6px}
.lp-hace h2,.lp-dudas h2,.lp-quienes h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.875rem;line-height:1;letter-spacing:.012em;margin:0 0 22px;
}
.lp-lista{display:grid;gap:16px}
.lp-cosa{display:flex;gap:12px;align-items:flex-start}
.lp-cosa svg{flex:0 0 auto;color:var(--verde);margin-top:3px}
.lp-cosa b{display:block;font-size:1.0625rem;line-height:1.3}
.lp-cosa small{display:block;color:var(--tinta-2);font-size:.9375rem;line-height:1.5;margin-top:3px}

.lp-quienes{background:var(--fondo-2);padding:30px 0;margin-top:34px}
.lp-quienes p{color:var(--tinta-2);font-size:1rem;line-height:1.65;margin:0}
.lp-quienes b{color:var(--tinta)}

.lp-dudas{padding:34px 0}

/* ---------- el cierre, con foto ---------- */
.lp-cierre{
  position:relative;background:var(--hondo);color:#fff;
  padding:40px 0 46px;overflow:hidden;
}
.lp-cierre h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,8vw,3rem);line-height:.95;letter-spacing:.012em;
  margin:0 0 14px;color:#fff;
}
.lp-cierre p{color:#B9BFC6;font-size:1rem;line-height:1.55;margin:0 0 24px;max-width:42ch}

/* ---------- el formulario ---------- */
.lp-form{
  background:var(--papel);border-radius:var(--r);padding:22px 20px 20px;
  box-shadow:0 12px 38px rgba(3,20,50,.36);
}
.lp-form label{color:var(--tinta-2)}
.lp-tel{display:flex;gap:8px}
.lp-tel input[name=prefijo]{flex:0 0 86px;text-align:center;font-weight:700}
.lp-tel input[name=telefono]{flex:1 1 auto;min-width:0}
.lp-btn{
  background:var(--verde);border-color:var(--verde);color:#fff;
  width:100%;min-height:58px;font-size:1rem;margin-top:4px;
}
.lp-btn:hover{background:#0B6B4A;border-color:#0B6B4A;color:#fff}
.lp-error{
  background:var(--rojo-claro);border:1px solid var(--rojo-borde);color:var(--rojo);
  border-radius:var(--r-s);padding:10px 12px;margin:0 0 14px;font-size:.9375rem;
}

/* El hueco de abajo es el que ocupa la barra flotante: si no, tapa el aviso
   legal y parece que falta. */
.lp-pie{
  background:#04204E;color:#93AEC9;text-align:center;font-size:.875rem;
  padding:26px 0 calc(98px + env(safe-area-inset-bottom));
}
.lp-pie p{margin:0 0 8px;line-height:1.6}
.lp-pie p:last-child{margin-bottom:0}
.lp-pie b{color:#fff}
.lp-pie a{color:#C3D2E0}
.lp-pie a:hover{color:var(--azul-vivo)}

/* ---------- la barra de abajo, siempre a la vista ---------- */
.lp-flota{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--papel);border-top:1px solid var(--linea);
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 18px rgba(15,41,66,.16);
}
.lp-flota-txt b{
  display:block;font-size:1.0625rem;font-weight:800;color:var(--rojo);
  font-variant-numeric:tabular-nums;line-height:1.15;
}
.lp-flota-txt small{display:block;color:var(--tinta-3);font-size:.75rem;margin-top:1px}
.lp-flota .btn{flex:0 0 auto;min-height:46px;padding:12px 22px;font-size:.9375rem}

/* ---------- la pantalla de después ----------
   Aqui no se entra a Atelyf: se entra desde el correo. Asi que solo hay una
   cosa que hacer, y la pantalla no ensena nada mas. */
/* Esta seccion es lo UNICO que hay en la pagina. En la landing debajo van el
   desfile, la oferta y los precios, asi que el papel blanco del body nunca se
   ve; aqui, si no se llena el alto, asoma por abajo y parece que falta media
   web. Centrada en vertical se lee como lo que es: un acuse de recibo. */
.lp-gracias{
  padding:44px 0 54px;
  min-height:100vh;display:flex;align-items:center;
}
@supports (min-height:100svh){
  .lp-gracias{min-height:100svh}
}
.lp-tic{
  width:68px;height:68px;border-radius:50%;background:var(--verde);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 0 20px;
}
.lp-pasos{
  margin:26px 0 0;padding:0;list-style:none;counter-reset:paso;
  display:grid;gap:12px;
}
.lp-pasos li{
  counter-increment:paso;position:relative;padding-left:42px;
  color:#D6E4F7;font-size:1.0625rem;line-height:1.45;
}
.lp-pasos li b{color:#fff;font-weight:700}
.lp-pasos li::before{
  content:counter(paso);position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:50%;
  background:var(--azul-vivo);color:var(--hondo);
  font-size:.9375rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.lp-buscalo{
  background:rgba(255,255,255,.08);border-radius:var(--r-s);
  padding:18px 20px;margin-top:30px;color:#C3D2E0;
}
.lp-buscalo > b{color:#fff;display:block;margin-bottom:10px;font-size:1rem}
.lp-buscalo b{color:#fff}
.lp-buscalo ul{margin:0;padding-left:20px}
.lp-buscalo li{margin-bottom:7px;line-height:1.5;font-size:.9375rem}
.lp-buscalo li:last-child{margin-bottom:0}
.lp-buscalo p{margin:14px 0 0;font-size:.9375rem;line-height:1.5}
.lp-buscalo a{color:var(--azul-vivo)}

@media (prefers-reduced-motion:reduce){
  .lp-reloj-num{animation:none}
}

@media (min-width:680px){
  .lp-precios{gap:14px}
  .lp-precio{padding:20px 24px;flex:0 1 210px}
  .lp-precio b{font-size:2.25rem}
  .lp-alto{padding:52px 0 60px}
  .lp-desfile .desfile{max-width:380px;height:330px}
  .lp-form{padding:26px 24px 24px}
  .lp-cierre{padding:56px 0 62px}
}

/* En pantalla ancha el texto y el formulario van uno al lado del otro: si se
   apilan, el formulario se cae por debajo del borde y volvemos a lo mismo.

   El :not(.lp-gracias) NO es un adorno. La pantalla de después reusa la clase
   .lp-alto y NO tiene formulario, asi que se comia esta rejilla sin querer: el
   texto se quedaba en la columna de 1fr —176 px reales— partiendo las frases
   cada tres palabras, y los pasos se iban solos a la columna del formulario.
   Se veia roto de verdad. Ahi debajo va una sola columna y punto. */
@media (min-width:900px){
  .lp-alto:not(.lp-gracias) .env-est{
    /* El ensanche NO es estetica. El resto de la pagina va a 640 y esta
       cabecera lo heredaba, pero aqui dentro hay DOS columnas: 640 menos el
       formulario (420) menos el hueco (44) dejaba 183 px para el titular, y a
       64 px de letra eso son SIETE lineas de dos palabras. Medido en pantalla:
       a 960 baja a tres lineas y de ahi en adelante ya no gana nada. */
    max-width:1020px;
    display:grid;grid-template-columns:1fr minmax(360px,420px);
    gap:44px;align-items:center;
  }
  .lp-alto .lp-logo,
  .lp-alto .lp-eti,
  .lp-alto .lp-h1,
  .lp-alto .lp-entrada{grid-column:1}
  .lp-alto .lp-form{grid-column:2;grid-row:1 / span 4;align-self:center;margin-top:0}
  .lp-alto .lp-pie-form{grid-column:2;margin-top:12px;text-align:center}
}

/* ---------- el estado del correo, en Ajustes ----------
   El correo no sale en el momento: se apunta y sale por detrás. Si algo se
   atasca hay que verlo aquí, no descubrirlo porque alguien se queje. */
.cola-correo{
  border-radius:var(--r-s);padding:14px 16px;margin:18px 0;
  border:1px solid var(--linea);background:var(--fondo);
}
.cola-correo b{display:block;font-size:1rem;margin-bottom:4px}
.cola-correo p{margin:0;color:var(--tinta-2);font-size:.9375rem;line-height:1.5}
.cola-correo ul{margin:10px 0 0;padding-left:20px;color:var(--tinta-2);font-size:.875rem}
.cola-correo li{margin-bottom:4px;line-height:1.4}
.cola-correo.bien{background:var(--verde-claro);border-color:var(--verde-borde)}
.cola-correo.bien b{color:var(--verde)}
.cola-correo.ojo{background:var(--naranja-claro);border-color:var(--naranja-borde)}
.cola-correo.ojo b{color:var(--naranja)}
.cola-correo.mal{background:var(--rojo-claro);border-color:var(--rojo-borde)}
.cola-correo.mal b{color:var(--rojo)}

/* ---------- la puerta (/entrar) ----------
   Aqui llega quien acaba de abrir el correo que le mandamos, asi que no es
   una pantalla de tramite: es lo primero que ve de Atelyf. Se viste como la
   portada y como la landing del anuncio, para que reconozca donde esta. */
.entrada{
  position:relative;background:var(--hondo);color:#fff;overflow:hidden;
  min-height:100dvh;display:flex;align-items:center;
  padding:38px 0 44px;
}
.entrada::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 340px at 88% -8%, rgba(83,179,254,.24), transparent 66%);
  pointer-events:none;
}
.entrada.con-fondo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(160deg, rgba(7,45,107,.93) 6%, rgba(7,45,107,.82) 50%, rgba(7,45,107,.95));
}
.entrada .env-est{max-width:440px;position:relative;z-index:2;margin:0 auto;padding:0 18px}
.entrada-logo{width:126px;height:auto;display:block;margin:0 0 22px}
.entrada-h1{
  font-family:var(--display);font-size:clamp(2.5rem,11vw,3.5rem);
  font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.012em;
  margin:0 0 14px;color:#fff;
}
.entrada-txt{color:#B9BFC6;font-size:1.0625rem;line-height:1.55;margin:0 0 26px}
.entrada-txt b{color:#fff}

.entrada-caja{
  background:var(--papel);border-radius:var(--r);padding:20px;
  box-shadow:0 14px 40px rgba(3,20,50,.38);
}
.entrada-caja .btn{min-height:58px;font-size:1rem}
.entrada-caja label{color:var(--tinta-2)}
.entrada-pie{
  margin:14px 0 0;text-align:center;color:var(--tinta-2);
  font-size:.9375rem;line-height:1.5;
}
.entrada-pie b{color:var(--tinta)}

.entrada-tres{
  list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;
}
.entrada-tres li{
  display:flex;align-items:center;gap:10px;
  color:#C3D2E0;font-size:.9375rem;line-height:1.4;
}
.entrada-tres svg{flex:0 0 auto;color:var(--azul-vivo)}

@media (min-width:680px){
  .entrada-logo{width:140px}
  .entrada-caja{padding:24px}
}

/* ---------- el aviso de la oferta ----------
   Sale UNA vez cada vez que entra, mientras le quede oferta. Tapa la pantalla
   a proposito: es lo unico que se pierde por no mirarlo hoy. */
.aviso-oferta{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(4,20,48,.72);
  animation:aviso-entra .18s ease-out;
}
@keyframes aviso-entra{ from{opacity:0} to{opacity:1} }
.aviso-oferta-caja{
  background:var(--papel);border-radius:var(--r-l);
  padding:26px 22px 22px;max-width:400px;width:100%;text-align:center;
  box-shadow:0 24px 60px rgba(3,16,40,.45);
  max-height:calc(100dvh - 40px);overflow:auto;
}
.aviso-oferta-eti{
  display:inline-block;background:var(--rojo);color:#fff;border-radius:999px;
  padding:5px 13px;font-size:.6875rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;
}
/* La frase va en la letra de siempre: el palo seco en mayusculas es para los
   titulares, y aqui apretaria una linea que hay que leer del tiron. El que si
   va en palo seco es el reloj, que es la cifra que manda. */
.aviso-oferta-caja h2{
  font-family:var(--sans);font-size:1.0625rem;font-weight:700;
  text-transform:none;letter-spacing:0;line-height:1.35;
  margin:16px 0 14px;color:var(--tinta-2);
}
.aviso-oferta-caja h2 b{
  display:block;margin-top:6px;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:2.5rem;line-height:1;letter-spacing:.012em;
  color:var(--rojo);font-variant-numeric:tabular-nums;
}
.aviso-oferta-caja p{
  color:var(--tinta-2);font-size:1rem;line-height:1.55;margin:0 0 12px;
}
.aviso-oferta-caja p b{color:var(--tinta)}
.aviso-oferta-prueba{
  background:var(--fondo);border-radius:var(--r-s);
  padding:10px 14px;font-size:.9375rem !important;margin-bottom:20px !important;
}
.aviso-oferta-si{background:var(--verde);border-color:var(--verde);min-height:56px}
.aviso-oferta-si:hover{background:#0B6B4A;border-color:#0B6B4A}
.aviso-oferta-no{margin-top:9px;min-height:48px;font-size:.875rem;padding-left:12px;padding-right:12px}

/* ---------- el plan que interesa, marcado ----------
   El ano sale mejor y es el que conviene, asi que va primero y se nota: con
   su cinta, su borde verde y el ahorro dicho con el numero delante. */
.lp-precio-top{
  border-color:var(--verde);border-width:2px;
  box-shadow:0 10px 26px rgba(14,138,95,.22);
  position:relative;
}
.lp-precio-eti{
  display:block;margin:-6px 0 8px;
  color:var(--verde);font-size:.625rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;
}
.lp-ahorro{
  display:inline-block;margin-top:9px;
  background:var(--verde);color:#fff;border-radius:999px;
  padding:4px 10px;font-size:.6875rem;font-weight:800;line-height:1.3;
}

/* y lo mismo dentro de la aplicacion */
.precio-caja.destacada{
  position:relative;border:2px solid var(--verde);
  box-shadow:0 10px 26px rgba(14,138,95,.18);
}
.precio-cinta{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--verde);color:#fff;border-radius:999px;
  padding:4px 13px;font-size:.6875rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
}
.precio-caja.destacada .precio{color:var(--verde)}
.precio-caja.destacada .btn{background:var(--verde);border-color:var(--verde)}
.precio-caja.destacada .btn:hover{background:#0B6B4A;border-color:#0B6B4A}
.precio-ahorro{display:block;margin-top:3px;color:var(--verde)}

/* ═══════════════════════ ATELYF: lo nuevo sobre el sistema de Klenna ═══════════════════════ */
.marca-txt{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;color:var(--azul);text-decoration:none;line-height:1}
.marca-txt span{color:var(--azul-vivo)}
.marca-txt.claro{color:#fff}
.barra nav a .ico{vertical-align:-4px}
.pestanas{display:flex;gap:6px;flex-wrap:wrap}
.pestanas a{padding:8px 14px;border-radius:999px;border:1px solid var(--linea);background:#fff;color:var(--tinta-2);text-decoration:none;font-weight:700;font-size:.875rem;min-height:40px;display:inline-flex;align-items:center}
.pestanas a.on{background:var(--azul);border-color:var(--azul);color:#fff}
.eti.a{background:var(--azul-claro);color:var(--azul-osc)}
.eti.r{background:var(--rojo-claro);color:var(--rojo)}
.eti.ok{background:var(--verde-claro);color:var(--verde)}
.eti.n{background:var(--naranja-claro);color:var(--naranja)}
.eti.g{background:var(--fondo-2);color:var(--tinta-3)}
.fila.apagado{opacity:.55}
.mini-txt{flex:1;min-width:0;display:block}
.mini-txt b{display:block;font-weight:600;font-size:1.0625rem;line-height:1.3;white-space:normal}
.mini-txt small{display:block;color:var(--tinta-2);font-size:.875rem;line-height:1.3}
.mini .eti{flex:0 0 auto;margin-left:4px}
.lista-citas{display:grid;gap:10px}
.cita{display:block;padding:15px 18px 16px;position:relative;border:1px solid var(--linea);border-radius:var(--r-s);background:#fff}
.cita.hecha{background:var(--verde-claro)!important;border-color:var(--verde-borde)!important}
.cita.hecha .vt-nombre,.cita.hecha .vt-hora{color:var(--verde)}
.cita.pedida{background:var(--naranja-claro)!important;border-color:var(--naranja-borde)!important}
.cita.pedida .vt-hora{color:var(--naranja)}
.cita.planton{background:var(--rojo-claro)!important;border-color:var(--rojo-borde)!important}
.cita.planton .vt-nombre{color:var(--rojo)}
.cita.anulada{background:var(--fondo-2)!important;border-color:var(--linea)!important}
.cita.anulada .vt-nombre{text-decoration:line-through;color:var(--tinta-3)}
.mes .d .puntos i.pedida{background:var(--naranja)}
.hueco-hoy{display:flex;gap:14px;align-items:flex-start;background:var(--verde-claro);border-color:var(--verde-borde)}
.hueco-hoy .ico{color:var(--verde);flex:0 0 auto}

/* la peticion */
.peti{background:#fff;border:1px solid var(--naranja-borde);border-radius:var(--r-l);box-shadow:var(--s2);overflow:hidden}
.peti.contestada{border-color:var(--linea)}
.peti-cinta{display:flex;align-items:center;gap:8px;padding:11px 22px;background:var(--naranja);color:#fff;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em}
.peti.contestada .peti-cinta{background:var(--tinta-2)}
.peti-cuerpo{padding:22px}
.peti-hora{font-family:var(--display);font-size:2.6rem;line-height:.95;letter-spacing:.01em}
.peti-nombre{font-size:1.5rem;font-weight:700;margin:12px 0 4px;line-height:1.25}
.peti-dato{color:var(--tinta-2);font-size:1rem;margin-top:4px;overflow-wrap:anywhere}
.peti-hist{margin-top:14px;padding:12px 14px;background:var(--verde-claro);border:1px solid var(--verde-borde);border-radius:var(--r-s);color:#0B5C40;font-size:.9375rem;line-height:1.45}
.peti-otras{margin-top:14px;font-size:.9375rem;color:var(--tinta-2);line-height:1.5}
.peti-acc{display:grid;gap:10px;margin-top:20px}
.btn-rechazar{background:#fff;color:var(--rojo);border-color:var(--rojo-borde);box-shadow:none}
.btn-rechazar:hover{background:var(--rojo-claro);border-color:var(--rojo);color:var(--rojo)}

/* dinero */
.cifra-grande{background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);padding:22px;box-shadow:var(--s1);text-align:center;margin-bottom:12px}
.cifra-grande .kicker{margin-bottom:6px}
.cifra-grande b{display:block;font-family:var(--display);font-size:3.4rem;line-height:.9;letter-spacing:.01em;color:var(--verde)}
.cifra-grande small{display:block;color:var(--tinta-2);font-size:.9375rem;margin-top:8px}
.dos-cifras{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dos-cifras .cifra-grande{padding:16px 12px;margin:0}
.dos-cifras .cifra-grande b{font-size:2.2rem;color:var(--tinta)}
.dos-cifras .cifra-grande.debe b{color:var(--naranja)}
.barra-serv{height:8px;border-radius:99px;background:var(--azul-claro);margin:6px 0 4px;overflow:hidden;max-width:260px}
.barra-serv i{display:block;height:100%;background:var(--azul)}

/* pedir cita y elegir hora */
.paso-cab{display:flex;align-items:center;justify-content:space-between;margin:14px 0 6px;color:var(--tinta-2);font-size:.875rem;font-weight:700}
.paso-cab a{color:var(--tinta-2)}
.progreso{height:6px;background:var(--fondo-2);border-radius:99px;overflow:hidden;margin-bottom:18px}
.progreso i{display:block;height:100%;background:var(--azul)}
.elegido{background:var(--azul-claro);border:1px solid var(--azul-borde);border-radius:var(--r);padding:12px 14px;color:var(--azul-osc);font-weight:700;font-size:.9375rem;margin-bottom:18px;line-height:1.4}
.tira-dias{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
@media (min-width:560px){.tira-dias{grid-template-columns:repeat(6,1fr)}}
.tira-dias button{font:inherit;border:2px solid var(--linea);background:#fff;border-radius:14px;padding:8px 4px;text-align:center;cursor:pointer;color:var(--tinta-2);line-height:1.15;min-height:64px}
.tira-dias button b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--tinta);letter-spacing:.02em}
.tira-dias button small{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.tira-dias button small.mes{font-weight:600;text-transform:none;letter-spacing:0;color:var(--tinta-3)}
.tira-dias button.on{background:var(--azul);border-color:var(--azul);color:#fff}
.tira-dias button.on b,.tira-dias button.on small{color:#fff}
.tira-dias button.lleno{opacity:.4;text-decoration:line-through}
.horas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.horas button{font:inherit;font-weight:800;font-size:1.125rem;border:2px solid var(--linea);background:#fff;border-radius:12px;min-height:56px;cursor:pointer;color:var(--tinta)}
.horas button:hover,.horas button.on{background:var(--azul);border-color:var(--azul);color:#fff}
.horas-chicas{grid-template-columns:repeat(4,1fr)}
.horas-chicas button{min-height:44px;font-size:.9375rem;border-radius:10px}
.nota-legal{font-size:.875rem;color:var(--tinta-3);margin-top:12px;line-height:1.45}

/* el perfil publico */
body.perfil-publico{background:var(--fondo)}
.pf-cab{background:var(--hondo);color:#fff;padding:26px 18px 22px;text-align:center}
.pf-foto{width:96px;height:96px;border-radius:50%;margin:0 auto 12px;background:#C9D9EE;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:2.4rem;color:var(--hondo);border:3px solid #fff;overflow:hidden}
.pf-foto img{width:100%;height:100%;object-fit:cover}
.pf-cab h1{font-size:2rem;margin:0 0 2px;color:#fff}
.pf-sub{color:#C3D2E0;font-size:.9375rem;margin:0 0 16px}
.pf-btn{width:100%;max-width:420px;background:var(--azul-vivo);border-color:var(--azul-vivo);color:var(--hondo)}
.pf-btn:hover{background:#fff;border-color:#fff;color:var(--hondo)}
.pf-desc{margin:18px 0 0;color:var(--tinta-2);line-height:1.55}
.pf-tit{font-family:var(--display);font-size:1.375rem;letter-spacing:.02em;margin:22px 0 10px}
.pf-lista .fila-fin{font-weight:700}
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fotos div{aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative;background:var(--azul-claro)}
.fotos img{width:100%;height:100%;object-fit:cover;display:block}
.fotos span{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;font-size:.75rem;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(7,45,107,.75))}
.pf-equipo{display:flex;gap:8px;flex-wrap:wrap}
.pf-equipo span{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:8px 14px;font-weight:700}
.pf-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.pf-dos .btn{min-width:0;padding-left:8px;padding-right:8px}
.pie-perfil{text-align:center;padding:18px;font-size:.8125rem}
.pie-perfil a{color:var(--tinta-3);text-decoration:none}

/* fotos en el panel */
.fotos-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fotos-rejilla img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.foto-tarjeta form{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--tinta-3);margin-top:4px}
.pf-foto-mini{width:64px;height:64px;border-radius:50%;background:var(--azul-claro);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--azul-osc);overflow:hidden;flex:0 0 auto}
.pf-foto-mini img{width:100%;height:100%;object-fit:cover}
.slug-campo{display:flex;align-items:center;border:2px solid var(--linea-fuerte);border-radius:12px;background:#fff;overflow:hidden}
.slug-campo span{padding:0 4px 0 14px;color:var(--tinta-3);font-weight:700;white-space:nowrap}
.slug-campo input{border:0;flex:1;min-width:0;padding-left:0}
.enlace-grande{font-family:var(--display);font-size:1.75rem;letter-spacing:.02em;color:var(--azul-osc);word-break:break-all;line-height:1.1}
.orden-btns{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.orden-btns button{font:inherit;font-size:.75rem;width:32px;height:32px;border:1px solid var(--linea);background:#fff;border-radius:8px;cursor:pointer;color:var(--tinta-2)}
.alta-servicios{display:grid;gap:8px}
.alta-serv{display:grid;grid-template-columns:auto 1fr 64px auto 72px auto;gap:6px;align-items:center}
.alta-serv input[type=text],.alta-serv input[type=number]{min-height:48px;padding:0 10px;font-size:1rem}
.alta-serv span{font-size:.8125rem;color:var(--tinta-3)}
.alta-serv-usar{position:relative;display:inline-flex}
.alta-serv-usar input{position:absolute;opacity:0;pointer-events:none}
.alta-serv-usar .marca-op{width:26px;height:26px;border-radius:999px;border:2px solid var(--linea-fuerte);display:flex;align-items:center;justify-content:center;cursor:pointer}
.alta-serv-usar .marca-op svg{opacity:0;color:#fff}
.alta-serv-usar input:checked+.marca-op{background:var(--azul);border-color:var(--azul)}
.alta-serv-usar input:checked+.marca-op svg{opacity:1}
@media (max-width:420px){.alta-serv{grid-template-columns:auto 1fr 56px auto;grid-auto-rows:auto}.alta-serv input[inputmode=decimal]{grid-column:2/3}}
body.paso-layout h1{font-size:2rem}
body.paso-layout .ayuda{color:var(--tinta-2);margin:0 0 18px;line-height:1.5}

.tira-dias button small.mes{border:0;background:none;padding:0;box-shadow:none;border-radius:0}
.entrada .marca-txt,.lp-alto .marca-txt{display:block;margin-bottom:18px}