/* ==========================================================================
   Transportes Caicedo — concepto AZULEJO
   Cerámica valenciana: esmalte blanco, cobalto y letra pintada a mano.
   ========================================================================== */

:root{
  --noche:#0d2650;
  --cobalto:#1b4a9c;
  --cobalto-hondo:#12356f;
  --cobalto-claro:#5b86c4;
  --esmalte:#f5f2e9;
  --esmalte-sombra:#ded9cb;
  --barro:#b5643f;
  --ocre:#e0aa4a;
  --gris-junta:#5a6472;
  --texto-noche:#c3d2e8;
  --texto-noche-baja:#a9bcd8;

  /* El ritmo. El aire lateral y el vertical son los mismos en toda la web y
     encogen con la pantalla: en un movil, 78px de separacion entre secciones
     y 24px de margen fijo dejan el contenido asfixiado y en una columna
     estrechisima. Se tocan aqui y cambian en todas las paginas. */
  --margen:clamp(18px,4.6vw,28px);
  --aire:clamp(46px,8vw,78px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--noche);
  background-image:
    linear-gradient(180deg, #12305f 0%, #0d2650 38%, #0a1d3d 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 62px);
  background-attachment:fixed;
  color:var(--esmalte);
  font:400 17px/1.65 Manrope, "Helvetica Neue", Arial, sans-serif;
}
::selection{background:var(--ocre);color:#2b1c02}
:focus-visible{outline:2px solid var(--ocre);outline-offset:4px;border-radius:3px}
/* Sobre el esmalte el ocre no contrasta: el anillo se pinta en cobalto */
.azulejo :focus-visible,.hoja :focus-visible{outline-color:var(--cobalto)}
img{max-width:100%;height:auto}

.envoltorio{max-width:1140px;margin:0 auto;padding-inline:var(--margen)}
/* OJO: el aire lateral va en padding-inline a proposito. Las clases que se
   combinan con .envoltorio (.seccion, .pregunta, .portada, .llamada) se pintan
   mas abajo en esta hoja; si alguna vuelve a usar el atajo `padding` para su
   aire de arriba, borra el de los lados y la web queda pegada al borde.
   Todas ellas usan padding-top. */
.pintado{font-family:Marcellus,"Times New Roman",serif;text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:var(--margen);top:14px;z-index:9;background:var(--ocre);color:#2b1c02;padding:10px 16px;border-radius:3px;font-weight:700}

/* ---------- la pieza ---------- */
.azulejo{
  position:relative;background:var(--esmalte);color:var(--cobalto-hondo);
  border-radius:4px;padding:clamp(18px,4.4vw,22px) clamp(16px,4vw,20px);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.65), 0 2px 0 rgba(0,0,0,.28);
  isolation:isolate;overflow:hidden;
}
.azulejo::before{content:"";position:absolute;inset:7px;border:2px solid var(--cobalto);border-radius:2px;pointer-events:none}
/* El brillo del esmalte, entrando por arriba a la izquierda.
   Va DEBAJO del contenido: encima lavaba el texto de la esquina y tumbaba
   el contraste del párrafo de 5,36:1 a 3,02:1. */
.azulejo::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(118deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.28) 22%, transparent 44%);
  opacity:.5;
}
.azulejo>*{position:relative;z-index:1}

