/* ============================================================
   Estilos de la web. Rediseño sobrio del 07/10/2026.

   Por qué es así y no como la primera versión:
   las cuatro webs del sector que se miraron (pymeflow.es,
   koibox.cloud, clinicbot.es, converpilot.es) usan UNA sola
   tipografía de palo seco, columnas de texto de 620-760 px y
   dos colores de acento como mucho. Ninguna usa serif en los
   titulos. La primera version iba con slab serif, botones de
   pastilla, franjas verdes a sangre y sombras: destacaba, y
   destacar no era el objetivo.

   Los dos colores los controla marca.json a traves de
   aplicar-marca.py. NO cambies el formato de las dos primeras
   lineas de :root (dos guiones, nombre, dos puntos, almohadilla
   y seis digitos, sin espacios): el script las busca con una
   expresion regular y si no las encuentra se para.
   ============================================================ */

/* Paleta azul, decidida el 07/10. Los nombres de las variables siguen
   diciendo "verde" porque aplicar-marca.py los busca por ese nombre; cambiar
   el nombre obligaria a tocar el script y no aporta nada. Lo que importa son
   los valores. */

:root{
  --verde:#1464A5;      /* azul medio: enlaces, botones, detalles */
  --acento:#FFB56B;     /* naranja calido, en muy pocos sitios */

  --verde-hondo:#072146;  /* azul marino: franjas oscuras */
  --verde-tenue:#D7EFFF;  /* azul muy claro: fondos suaves y destacados */

  --azul-claro:#85C8FF;   /* azul claro de las ilustraciones */
  --azul-fuerte:#004481;  /* azul profundo: titulares sobre fondo oscuro */

  --tinta:#072146;      /* texto principal: azul marino, no negro */
  --tinta-2:#46536D;    /* texto secundario; 7.2:1 sobre blanco */
  --papel:#FFFFFF;
  --papel-2:#F7F8F8;    /* franjas alternas, apenas perceptible */
  --linea:#E2E6EA;
  --linea-fuerte:#CAD1D8;

  color-scheme: light;
}

*{box-sizing:border-box}

/* ---------- Ilustraciones ----------
   Cambiadas el 08/10/2026 por las que trajo Alberto: ilustraciones generadas,
   no fotos. Siguen sin ser fotos a proposito. Las cuatro webs del sector que
   se miraron no tienen una sola foto propia, y las caras que aparecen en
   alguna son avatares de plantilla sobre testimonios inventados: una
   ilustracion da calidez sin fingir que hay clientes.

   En WebP y a 1000 px de ancho. Los originales pesaban 1,4 MB cada uno; a
   pantalla completa no ocupan mas de 400 px, asi que subirlos tal cual era
   siete veces mas peso para que no se notara en nada. */

.ilustracion{
  display:block; width:100%; height:auto;
  border:1px solid var(--linea); border-radius:10px;
  background:var(--papel);
}

html{scroll-behavior:smooth; scroll-padding-top:70px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Medida del texto corrido: 680 px, dentro de la horquilla
   620-760 px que usa pymeflow.es en todos sus bloques. */
.marco{max-width:1000px; margin:0 auto; padding-inline:22px}
.columna{max-width:680px}

.saltar{
  position:absolute; left:-9999px; top:0;
  background:var(--verde); color:#fff; padding:10px 16px; z-index:50;
}
.saltar:focus{left:0}

a{color:var(--verde); text-underline-offset:3px}
a:hover{color:var(--verde-hondo)}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{
  outline:3px solid var(--acento); outline-offset:2px;
}

/* ---------------- Barra ---------------- */
.barra{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea);
}
.barra-dentro{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding-block:14px; flex-wrap:wrap;
}
/* El logo es una imagen, no texto. Se controla por ALTURA y se deja que el
   ancho salga solo: así da igual lo que mida el SVG y no se deforma. */