/* ---------- cabecera y navegación ---------- */
.cabecera{padding:clamp(18px,3.4vw,26px) 0 0}
.cabecera .envoltorio{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* ---------- la marca: el azulejo con las iniciales y el nombre al lado ---------- */
.marca{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.marca-placa{
  display:block;line-height:0;border-radius:4px;flex:0 0 auto;
  box-shadow:0 9px 20px -11px rgba(0,0,0,.7), 0 2px 0 rgba(0,0,0,.28);
}
.marca-placa svg{display:block;width:48px;height:48px;font-family:Marcellus,Georgia,serif}
.marca-nombre .pintado{
  display:block;font-family:Marcellus,"Times New Roman",serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.055em;
  font-size:clamp(1rem,2.6vw,1.35rem);line-height:1.05;color:var(--esmalte);
}
.marca-nombre em{
  display:block;font-style:normal;font-family:Manrope,sans-serif;font-size:12px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ocre);margin-top:7px;font-weight:600;
}
.marca:hover .marca-placa{box-shadow:0 12px 24px -11px rgba(0,0,0,.75), 0 0 0 2px var(--ocre)}

.menu{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.menu a{
  color:var(--texto-noche);text-decoration:none;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:10px 9px;border-radius:3px;
}
.menu a:hover{color:var(--esmalte);background:rgba(245,242,233,.08)}
.menu a[aria-current="page"]{color:var(--ocre);box-shadow:inset 0 -2px 0 var(--ocre)}
.abrir-menu{
  display:none;align-items:center;gap:10px;background:none;cursor:pointer;
  border:1px solid rgba(245,242,233,.32);border-radius:3px;color:var(--esmalte);
  font:700 12px/1 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  padding:0 16px;min-height:44px;
}
.abrir-menu:hover{background:rgba(245,242,233,.1)}
.abrir-menu .barras{display:block;width:17px;height:2px;background:currentColor;position:relative}
.abrir-menu .barras::before,.abrir-menu .barras::after{
  content:"";position:absolute;left:0;width:17px;height:2px;background:currentColor;transition:transform .2s;
}
.abrir-menu .barras::before{top:-6px}
.abrir-menu .barras::after{top:6px}
.abrir-menu[aria-expanded="true"] .barras{background:transparent}
.abrir-menu[aria-expanded="true"] .barras::before{transform:translateY(6px) rotate(45deg)}
.abrir-menu[aria-expanded="true"] .barras::after{transform:translateY(-6px) rotate(-45deg)}

.tel-cabecera{
  display:inline-flex;align-items:center;gap:9px;color:var(--esmalte);text-decoration:none;
  font-weight:700;letter-spacing:.05em;font-size:14px;
  border:1px solid rgba(245,242,233,.32);padding:11px 18px;border-radius:3px;white-space:nowrap;
}
.tel-cabecera:hover{background:var(--ocre);color:#2b1c02;border-color:var(--ocre)}
.tel-cabecera svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}

/* ---------- titulares ---------- */
h1,h2,h3{font-family:Marcellus,"Times New Roman",serif;font-weight:400;text-transform:uppercase;letter-spacing:.04em;margin:0}
.titular{
  font-size:clamp(2.2rem,6.6vw,4.4rem);line-height:1.02;letter-spacing:.02em;
  color:var(--esmalte);text-wrap:balance;
}
.seccion{padding-top:var(--aire)}
.seccion h2{font-size:clamp(1.5rem,3.6vw,2.2rem);margin-bottom:6px;color:var(--esmalte)}
.sub{color:var(--texto-noche-baja);margin:0 0 30px;font-size:14px;max-width:64ch}

/* ---------- portada: la presentación ---------- */
/* El titular ya no es la pregunta del código postal: el buscador baja al muro.
   Aquí se dice el oficio y la ciudad; la comprobación de zona queda a un clic,
   en el enlace de debajo de los botones. */
.portada{
  padding-top:clamp(40px,7vw,66px);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,5vw,52px);align-items:center;
}
.portada .titular{font-size:clamp(2rem,4.9vw,3.5rem)}
.portada .entradilla{max-width:52ch;margin:26px 0 0;color:var(--texto-noche);font-size:19px;line-height:1.6}
.portada .acciones{margin-top:34px}
.portada .llegamos{margin:22px 0 0;font-size:14px;color:var(--texto-noche-baja)}
.portada .llegamos a{color:var(--ocre);text-underline-offset:3px}

/* La ficha: el azulejo de datos, como la placa de un portal. Etiqueta pequeña
   arriba y dato en Marcellus debajo, igual que las fichas de .texto dl */
.ficha{padding:clamp(22px,4.8vw,30px)}
.ficha .ficha-marca{margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--esmalte-sombra)}
.ficha .ficha-marca .pintado{
  display:block;font-family:Marcellus,serif;font-size:23px;line-height:1.15;
  color:var(--cobalto-hondo);letter-spacing:.05em;
}
.ficha .ficha-marca em{
  display:block;font-style:normal;font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:700;color:var(--cobalto);margin-top:9px;
}
.ficha dl{margin:0;display:grid;gap:18px}
.ficha dt{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--cobalto)}
.ficha dd{
  margin:6px 0 0;font-family:Marcellus,serif;font-size:19px;line-height:1.2;
  letter-spacing:.03em;color:var(--cobalto-hondo);
}
.ficha .ficha-pie{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--esmalte-sombra);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gris-junta);
}
.ficha .ficha-tel{
  display:block;margin-top:8px;font-family:Marcellus,serif;font-size:25px;letter-spacing:.04em;
  text-transform:none;color:var(--cobalto-hondo);text-decoration:none;
}
.ficha .ficha-tel:hover{color:var(--barro)}