.logo{display:block; line-height:0; text-decoration:none; flex:0 0 auto}
.logo img{height:38px; width:auto; display:block}
@media(max-width:720px){ .logo img{height:32px} }
.barra nav{display:flex; gap:19px; flex-wrap:wrap}
.barra nav a{
  color:var(--tinta-2); text-decoration:none; font-size:14.5px;
}
.barra nav a:hover{color:var(--verde); text-decoration:underline}
/* La pagina en la que estas, marcada. Sin esto, al ser seis paginas
   separadas, no sabrias donde te encuentras. */
.barra nav a[aria-current="page"]{
  color:var(--verde-hondo); font-weight:600;
  box-shadow:inset 0 -2px 0 var(--verde);
}
@media(max-width:620px){
  .barra nav{gap:12px}
  .barra nav a{font-size:13.5px}
}

/* ---------------- Tipografía ---------------- */
h1{
  font-size:clamp(29px,4.4vw,45px); line-height:1.14;
  font-weight:600; letter-spacing:-.022em;
  margin:0 0 16px; max-width:21ch; text-wrap:balance;
}
h2{
  font-size:clamp(21px,2.6vw,27px); line-height:1.25;
  font-weight:600; letter-spacing:-.015em;
  margin:0 0 12px; text-wrap:balance;
}
h3{
  font-size:16.5px; font-weight:600; letter-spacing:-.005em;
  margin:0 0 5px;
}
p{margin:0 0 15px}
p:last-child{margin-bottom:0}

.rotulo{
  font-size:12px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tinta-2);
  margin:0 0 16px;
}
.entrada{font-size:18px; color:var(--tinta-2); max-width:62ch; margin:0 0 26px}
.nota{font-size:14.5px; color:var(--tinta-2)}
.fuente{font-size:13.5px; color:var(--tinta-2); margin-top:18px}
.fuente a{color:var(--tinta-2)}

/* ---------------- Secciones ----------------
   Reestructurado el 08/10/2026: la web dejo de ser una sola pagina larga y
   paso a seis. Lo que antes era una seccion con su <h2> ahora es una pagina
   con su <h1>, y el texto se recorto a la mitad en casi todas. */
.portada{padding-block:54px 40px}
.cabecera{padding-block:46px 40px; border-top:none}
.sin-raya{border-top:none}
.h1-interior{font-size:clamp(26px,3.6vw,38px); max-width:24ch}

.banda{padding-block:48px; border-top:1px solid var(--linea)}
.banda.gris{background:var(--papel-2)}
.cierre{background:var(--verde-tenue); border-top:none}

/* ---------------- Dos columnas ----------------
   El fallo que arregla: todo iba en vertical —titulo, imagen debajo, texto
   debajo— y quedaban huecos enormes a los lados. Con .duo el dibujo va AL LADO
   del texto. Con .duo.izq va a la izquierda, para que al bajar por la pagina
   no caigan todas las imagenes en el mismo borde.
   En movil se apilan y el dibujo baja siempre, que es donde menos estorba. */