/* El buscador, ya dentro del muro: no abre la página, la resuelve */
.buscador.en-muro{margin:0 auto 30px}

@media (max-width:900px){
  .portada{grid-template-columns:1fr;gap:32px}
  .portada .entradilla{max-width:60ch}
}

/* ---------- cabecera de página: el H1 de las páginas interiores ---------- */
.pregunta{padding-top:clamp(44px,7.5vw,70px);text-align:center}
.pregunta .entradilla{max-width:58ch;margin:24px auto 0;color:var(--texto-noche);font-size:20px;line-height:1.55}

.buscador{max-width:520px;margin:38px auto 0}
.buscador .azulejo{padding:clamp(20px,4.6vw,26px) clamp(18px,4.4vw,24px)}
.etiqueta{display:block;font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--cobalto);margin-bottom:11px}
.cp-grande{
  width:100%;background:transparent;border:0;border-bottom:2px solid var(--cobalto-claro);
  font-family:Marcellus,serif;font-size:clamp(2.4rem,8vw,3.4rem);text-align:center;letter-spacing:.2em;
  color:var(--cobalto-hondo);padding:6px 0 10px;caret-color:var(--barro);
}
.cp-grande::placeholder{color:#b9c6da}
.cp-grande:focus{border-bottom-color:var(--barro);outline-offset:6px}
.veredicto{margin:20px 0 0;font-size:14px;line-height:1.55;color:var(--cobalto-hondo);min-height:5.2em;font-weight:500}
.veredicto strong{font-family:Marcellus,serif;font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:20px;display:block;margin-bottom:4px}
.veredicto .dicho{display:block}
.veredicto.fuera strong{color:#8d4527}
/* La prueba se enciende aquí mismo, no a mil píxeles de distancia */
.veredicto .placa-suelta{display:block;max-width:210px;margin:4px auto 20px}
.veredicto .placa-suelta .placa{transform:none;animation:asentar .42s cubic-bezier(.2,.9,.3,1)}
@keyframes asentar{from{transform:translateY(9px);opacity:0}to{transform:none;opacity:1}}
.veredicto .enlaces{display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:18px}
.veredicto .enlaces .boton{padding:15px 30px}
.suelto{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--cobalto);text-decoration:underline;text-underline-offset:3px;
}
.suelto:hover{color:var(--cobalto-hondo)}

/* ---------- muro de pueblos ---------- */
.rejilla-muro{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr));gap:14px}
.placa{text-align:center;padding:20px 14px;transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s, opacity .28s}
.placa .nombre{display:block;font-family:Marcellus,serif;text-transform:uppercase;letter-spacing:.04em;font-size:20px;line-height:1.12;color:var(--cobalto-hondo)}
.placa .cp{display:block;margin-top:9px;font-size:12px;letter-spacing:.24em;font-weight:700;color:var(--cobalto)}
.placa .dias{display:block;margin-top:5px;font-size:12px;letter-spacing:.1em;color:var(--gris-junta);font-weight:600;text-transform:uppercase}
.placa.encendida{transform:translateY(-7px);box-shadow:0 20px 34px -16px rgba(0,0,0,.7), 0 0 0 3px var(--ocre)}
.placa.encendida::after{opacity:.95;background:linear-gradient(118deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.4) 26%, transparent 50%)}
.placa.atenuada{opacity:.62}
.nota-muro{margin:22px 0 0;font-size:14px;color:var(--texto-noche-baja)}

/* ---------- pasos ---------- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.paso{padding:clamp(22px,4.6vw,26px) clamp(20px,4.4vw,24px)}
.paso .num{display:block;font-family:Marcellus,serif;font-size:12px;letter-spacing:.28em;color:var(--cobalto);margin-bottom:12px}
.paso h3{font-size:20px;line-height:1.15;color:var(--cobalto-hondo);margin-bottom:10px}
.paso p{margin:0;font-size:14px;line-height:1.6;color:var(--gris-junta)}

/* ---------- dos servicios ---------- */
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.servicio{padding:clamp(24px,5vw,32px) clamp(20px,4.6vw,30px);display:flex;flex-direction:column;gap:14px}
.servicio h3{font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.08;color:var(--cobalto-hondo)}
.servicio p{margin:0;font-size:14px;line-height:1.65;color:var(--gris-junta)}
.servicio ul{margin:0;padding-left:18px;color:var(--gris-junta);font-size:14px}
.servicio li{margin-bottom:7px}
.servicio .boton{margin-top:auto;align-self:flex-start}

/* ---------- tres servicios ---------- */
.tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px}

/* ---------- los cuatro tamaños, explicados ---------- */
.tallas-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.talla-info{padding:clamp(22px,4.6vw,26px) clamp(20px,4.4vw,24px)}
.talla-info .letra{display:block;font-family:Marcellus,serif;font-size:2.6rem;line-height:1;color:var(--cobalto-hondo)}
.talla-info .med{display:block;margin-top:14px;font-size:12px;letter-spacing:.1em;font-weight:700;color:var(--cobalto);text-transform:uppercase;line-height:1.5}
.talla-info .ej{display:block;margin-top:12px;font-size:14px;line-height:1.6;color:var(--gris-junta)}