.duo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:46px; align-items:center;
}
.duo.izq{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
.duo > *{min-width:0}
@media(max-width:880px){
  .duo, .duo.izq{grid-template-columns:1fr; gap:26px}
  .duo.izq > img{order:2}
  .duo img{max-width:430px}
}

/* Listas a dos columnas cuando hay sitio. Mismo motivo: aprovechar el ancho. */
.dos-columnas{
  columns:2; column-gap:44px;
}
.dos-columnas > li{break-inside:avoid}
@media(max-width:820px){ .dos-columnas{columns:1} }

/* ---------------- Botones ---------------- */
.acciones{
  display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center;
  margin:24px 0 0;
}
.boton{
  display:inline-block; background:var(--verde); color:#fff;
  text-decoration:none; font-weight:600; font-size:16px;
  padding:12px 22px; border-radius:4px;
}
.boton:hover{background:var(--verde-hondo); color:#fff}
.boton-llano{
  display:inline-block; color:var(--verde); text-decoration:none;
  font-weight:600; font-size:16px; padding:12px 18px; border-radius:4px;
  border:1px solid var(--linea-fuerte); background:transparent;
}
.boton-llano:hover{border-color:var(--verde); color:var(--verde-hondo)}

/* ---------------- Listas cortas de la portada ---------------- */
.puntos{list-style:none; padding:0; margin:0 0 18px}
.puntos li{
  padding:9px 0 9px 24px; position:relative; font-size:15.5px;
  color:var(--tinta-2); border-bottom:1px solid var(--linea);
}
.puntos li:first-child{border-top:1px solid var(--linea)}
.puntos li::before{
  content:"→"; position:absolute; left:0; top:9px; color:var(--verde);
}
.puntos li.clave{color:var(--tinta); font-weight:500}
.puntos li.clave::before{color:var(--acento)}

.etiquetas{
  list-style:none; padding:0; margin:0 0 18px;
  display:flex; flex-wrap:wrap; gap:9px;
}
.etiquetas li{
  font-size:14.5px; padding:7px 13px; border-radius:3px;
  background:var(--verde-tenue); color:var(--verde-hondo);
}
.banda.gris .etiquetas li{background:#fff; border:1px solid var(--linea)}

/* ---------------- Ficha: pares dato/valor ---------------- */
.ficha{
  margin:34px 0 0; padding-top:18px;
  border-top:1px solid var(--linea);
  display:grid; gap:2px 28px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  font-size:14.5px;
}
.ficha div{padding-block:7px}
.ficha dt{color:var(--tinta-2); font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase}
.ficha dd{margin:2px 0 0}

/* ---------------- Lista de prestaciones ---------------- */
.prestaciones{
  margin:0; display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  border-top:1px solid var(--linea);
}
.prestaciones > div{
  padding:17px 0; border-bottom:1px solid var(--linea);
  padding-right:26px;
}
.prestaciones dt{font-weight:600}
.prestaciones dd{margin:4px 0 0; color:var(--tinta-2); font-size:15.5px}
.prestaciones .clave dt{color:var(--verde)}

/* El contador de horas cerradas se quito el 08/10/2026: Alberto lo quiere en
   el discurso de venta, no en la web. Si vuelve, estaba en el historial. */

/* ---------------- Demo ---------------- */
.caja-demo{
  border:1px solid var(--linea-fuerte); border-radius:4px;
  overflow:hidden; background:#fff;
}
.caja-demo iframe{display:block; width:100%; height:820px; border:0}
/* Por debajo de 800 px el reproductor apila el movil y las explicaciones, asi
   que necesita mas alto. Aun asi, en un movil de 390 px el marco se desplaza
   por dentro: para eso esta el enlace de «abrir en una pestana nueva». */
@media(max-width:800px){ .caja-demo iframe{height:900px} }
.aviso-demo{
  margin:16px 0 0; padding:15px 17px;
  border-left:3px solid var(--acento); background:var(--papel-2);
  font-size:15.5px; max-width:70ch;
}
.banda.gris .aviso-demo{background:#fff}
.aviso-demo p:first-child{margin-top:0}

/* ---------------- Pasos ---------------- */
.pasos{
  list-style:none; counter-reset:p; padding:0; margin:0;
  border-top:1px solid var(--linea);
}
.pasos li{
  counter-increment:p; padding:18px 0 18px 42px;
  border-bottom:1px solid var(--linea); position:relative;
}
.pasos li::before{
  content:counter(p); position:absolute; left:0; top:18px;
  font-size:14px; font-weight:600; color:var(--verde);
  font-variant-numeric:tabular-nums;
}
.pasos p{margin:4px 0 0; color:var(--tinta-2); font-size:15.5px; max-width:68ch}
.pasos .quien{
  margin:7px 0 0; font-size:12.5px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--tinta-2);
}

/* ---------------- Lista de lo que no hace ---------------- */
.no-hace{list-style:none; padding:0; margin:0}
.no-hace li{
  padding:15px 0 15px 26px; position:relative;
  border-bottom:1px solid var(--linea); color:var(--tinta-2);
  font-size:15.5px; max-width:74ch;
}
.no-hace li:first-child{border-top:1px solid var(--linea)}
.no-hace li::before{
  content:"—"; position:absolute; left:0; top:15px; color:var(--acento);
}
.no-hace strong{color:var(--tinta); font-weight:600}

/* ---------------- Precio ---------------- */
table.tarifa{
  width:100%; border-collapse:collapse; margin:0;
  font-variant-numeric:tabular-nums;
}
table.tarifa th, table.tarifa td{
  text-align:left; padding:16px 0; border-bottom:1px solid var(--linea);
  vertical-align:top;
}
table.tarifa thead th{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-2); padding-bottom:9px; font-weight:600;
}
table.tarifa td.importe{
  text-align:right; white-space:nowrap; font-weight:600; font-size:19px;
}
table.tarifa td.importe span{font-size:14px; font-weight:400; color:var(--tinta-2)}
table.tarifa .detalle{display:block; margin-top:4px; color:var(--tinta-2);
  font-size:15px; font-weight:400; max-width:52ch}
table.tarifa tbody th{font-weight:600}

/* ---------------- Preguntas ---------------- */
.preguntas{border-top:1px solid var(--linea); max-width:74ch}
.preguntas details{border-bottom:1px solid var(--linea)}
.preguntas summary{
  padding:15px 28px 15px 0; cursor:pointer; font-weight:600;
  position:relative; list-style:none;
}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{
  content:"+"; position:absolute; right:4px; top:14px;
  font-size:19px; font-weight:400; color:var(--verde);
}
.preguntas details[open] summary::after{content:"\2013"}
.preguntas .respuesta{padding:0 0 18px; color:var(--tinta-2); font-size:15.5px}
.preguntas .respuesta p{margin:0 0 11px}
.preguntas .respuesta p:last-child{margin-bottom:0}

/* ---------------- Precio ----------------
   Historia de este bloque, que ha cambiado tres veces en dos dias:
     07/10  lista de parrafos con los costes de Meta y Google.
     08/10  misma tarjeta y misma tabla que la tarifa, en dos columnas.
     09/10  fuera. Decision de Alberto: eso va en el contrato, no en la web.
            Queda una linea de letra pequena, que es la forma en que el mismo
            dijo que lo pondria si hiciera falta. El motivo de dejarla: el
            titular de la pagina dice "unica tarifa publicada", y descubrir
            despues que hay costes de terceros convertiria ese titular en el
            problema. Una linea cuesta nada y cierra esa puerta. */
.tarjeta-precio.sola{max-width:580px; margin-inline:auto}
.letra-pequena{
  margin:20px auto 0; max-width:580px;
  font-size:13px; line-height:1.55; color:var(--tinta-2);
}
.tarjeta-precio{
  background:#fff; border:1px solid var(--linea-fuerte); border-radius:6px;
  padding:8px 24px 14px;
}
.tarjeta-precio table.tarifa tr:last-child th,
.tarjeta-precio table.tarifa tr:last-child td{border-bottom:none}

/* ---------------- Contacto y pie ---------------- */
.correo{
  font-size:clamp(19px,2.6vw,25px); font-weight:600; letter-spacing:-.015em;
  margin:26px 0 0; word-break:break-word;
}
footer{border-top:1px solid var(--linea); padding-block:24px; margin-top:0}
footer p{margin:0 0 6px; font-size:13.5px; color:var(--tinta-2)}
.pie-dentro{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  align-items:baseline; justify-content:space-between;
}
.pie-dentro p{margin:0; font-weight:600; color:var(--tinta)}
.pie-nav{display:flex; flex-wrap:wrap; gap:16px}
.pie-nav a{font-size:13.5px; color:var(--tinta-2); text-decoration:none}
.pie-nav a:hover{color:var(--verde); text-decoration:underline}
.pie-letra{margin:16px 0 0; max-width:74ch}

img{max-width:100%; height:auto}