/* ---------- preguntas ---------- */
.faq{padding:0;margin-bottom:12px}
.faq summary{
  list-style:none;cursor:pointer;padding:clamp(18px,4vw,22px) clamp(18px,4.4vw,24px);
  font-family:Marcellus,serif;letter-spacing:.01em;
  font-size:20px;line-height:1.32;color:var(--cobalto-hondo);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;width:13px;height:13px;
  border-right:2px solid var(--cobalto);border-bottom:2px solid var(--cobalto);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s;
}
.faq[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq .cuerpo{padding:18px clamp(18px,4.4vw,24px) clamp(20px,4.4vw,24px);border-top:1px solid var(--esmalte-sombra);margin:0 clamp(10px,2.8vw,14px)}
.faq .cuerpo p{margin:0 0 12px;font-size:14px;line-height:1.65;color:var(--gris-junta)}
.faq .cuerpo p:last-child{margin-bottom:0}
.faq .cuerpo a{color:var(--cobalto)}

/* ---------- tamaños ---------- */
.fila-tamanos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end}
.pieza{cursor:pointer;border:0;background:none;padding:0;font:inherit;text-align:center;display:block;width:100%}
.pieza .azulejo{padding:18px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:transform .2s}
.pieza.p1 .azulejo{min-height:112px}
.pieza.p2 .azulejo{min-height:142px}
.pieza.p3 .azulejo{min-height:174px}
.pieza.p4 .azulejo{min-height:208px}
.pieza .letra{font-family:Marcellus,serif;font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1;color:var(--cobalto-hondo)}
.pieza .med{font-size:12px;letter-spacing:.08em;color:var(--gris-junta);font-weight:600;line-height:1.45}
.pieza[aria-pressed="true"] .azulejo{background:var(--cobalto);box-shadow:0 18px 30px -14px rgba(0,0,0,.75), 0 0 0 3px var(--ocre)}
.pieza[aria-pressed="true"] .letra{color:var(--esmalte)}
.pieza[aria-pressed="true"] .med{color:#c3d6f2}
.pieza[aria-pressed="true"] .azulejo::before{border-color:rgba(245,242,233,.75)}
.pieza:hover .azulejo{transform:translateY(-3px)}

/* ---------- formularios ---------- */
.hoja{max-width:820px;margin:0 auto}
.hoja .azulejo{padding:clamp(24px,5.4vw,34px) clamp(20px,5vw,32px)}
fieldset{border:0;margin:0 0 32px;padding:0}
legend{
  font-family:Marcellus,serif;text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  color:var(--cobalto);padding:0 0 14px;width:100%;border-bottom:1px solid var(--esmalte-sombra);margin-bottom:20px;
}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px}
.campo{display:flex;flex-direction:column}
.campo.entero{grid-column:1/-1}
.campo label{font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--cobalto);margin-bottom:8px}
.campo .pista{font-size:12px;color:var(--gris-junta);margin:7px 0 0;line-height:1.5}
.campo input,.campo textarea,.campo select{
  font:inherit;font-size:16px;color:var(--cobalto-hondo);background:transparent; /* 16px fijo: por debajo iOS hace zoom al enfocar */
  border:0;border-bottom:2px solid var(--cobalto-claro);padding:8px 2px;width:100%;border-radius:0;
  caret-color:var(--barro);
}
.campo textarea{border:2px solid var(--cobalto-claro);border-radius:3px;padding:12px;min-height:110px;resize:vertical}
.campo select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cobalto) 50%),linear-gradient(135deg,var(--cobalto) 50%,transparent 50%);background-position:calc(100% - 15px) 18px,calc(100% - 9px) 18px;background-size:6px 6px;background-repeat:no-repeat;padding-right:30px}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--barro)}
.campo input::placeholder,.campo textarea::placeholder{color:#b9c6da}
.campo.error input,.campo.error textarea,.campo.error select{border-color:#a3452a}
.campo .fallo{display:none;font-size:12px;font-weight:700;color:#8d4527;margin:8px 0 0}
.campo.error .fallo{display:block}

.campo label.marca-check{
  display:flex;gap:12px;align-items:flex-start;line-height:1.55;
  font-size:14px;font-weight:400;color:var(--gris-junta);
  text-transform:none;letter-spacing:0;margin-bottom:0;cursor:pointer;
}
.marca-check input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--cobalto)}
.marca-check a{color:var(--cobalto);text-underline-offset:3px}

.boton{
  display:inline-block;background:var(--ocre);color:#2b1c02;border:0;border-radius:3px;text-decoration:none;
  font-family:Manrope,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:14px;
  padding:16px clamp(20px,4.6vw,32px);cursor:pointer;line-height:1.2;max-width:100%;
}
.boton:hover{background:#f0bd60}
.boton.sobrio{background:var(--cobalto);color:var(--esmalte)}
.boton.sobrio:hover{background:var(--cobalto-hondo)}
.boton.fantasma{background:transparent;color:var(--esmalte);border:1px solid rgba(245,242,233,.34)}
.boton.fantasma:hover{background:rgba(245,242,233,.1)}
.acciones{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.pie-envio{font-size:12px;color:var(--gris-junta);margin:16px 0 0;line-height:1.6}

/* ---------- resumen de lo que falta ---------- */
.resumen-fallos{
  position:relative;border:2px solid #a3452a;border-radius:3px;
  padding:clamp(15px,3.6vw,18px) clamp(16px,3.8vw,20px);margin:0 0 28px;background:rgba(163,69,42,.05);
}
/* El rombo de remate del azulejo, en barro: avisa sin gritar */
.resumen-fallos::before{
  content:"";position:absolute;top:-5px;left:20px;width:9px;height:9px;
  background:#a3452a;transform:rotate(45deg);
}
.resumen-fallos strong{
  display:block;font-family:Marcellus,serif;font-size:20px;letter-spacing:.02em;
  color:#8d4527;margin-bottom:6px;
}
.resumen-fallos p{margin:0 0 10px;font-size:12px;color:var(--gris-junta)}
.resumen-fallos ul{margin:0;padding-left:18px;font-size:14px}
.resumen-fallos li{margin-bottom:5px}
.resumen-fallos a{color:#8d4527;font-weight:600;text-underline-offset:3px}

/* ---------- memoria del remitente ---------- */
.memoria{
  margin:0 0 26px;padding:14px 17px;border:1.5px solid var(--cobalto-claro);border-radius:3px;
  font-size:12px;line-height:1.6;color:var(--gris-junta);background:rgba(27,74,156,.04);
}

/* Sobre el esmalte los titulares van en cobalto: la regla de seccion los pinta en crema */
.azulejo h2,.azulejo h3,.hoja h2,.hoja h3{color:var(--cobalto-hondo)}

/* ---------- aviso del servidor tras enviar un formulario ---------- */
/* Sustituye al cuadro .resultado de la version estatica: ahora el envio lo
   hace el controlador del CMS y lo que se pinta es su $alert_form. */
.aviso-form{
  position:relative;margin:0 0 26px;padding:clamp(19px,4.4vw,24px) clamp(20px,4.6vw,26px);border-radius:3px;
  background:var(--esmalte);border:2px solid var(--cobalto-claro);
  box-shadow:0 16px 30px -18px rgba(0,0,0,.7);
}
.aviso-form::before{
  content:"";position:absolute;top:-6px;left:22px;width:10px;height:10px;
  background:var(--cobalto);transform:rotate(45deg);
}
.aviso-form strong{
  display:block;font-family:Marcellus,serif;font-size:22px;letter-spacing:.02em;
  color:var(--cobalto-hondo);margin-bottom:8px;text-transform:uppercase;
}
.aviso-form p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--gris-junta)}
.aviso-form p:last-child{margin-bottom:0}
.aviso-form a{color:var(--cobalto);font-weight:600;text-underline-offset:3px}
.aviso-form .otras{font-size:12px}
.aviso-form.mal{border-color:#a3452a}
.aviso-form.mal::before{background:#a3452a}
.aviso-form.mal strong{color:#8d4527}
.aviso-form.mal a{color:#8d4527}

/* ---------- miga de pan ---------- */
.miga{margin:18px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-noche-baja)}
.miga a{color:var(--texto-noche-baja)}
.miga a:hover{color:var(--ocre)}

/* ---------- bloques de texto ---------- */
.texto{max-width:74ch;margin:0 auto}
.texto h2{font-size:1.4rem;margin:44px 0 12px;color:var(--esmalte)}
.texto h2:first-child{margin-top:0}
.texto p,.texto li{color:var(--texto-noche);font-size:17px;line-height:1.75}
.texto ul{padding-left:20px}
.texto li{margin-bottom:8px}
.texto a{color:var(--ocre)}
.texto dl{margin:0}
.texto dt{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--texto-noche-baja);margin-bottom:5px}
.texto dd{margin:0 0 18px;color:var(--esmalte)}

/* ---------- llamada final ---------- */
.llamada{margin-top:clamp(56px,9vw,90px);text-align:center;padding-top:clamp(36px,6vw,56px)}
.llamada h2{font-size:clamp(1.6rem,4.4vw,2.6rem);margin-bottom:14px;color:var(--esmalte)}
.llamada p{max-width:52ch;margin:0 auto 26px;color:var(--texto-noche)}
.llamada .acciones{justify-content:center}

/* ---------- pie ---------- */
.pie{
  margin-top:clamp(60px,9vw,96px);border-top:1px solid rgba(245,242,233,.16);
  padding:clamp(34px,5.4vw,46px) 0 clamp(38px,6vw,54px);
  color:var(--texto-noche-baja);font-size:14px;
}
/* El correo de contacto no parte por si solo y se sale de la columna */
.pie a{overflow-wrap:anywhere}
.pie .envoltorio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:clamp(22px,4vw,28px)}
.pie b{display:block;font-family:Marcellus,serif;font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--esmalte);margin-bottom:10px}
.pie a{color:var(--esmalte);text-decoration:none;border-bottom:1px solid rgba(245,242,233,.3)}
.pie a:hover{color:var(--ocre);border-bottom-color:var(--ocre)}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:7px}
.pie .legal{grid-column:1/-1;border-top:1px solid rgba(245,242,233,.12);padding-top:20px;font-size:12px;color:#8fa3c1}

/* ---------- distintivo del Kit Digital ---------- */
/* La franja oficial se sirve con fondo blanco y no se puede recolorear, asi que
   se monta sobre plancha blanca: sobre el azul del pie se perderian el escudo
   y la bandera de la UE. Ocupa la fila entera de la rejilla, encima del legal. */
.pie .kit{grid-column:1/-1;margin:8px 0 0}
.pie .kit img{
  display:block;width:100%;max-width:540px;height:auto;margin:0 auto;
  background:#fff;border-radius:4px;padding:14px 18px;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.6);
}
@media (max-width:520px){
  /* En pantalla estrecha cada pixel de ancho es legibilidad: se recorta el aire */
  .pie .kit img{padding:10px 12px}
}

/* ---------- aviso de cookies ---------- */
/* La franja se ancla abajo y NO tapa la pagina: no hay capa opaca detras ni se
   bloquea el scroll. La ley no permite forzar la aceptacion, y una franja que
   se puede ignorar mientras se lee la web es justo lo que pide la AEPD.
   Se pinta con `hidden` desde el servidor; web.js la destapa solo si el
   visitante todavia no ha decidido, asi no parpadea a quien ya eligio. */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:var(--margen);padding-top:0;
  animation:cookies-subir .32s cubic-bezier(.2,.9,.3,1);
}
.cookies[hidden]{display:none}
@keyframes cookies-subir{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.cookies-caja{
  max-width:1140px;margin:0 auto;
  display:flex;align-items:center;gap:clamp(16px,3vw,30px);
  padding:clamp(18px,3vw,22px) clamp(18px,3vw,24px);
  box-shadow:0 -6px 40px -10px rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.28);
}
.cookies-texto{flex:1 1 auto;min-width:0}
.cookies-texto h2{font-size:15px;letter-spacing:.16em;color:var(--cobalto-hondo);margin-bottom:6px}
.cookies-texto p{margin:0;font-size:14px;line-height:1.6;color:var(--gris-junta);max-width:76ch}
.cookies-texto a{color:var(--cobalto);text-underline-offset:3px}
.cookies-botones{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:10px}
/* Aceptar y rechazar van con el MISMO peso visual a proposito: dar mas empaque
   al boton de aceptar es justo lo que la AEPD considera consentimiento viciado. */
.cookies-botones .boton{font-size:12px;letter-spacing:.12em;padding:13px 18px}
/* .boton.fantasma esta pensado para el fondo azul; sobre el esmalte de la caja
   hay que repintarlo o el texto claro desaparece. */
.boton.fantasma.oscuro{color:var(--cobalto-hondo);border-color:rgba(27,74,156,.4)}
.boton.fantasma.oscuro:hover{background:rgba(27,74,156,.1)}

/* ---------- panel de configuracion ---------- */
/* Es un <dialog> de verdad: el navegador ya da capa superior, cierre con Esc y
   la trampa de foco. Menos JS que mantener y mejor con lector de pantalla. */
.cookies-panel{
  border:0;padding:0;background:none;max-width:min(660px,calc(100% - 2 * var(--margen)));
  max-height:min(86vh,760px);color:var(--cobalto-hondo);
}
.cookies-panel::backdrop{background:rgba(6,18,38,.72)}
.cookies-panel-caja{
  position:relative;background:var(--esmalte);border-radius:4px;
  padding:clamp(22px,4vw,32px);box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
}
.cookies-panel-caja h2{font-size:clamp(1.15rem,3vw,1.5rem);color:var(--cobalto-hondo);padding-right:34px}
.cookies-panel-sub{margin:10px 0 22px;font-size:14px;line-height:1.6;color:var(--gris-junta)}
.cookies-lista{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.cookies-fila{
  display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--esmalte-sombra);border-radius:3px;padding:14px 16px;background:rgba(255,255,255,.5);
}
.cookies-fila:hover{border-color:var(--cobalto-claro)}
.cookies-fila input{width:20px;height:20px;flex:0 0 auto;margin-top:3px;accent-color:var(--cobalto);cursor:pointer}
.cookies-fila input:disabled{cursor:default;opacity:.6}
.cookies-fila b{display:block;font-family:Marcellus,serif;font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:14px}
.cookies-fila i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--barro)}
.cookies-fila small{display:block;margin-top:6px;font-size:13px;line-height:1.6;color:var(--gris-junta)}
.cookies-fila code{font-size:12px;background:rgba(27,74,156,.1);padding:1px 5px;border-radius:2px}
.cookies-panel-botones{display:flex;flex-wrap:wrap;gap:10px}
.cookies-panel-botones .boton{font-size:12px;letter-spacing:.12em;padding:13px 18px}
.cookies-cerrar{
  position:absolute;top:10px;right:10px;width:38px;height:38px;
  background:none;border:0;border-radius:3px;cursor:pointer;
  font:400 26px/1 Manrope,Arial,sans-serif;color:var(--gris-junta);
}
.cookies-cerrar:hover{background:rgba(27,74,156,.1);color:var(--cobalto-hondo)}

/* El enlace del pie que vuelve a abrir el panel: es un boton, pero en el pie
   tiene que leerse igual que sus vecinos, que son enlaces. */
.suelto-pie{
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  font:inherit;color:var(--esmalte);border-bottom:1px solid rgba(245,242,233,.3);
}
.suelto-pie:hover{color:var(--ocre);border-bottom-color:var(--ocre)}

/* Debajo de 780px la franja no cabe en una linea: el texto arriba, los tres
   botones abajo repartidos a partes iguales. */
@media (max-width:780px){
  .cookies-caja{flex-direction:column;align-items:stretch;gap:16px}
  .cookies-botones .boton{flex:1 1 150px;text-align:center}
}
@media (max-width:430px){
  .cookies-botones,.cookies-panel-botones{flex-direction:column;align-items:stretch}
  .cookies-botones .boton,.cookies-panel-botones .boton{text-align:center}
}

@media (max-width:860px){
  .cabecera .envoltorio{justify-content:space-between;gap:14px}
  .abrir-menu{display:inline-flex}
  /* El menú se despliega; cerrado no ocupa la primera pantalla */
  .menu{
    display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid rgba(245,242,233,.16);margin-top:4px;padding-top:4px;
  }
  .menu.desplegado{display:flex}
  .menu a{
    padding:14px 4px;font-size:14px;letter-spacing:.12em;min-height:44px;
    display:flex;align-items:center;
  }
  .menu a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--ocre);padding-left:14px}
}

/* En movil la marca, el boton de menu y el telefono no caben en una linea:
   el telefono baja a su propia fila y se convierte en una barra de llamada,
   que es lo que de verdad se pulsa desde la calle. */
@media (max-width:560px){
  .cabecera .envoltorio{gap:12px}
  .marca{gap:11px;min-width:0}
  .marca-placa svg{width:42px;height:42px}
  .marca-nombre em{font-size:11px;letter-spacing:.24em;margin-top:5px}
  .abrir-menu{padding:0 13px;letter-spacing:.1em}
  .tel-cabecera{order:4;width:100%;justify-content:center;min-height:46px;padding:11px 16px}
}

/* Un boton de 32px de aire a cada lado no cabe en 320px de pantalla:
   por debajo de 430px se apilan y ocupan el ancho entero */
@media (max-width:430px){
  .acciones{flex-direction:column;align-items:stretch;gap:11px}
  .acciones .boton{text-align:center;letter-spacing:.12em}
  .veredicto .enlaces{align-items:stretch}
  .veredicto .enlaces .boton{width:100%;padding:15px 18px}
}

/* La escalera solo se lee si las cuatro piezas están en fila */
@media (max-width:620px){
  .fila-tamanos{gap:8px}
  .pieza .med{display:none}
  .pieza .azulejo{padding:14px 4px}
  .pieza.p1 .azulejo{min-height:84px}
  .pieza.p2 .azulejo{min-height:106px}
  .pieza.p3 .azulejo{min-height:130px}
  .pieza.p4 .azulejo{min-height:158px}
  .pieza .letra{font-size:1.55rem}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important;animation-duration:.001ms !important}html{scroll-behavior:auto}}