:root{
  --rojo:#e52827;          /* rojo del logo Arisat */
  --rojo-hondo:#c8102e;    /* rojo Ariston del libro de marca */
  --negro:#1a171b;
  --azul:#007ed3;          /* azul frio del isotipo */
  --tinta:#2a2529;
  --gris:#6b6469;
  --linea:#e6e1e3;
  --nieve:#f7f5f6;
  --papel:#fff;
  --sombra:0 10px 30px rgb(26 23 27 / 8%);
  --ancho:1180px;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:Jost,"Futura","Century Gothic",system-ui,sans-serif;
  font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Archivo,Jost,system-ui,sans-serif;line-height:1.06;letter-spacing:-.015em;margin:0;color:var(--negro)}
h1{font-size:clamp(2.25rem,5.2vw,3.65rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700}
h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1rem}
.caja{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.rotulo{font:600 .75rem/1 Jost,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--rojo);margin:0 0 .85rem}
.rotulo--claro{color:#fff;opacity:.85}
.seccion{padding:3.5rem 0}
.seccion--nieve{background:var(--nieve)}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}

/* ---------- maqueta: marcas de dato pendiente ---------- */
.pdte{background:#fff3bf;box-shadow:0 0 0 1px #f0d86a;border-radius:3px;padding:0 .18em}
.aviso-maqueta{background:var(--negro);color:#fff;font-size:.8125rem;padding:.5rem 1rem;text-align:center;letter-spacing:.02em;margin:0}
.aviso-maqueta b{color:#ffe27a}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.6rem;border-radius:999px;font:600 1.0625rem/1 Jost,sans-serif;
  background:var(--rojo);color:#fff;border:2px solid var(--rojo);transition:.15s;white-space:nowrap;cursor:pointer;
}
.btn:hover{background:var(--rojo-hondo);border-color:var(--rojo-hondo)}
.btn--linea{background:transparent;color:var(--negro);border-color:#cfc8cb}
.btn--linea:hover{background:var(--negro);border-color:var(--negro);color:#fff}
.btn--claro{background:#fff;color:var(--rojo-hondo);border-color:#fff}
/* el icono de telefono en rojo, como el de la cabecera */
.btn--linea svg{color:var(--rojo)}
.btn--claro:hover{background:var(--negro);border-color:var(--negro);color:#fff}
.btn svg{width:20px;height:20px;flex:none}
.enlace{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--rojo);border-bottom:2px solid #f5c4c1;padding-bottom:2px}
.enlace:hover{border-color:var(--rojo)}

/* ---------- cabecera ---------- */
.tira{background:var(--negro);color:#cfc8cb;font-size:.8125rem}
.tira__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.35rem}
.tira b{color:#fff;font-weight:600}
.idiomas{display:flex;gap:.15rem;align-items:center}
.idiomas a{padding:.15rem .45rem;border-radius:4px;font-size:.75rem;letter-spacing:.06em;font-weight:600}
.idiomas a[aria-current]{background:var(--rojo);color:#fff}
.cab{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--linea)}
.cab__in{display:flex;align-items:center;gap:1.5rem;min-height:4.75rem}
.cab__in > a:first-child{flex:none}
.cab__logo{height:58px;width:auto;flex:none}
.nav{display:flex;gap:1.15rem;margin-left:auto;font-size:.9375rem;font-weight:500}
.nav a{padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--rojo);color:var(--negro)}
/* la pestana en la que estas: en rojo y subrayada. El marcado ya existia (aria-current)
   pero no tenia estilo. Sin cambiar el grosor, para que el menu no baile al cambiar de pagina */
.nav a[aria-current]:not(.btn){border-color:var(--rojo);color:var(--rojo)}
/* .nav a le pisaba el padding al boton y las letras iban al ras del borde */
.nav .btn{padding:.75rem 1.35rem;border-bottom:2px solid var(--rojo)}
.nav .btn:hover{border-color:var(--rojo-hondo);color:#fff}
.cab__tel{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.0625rem;color:var(--negro);white-space:nowrap}
.cab__tel svg{width:22px;height:22px;color:var(--rojo)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--linea);border-radius:8px;padding:.55rem .8rem;font:600 .8125rem Jost,sans-serif;letter-spacing:.08em}

/* ---------- portada ---------- */
.portada{position:relative;overflow:hidden;padding:3.5rem 0 4rem}
.portada__curva{position:absolute;right:-6%;top:-14%;width:min(56%,720px);height:auto;z-index:0;pointer-events:none}
.portada__in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.portada h1{margin-bottom:1rem}
.portada__sub{font-size:1.1875rem;color:var(--gris);max-width:34rem}
.acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.75rem 0 1.5rem}
.hechos{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;padding-top:1.35rem;border-top:1px solid var(--linea);font-size:.9375rem;color:var(--gris)}
.hechos div{display:flex;align-items:center;gap:.55rem}
.hechos svg{width:19px;height:19px;color:var(--rojo);flex:none}
.portada__foto{border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.portada__pie{margin:.85rem 0 0;font-size:.875rem;color:var(--gris)}

/* ---------- que te ocurre ---------- */
.problemas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.25rem}
.prob{display:block;background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:1.75rem 1.5rem 1.5rem;transition:.15s}
.prob:hover{border-color:var(--rojo);box-shadow:var(--sombra);transform:translateY(-2px)}
.prob__ico{width:44px;height:44px;color:var(--rojo);margin-bottom:1.1rem}
.prob h3{margin-bottom:.5rem}
.prob p{font-size:.9375rem;color:var(--gris);margin-bottom:.9rem}
.prob span{font:600 .875rem Jost,sans-serif;color:var(--rojo)}
.atajos{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.atajo{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--linea);background:#fff;border-radius:999px;padding:.6rem 1.1rem;font-size:.9375rem;font-weight:500}
.atajo:hover{border-color:var(--negro)}
.atajo svg{width:17px;height:17px;color:var(--gris)}

/* ---------- cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.cifra strong{display:block;font-family:Archivo,sans-serif;font-size:2.35rem;font-weight:700;color:var(--negro);line-height:1}
.cifra .pdte{background:#fff6d1;box-shadow:0 0 0 1px #ecd98a}
.cifra span{display:block;font-size:.9375rem;color:var(--gris);margin-top:.45rem}

/* ---------- marcas ---------- */
/* los logos vienen sobre blanco: van dentro de una tarjeta blanca para que
   no se vea el recuadro de cada uno contra el fondo gris */
.marcas{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;align-items:center;margin:2.25rem 0 2rem;
        background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:1.5rem 1.25rem}
.marcas img{width:100%;max-width:200px;height:auto;margin-inline:auto}
.oficial{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding-top:2rem;border-top:1px solid var(--linea)}
.oficial div.item{display:flex;gap:.85rem}
.oficial svg{width:24px;height:24px;color:var(--rojo);flex:none;margin-top:2px}
.oficial strong{display:block;margin-bottom:.2rem;color:var(--negro)}
.oficial p{font-size:.9375rem;color:var(--gris);margin:0}

/* ---------- mantenimiento ---------- */
.manten{background:var(--rojo-hondo);color:#fff;border-radius:var(--r);overflow:hidden}
/* align-items:start, no center: si no, el texto se descuelga a media altura
   y queda medio bloque de rojo vacio encima del titular */
.manten__in{display:grid;grid-template-columns:1fr .95fr;gap:2.5rem;align-items:start;padding:3.25rem 3rem}
.manten h2{color:#fff}
.manten h2 + p{margin-top:1.1rem}
.manten p{color:#fff;font-weight:500}
.manten__ficha{background:#fff;border-radius:var(--r);padding:2rem}
.manten__ficha h3{margin-bottom:1.1rem}
.manten .btn{width:100%;margin-top:.5rem}
/* el gancho: lo que cuesta, en grande */
.precio-ancla{margin:2rem 0 0}
.precio-ancla b{display:block;font:700 2.75rem/1 Archivo,Jost,sans-serif;color:#fff;letter-spacing:-.025em}
.precio-ancla span{display:block;font-size:.9375rem;color:#fff;font-weight:500;margin-top:.5rem}
/* las dos respuestas a "cual es el tuyo" */
.opcion{display:block;border:1px solid var(--linea);border-radius:10px;padding:1.05rem 1.15rem;margin-bottom:.75rem}
.opcion:hover{border-color:var(--rojo)}
.opcion strong{display:block;color:var(--negro);margin-bottom:.3rem;font-family:Archivo,Jost,sans-serif}
.opcion em{display:block;color:var(--gris);font-size:.9375rem;line-height:1.45;font-style:normal}

/* ---------- empresas ---------- */
.empresas{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.25rem}
/* en la portada solo van dos grupos; las cuatro categorias estan en empresas.html */
.empresas--dos{grid-template-columns:repeat(2,1fr)}

/* los municipios, plegados: siguen en el HTML, asi que Google los lee igual,
   pero dejan de ser 28 pastillas de ruido nada mas abrir */
.municipios{margin-top:1.5rem;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.municipios summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;position:relative;
                    font:600 .9375rem Jost,sans-serif;color:var(--negro)}
.municipios summary::-webkit-details-marker{display:none}
.municipios summary::after{content:"+";position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
                           font-size:1.35rem;color:var(--rojo);line-height:1}
.municipios[open] summary::after{content:"−"}
.municipios .zonas{margin-top:0;padding-bottom:1.25rem}
.empresa{border:1px solid var(--linea);border-radius:var(--r);padding:1.5rem;background:#fff}
.empresa svg{width:30px;height:30px;color:var(--azul);margin-bottom:.9rem}
.empresa h3{font-size:1.0625rem;margin-bottom:.4rem}
.empresa p{font-size:.9063rem;color:var(--gris);margin:0}

/* ---------- faq ---------- */
.faq{max-width:56rem;margin-top:2rem}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;font:600 1.0625rem Jost,sans-serif;color:var(--negro);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.5rem;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--rojo);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .resp{padding:0 2.5rem 1.35rem 0;color:var(--gris);font-size:1rem}
.faq .resp p:last-child{margin-bottom:0}
/* ejemplo plegado dentro de una respuesta: sin la raya ni el +/- de las FAQ, con una i en circulo */
/* details y su cuerpo a bloque completo: con el summary en inline-flex Chrome estrangulaba el contenido a 35 px */
.faq .ejemplo{border:0;margin:.6rem 0 0;display:block;width:100%}
.faq .ejemplo summary{padding:.3rem 0;font:600 .9375rem Jost,sans-serif;color:var(--rojo);display:flex;width:fit-content;align-items:center;gap:.5rem}
.faq .ejemplo__cuerpo{display:block;width:100%}
.faq .ejemplo summary::after{content:none}
.faq .ejemplo summary::before{content:"i";display:inline-flex;align-items:center;justify-content:center;width:1.15em;height:1.15em;
  border:1.5px solid var(--rojo);border-radius:50%;font:700 .75em/1 Archivo,Jost,sans-serif;font-style:normal}
.faq .ejemplo__cuerpo{margin-top:.6rem;padding:.9rem 1.1rem;background:var(--nieve);border-radius:10px;font-size:.9375rem}
.faq .ejemplo__cuerpo p:last-child{margin-bottom:0}

/* ---------- zonas ---------- */
.zonas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.zonas span{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:.4rem .9rem;font-size:.875rem;color:var(--gris)}

/* ---------- contacto ---------- */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.datos{display:grid;gap:1.35rem;margin-top:1.75rem}
@media (min-width:761px){.datos--fila{grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}}
.dato{display:flex;gap:1rem}
.dato svg{width:22px;height:22px;color:var(--rojo);flex:none;margin-top:3px}
.dato strong{display:block;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:600;margin-bottom:.15rem}
.dato a,.dato p{font-size:1.0625rem;color:var(--negro);margin:0}
.formulario{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:2rem;box-shadow:var(--sombra)}
.formulario h3{margin-bottom:.35rem}
.formulario > p{font-size:.9375rem;color:var(--gris);margin-bottom:1.35rem}
.campo{margin-bottom:1rem}
.campo label{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:.35rem}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.8rem .9rem;border:1px solid #d7d1d4;border-radius:9px;
  font:400 1rem Jost,sans-serif;color:var(--negro);background:#fff;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px rgb(0 126 211 / 12%)}
.campo textarea{min-height:96px;resize:vertical}
.par{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.opcional{font-weight:400;text-transform:none;letter-spacing:0;color:#a49da0}
.formulario .btn{width:100%;margin-top:.35rem}
.formulario small{display:block;margin-top:.9rem;font-size:.8125rem;color:var(--gris);line-height:1.45}

/* separador entre lo obligatorio y lo que se agradece pero no frena el envio */
.separa-campos{display:flex;align-items:center;gap:.9rem;margin:1.5rem 0 1.1rem;
               font:600 .75rem/1 Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#a49da0}
.separa-campos span{flex:1;height:1px;background:var(--linea)}
.ayuda-campo{display:block;margin-top:.45rem;font-size:.8125rem;color:var(--gris);line-height:1.4}
.campo input[type=file]{padding:.65rem .9rem;font-size:.9375rem;background:var(--nieve);cursor:pointer}

/* las dos casillas: la de privacidad obliga, la comercial no */
.casilla{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 .85rem;
         font-size:.9375rem;line-height:1.45;color:var(--tinta);cursor:pointer}
.casilla input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--rojo);cursor:pointer}
.casilla a{color:var(--rojo);text-decoration:underline}
.casilla .opcional{text-transform:none;letter-spacing:0}

/* ---------- pie ---------- */
.pie{background:var(--negro);color:#a9a2a6;padding:3.5rem 0 0;font-size:.9375rem}
.pie__in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;padding-bottom:2.75rem}
.pie h2{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:.9rem;font-family:Jost,sans-serif;font-weight:600}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pie a:hover{color:#fff}
.pie__logo{height:52px;width:auto;margin-bottom:1.1rem}
.pie__abajo{border-top:1px solid #332e32;padding:1.35rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.875rem}
/* trabaja con nosotros: enlace visible en el pie; tarjeta con boton en contacto */
.pie__empleo{margin-top:.6rem}
.pie__empleo a{color:#fff;font-weight:600;border-bottom:1px solid #6b6469;padding-bottom:1px}
.pie__empleo a:hover{border-color:#fff}
.empleo{margin-top:2.25rem;padding:1.5rem 1.6rem;border:1px solid var(--linea);border-radius:var(--r);background:#fff}
.empleo h3{margin-bottom:.5rem}
.empleo p{color:var(--gris);font-size:.9688rem;margin-bottom:1.1rem}

/* ---------- barra movil ---------- */
.barra-movil{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:#fff;border-top:1px solid var(--linea);padding:.55rem .75rem;
  box-shadow:0 -6px 22px rgb(26 23 27 / 12%);gap:.5rem;
}
.barra-movil a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.85rem .5rem;border-radius:10px;font:600 .9375rem Jost,sans-serif;
}
.barra-movil svg{width:19px;height:19px}
.bm-tel{background:var(--rojo);color:#fff}
.bm-wa{background:#25d366;color:#0b3d20}
.bm-cita{background:var(--nieve);color:var(--negro);border:1px solid var(--linea)}

@media (max-width:960px){
  .portada__in,.manten__in,.contacto{grid-template-columns:1fr}
  /* apilado, el formulario caia detras de todo el texto (2,8 pantallas de scroll).
     En movil va primero: el que entra a pedir asistencia viene a eso. */
  .contacto > .formulario{order:-1;margin-bottom:2rem}
  .manten__in{padding:2.5rem 1.75rem}
  .portada__curva{display:none}
  .problemas,.empresas{grid-template-columns:1fr 1fr}
  .cifras{grid-template-columns:1fr 1fr;gap:1.75rem}
  .oficial{grid-template-columns:1fr}
  .pie__in{grid-template-columns:1fr 1fr}
}
/* por debajo de 1200 px la navegacion ya no cabe al lado del logo y el telefono
   (con 'Codigos de error' en el menu la cabecera pide unos 1.150 px de caja) */
@media (max-width:1199px){
  .nav{display:none}
  .menu-btn{display:block}
  .nav.abierto{
    display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--linea);padding:.5rem 1.25rem 1.25rem;
    box-shadow:var(--sombra);margin-left:0;z-index:70;
  }
  .nav.abierto a{padding:.85rem 0;border-bottom:1px solid var(--linea)}
  .nav.abierto a:last-child{border-bottom:0;margin-top:.75rem}
  /* en el menu desplegado la raya roja no toca: la pestana activa va en rojo y negrita */
  .nav.abierto a[aria-current]:not(.btn){border-bottom-color:var(--linea);font-weight:600}
  .cab{position:relative}
}
@media (max-width:760px){
  .seccion{padding:1.75rem 0}
  /* en movil las tarjetas se apilan: bajamos aire para no alargar la pagina */
  .prob{padding:1.35rem 1.25rem 1.25rem}
  .prob__ico{width:34px;height:34px;margin-bottom:.7rem}
  .prob p{margin-bottom:.7rem}
  .problemas{gap:.85rem;margin-top:1.6rem}
  .empresa{padding:1.25rem}
  h1{font-size:2.05rem}
  .cab__tel span{display:none}
  /* el logo entero no cabe con el boton y el telefono: baja a 46 px de alto,
     que son 178 px de ancho, muy por encima de los 57 px minimos del manual */
  .cab__logo{height:46px}
  .cab__in{gap:.75rem;min-height:4.25rem}
  .problemas,.empresas{grid-template-columns:1fr}
  .atajos{gap:.45rem;margin-top:1.1rem}
  .atajo{padding:.5rem .85rem;font-size:.875rem}
  .barra-movil{display:flex}
  body{padding-bottom:4.6rem}
  .portada{padding:1.75rem 0 2rem}
  .acciones .btn{flex:1;min-width:13rem}
  /* a una sola columna el pie medía 1.080 px en cada pagina; a dos cabe igual
     (son palabras cortas) y se ahorra media pantalla en todo el sitio */
  .pie__in{grid-template-columns:1fr 1fr;gap:1.5rem 1.25rem}
  .pie__in > div:first-child{grid-column:1 / -1}
  .par{grid-template-columns:1fr}
}

/* ============================================================
   PAGINAS INTERIORES
   ============================================================ */

/* cabecera de pagina */
.cabecera-pagina{background:var(--nieve);border-bottom:1px solid var(--linea);padding:2.75rem 0 3rem}
.cabecera-pagina h1{font-size:clamp(1.95rem,4.2vw,3rem);max-width:22ch;text-wrap:balance}
.cabecera-pagina .lead{font-size:1.1875rem;color:var(--gris);max-width:46rem;margin:1.1rem 0 0}
.miga{font-size:.8125rem;color:var(--gris);margin:0 0 1rem}
.miga a{border-bottom:1px solid transparent}
.miga a:hover{color:var(--rojo);border-color:var(--rojo)}

/* bloque de contenido a dos columnas */
.bloque{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;padding:2.75rem 0;border-top:1px solid var(--linea)}
.bloque--primero{border-top:0;padding-top:0}
.bloque h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.85rem}
.bloque p{color:var(--gris)}
.bloque p:last-child{margin-bottom:0}
/* la lista 'que atendemos' va bajo el texto y la foto llena la columna derecha:
   antes la foto iba sola debajo, centrada y con aire a los lados */
.bloque .ficha{margin-top:1.75rem}
.bloque__foto{margin:0;align-self:stretch;display:flex;flex-direction:column;min-height:0}
/* el marco no aporta alto propio (la imagen va en absoluto): la fila la manda el texto y la foto la llena */
.bloque__foto .marco{position:relative;flex:1;min-height:0}
.bloque__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:var(--r);display:block}
.bloque__foto figcaption{margin-top:.7rem;font-size:.9375rem;line-height:1.45;color:var(--gris)}
@media (max-width:760px){
  /* apilado: el marco toma alto de su ancho, cuadrado */
  .bloque__foto .marco{aspect-ratio:1/1;flex:none}
}

.lista-check{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.lista-check li{display:flex;gap:.65rem;align-items:flex-start;font-size:1rem}
.lista-check svg{width:19px;height:19px;color:var(--rojo);flex:none;margin-top:4px}
.ficha{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:1.75rem}
/* un svg suelto dentro de una ficha es su icono: sin esto sale a tamano natural y en negro */
.ficha > svg,.ficha > svg.prob__ico{width:38px;height:38px;color:var(--rojo);margin-bottom:1rem}
.ficha h3{margin-bottom:1rem}
.ficha .foto-ancha + h3{margin-top:1.75rem}
.ficha--nieve{background:var(--nieve);border-color:transparent}

/* pasos: solo donde el orden significa algo de verdad */
.pasos{counter-reset:paso;display:grid;gap:1.5rem;margin:2rem 0 0;padding:0;list-style:none}
.paso{display:grid;grid-template-columns:2.75rem 1fr;gap:1.25rem;align-items:start}
.paso::before{
  counter-increment:paso;content:counter(paso);
  width:2.75rem;height:2.75rem;border-radius:50%;background:var(--rojo);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:700 1.125rem/1 Archivo,sans-serif;
}
.paso h3{margin-bottom:.4rem;line-height:1.2}
.paso p{color:var(--gris);margin:0;font-size:1rem;line-height:1.5}

/* aviso de seguridad */
/* nota informativa, no alarma: el rojo sobre rosa gritaba demasiado */
.aviso{border-left:3px solid var(--azul);background:var(--nieve);padding:1.35rem 1.6rem;border-radius:0 10px 10px 0;margin:2rem 0}
.aviso strong{display:block;color:var(--negro);margin-bottom:.5rem}
.aviso p{margin:0;color:var(--tinta);font-size:.9688rem}
.aviso p strong{display:inline;margin:0}
.aviso p + p{margin-top:.6rem}

/* tabla */
.tabla-caja{overflow-x:auto;margin-top:1.75rem;border:1px solid var(--linea);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;min-width:32rem}
caption{text-align:left;padding:1.1rem 1.25rem .35rem;font-weight:600;color:var(--negro)}
th,td{text-align:left;padding:.85rem 1.25rem;border-bottom:1px solid var(--linea);font-size:.9375rem;vertical-align:top}

/* En movil la tabla mide 512 px dentro de un hueco de 333: habia que arrastrarla
   de lado y lo que quedaba escondido era justo la columna del precio.
   Por debajo de 760 px cada fila se convierte en una ficha. */
@media (max-width:760px){
  .tabla-caja{overflow-x:visible;border:0;background:transparent;border-radius:0;margin-top:1.5rem}
  .tabla-caja table{display:block;min-width:0}
  .tabla-caja caption{display:block;width:100%;padding:0 0 .85rem}
  /* la cabecera no se ve pero sigue ahi para los lectores de pantalla */
  .tabla-caja thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabla-caja tbody{display:block}
  .tabla-caja{border-top:0}
  .tabla-caja tr{display:block;background:#fff;border:1px solid var(--linea);border-left-width:4px;
                 border-radius:var(--r);padding:.95rem 1.1rem;margin-bottom:.6rem}
  .tabla-caja--rojo tr{border-left-color:var(--rojo)}
  .tabla-caja--azul tr{border-left-color:var(--azul)}
  .tabla-caja tr:last-child{margin-bottom:0}
  .tabla-caja th,.tabla-caja td{display:block;border:0;padding:0}
  .c-eq{font:600 1.0625rem/1.25 Archivo,Jost,sans-serif;color:var(--negro)}
  .c-cob{color:var(--gris);font-size:.9375rem;margin-top:.2rem}
  .c-cob::before{content:"Cobertura: "}
  .c-mes{margin-top:.55rem}
  .c-anio{margin-top:.1rem}
  .c-mes strong{font:700 1.55rem/1 Archivo,Jost,sans-serif;color:var(--negro);letter-spacing:-.02em}
  .c-mes::after{content:" al mes";color:var(--gris);font-size:.9375rem;font-weight:400}
  .c-anio{color:var(--gris);font-size:.9375rem}
  .c-anio::after{content:" al año"}
}
thead th{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:600}
tbody th{font-weight:600;color:var(--negro)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}

/* Los dos planes se distinguen por color: rojo la extension de garantia (piezas
   incluidas) y azul el mantenimiento. En movil, donde las filas son fichas
   sueltas, sin esto las dos tablas se confundian en una sola lista. */
.tabla-caja caption .etq{
  display:inline-block;margin-right:.6rem;padding:.22rem .6rem;border-radius:999px;
  font:700 .6875rem/1.35 Jost,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  vertical-align:.08em;
}
.tabla-caja--rojo caption .etq{background:#fdeaea;color:var(--rojo-hondo)}
.tabla-caja--azul caption .etq{background:#e6f3fc;color:#0b5f96}
.tabla-caja--rojo{border-top:3px solid var(--rojo)}
.tabla-caja--azul{border-top:3px solid var(--azul)}

/* texto largo: legales */
.prosa{max-width:44rem;color:var(--gris)}
.prosa h2{font-size:1.3125rem;margin:2.5rem 0 .75rem;color:var(--negro)}
.prosa h3{font-size:1.0625rem;margin:1.6rem 0 .5rem}
.prosa ul{padding-left:1.2rem;margin:0 0 1rem}
.prosa li{margin-bottom:.4rem}
.prosa dl{margin:0 0 1rem}
.prosa dt{font-weight:600;color:var(--negro);margin-top:.9rem}
.prosa dd{margin:0}

/* rejilla generica de tarjetas */
.rejilla{display:grid;gap:1.25rem;margin-top:2rem}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}

/* llamada final de pagina */
.cierre{background:var(--negro);color:#cfc8cb;border-radius:var(--r);padding:2.75rem 3rem;
        display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cierre h2{color:#fff;max-width:24ch}
.cierre p{margin:.6rem 0 0;max-width:44ch}
.cierre .acciones{margin:0;flex-shrink:0}

/* menu movil */
@media (max-width:760px){
  .cabecera-pagina{padding:1.5rem 0 1.75rem}
  .bloque,.rejilla--2,.rejilla--3{grid-template-columns:1fr;gap:1.1rem}
  .bloque{padding:1.5rem 0}
  .rejilla{margin-top:1.25rem}
  .caja > h2{margin-bottom:.6rem}
  .lead{margin-bottom:0}
  .foto-ancha{margin-top:1.5rem}
  .cierre{padding:1.75rem 1.5rem}
  .casos{gap:.9rem}
  .caso{padding:1.3rem 1.35rem 1.4rem}
  .cierre{padding:2rem 1.75rem;flex-direction:column;align-items:flex-start}
  .paso{grid-template-columns:2.25rem 1fr;gap:1rem}
  .paso::before{width:2.25rem;height:2.25rem;font-size:1rem}
}
/* la tableta reparte de tres a dos columnas; el limite inferior es
   imprescindible: esta regla va despues de la de 760 px y sin el
   ganaba tambien en el movil, dejando dos columnas que no caben */
@media (min-width:761px) and (max-width:960px){
  .rejilla--3{grid-template-columns:1fr 1fr}
}

/* tarjeta destacada de las dos opciones de contrato */
.ficha--destacada{border:2px solid var(--rojo);box-shadow:var(--sombra)}
.rotulo--gris{color:var(--gris)}
/* aviso de letra pequeña puesta por delante, no escondida */
.nota-honesta{background:var(--nieve);border-left:4px solid var(--gris);border-radius:0 10px 10px 0;
              padding:1.2rem 1.5rem;margin-top:2rem}
.nota-honesta p{margin:0;font-size:.9688rem}
.seccion--nieve .nota-honesta{background:#fff}

/* fotos de trabajos reales: a lo ancho de la caja, con su pie */
.foto-ancha{margin:2.2rem 0 0}
.foto-ancha img{width:100%;height:auto;display:block;border-radius:var(--r)}
/* Ninguna foto pasa de 480 px de alto en escritorio. El tope de ancho lo calcula
   el generador foto a foto (--tope) con las medidas reales de cada imagen, asi que
   la foto se ve entera, nunca recortada. Se estrecha el figure y no la imagen: el
   <img> conserva width:100% y el navegador sigue reservando el hueco antes de
   cargarla, que si no la pagina pega un salto. En movil no aplica: ahi la foto
   ocupa el ancho de la caja y ya sale pequena. */
@media (min-width:761px){
  .foto-ancha{max-width:var(--tope,100%);margin-inline:auto}
}
.foto-ancha figcaption{margin-top:.7rem;font-size:.9375rem;line-height:1.45;color:var(--gris)}

/* foto al lado de un texto; en movil se pone debajo */
.con-foto{display:grid;gap:2rem;align-items:center}
@media (min-width:820px){.con-foto{grid-template-columns:1fr 22rem}}
.con-foto img{width:100%;height:auto;display:block;border-radius:var(--r)}
.con-foto figcaption{margin-top:.7rem;font-size:.9375rem;line-height:1.45;color:var(--gris)}

/* fichas de errores que puede mirar el cliente */
.casos{display:grid;gap:1.25rem;margin-top:2rem}
@media (min-width:860px){.casos{grid-template-columns:1fr 1fr}}
.caso{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:1.6rem 1.7rem 1.7rem}
.caso__codigo{margin:0 0 .5rem;font:700 .75rem/1 Archivo,Jost,sans-serif;letter-spacing:.1em;
              text-transform:uppercase;color:var(--rojo)}
.caso h3{margin:0 0 .6rem;font-size:1.2rem;line-height:1.2}
.caso__que{margin:0 0 1.1rem;color:var(--gris);font-size:.9375rem;line-height:1.5}
.caso__pasos{margin:0;padding-left:1.2rem;font-size:.9375rem;line-height:1.55}
.caso__pasos li{margin-bottom:.7rem}
.caso__pasos li:last-child{margin-bottom:0}
.caso__parar{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--linea);
             font-size:.9375rem;line-height:1.5;color:var(--negro)}

/* telefono dentro del texto: pulsable en el movil, sin cambiar el color del parrafo */
.tel-texto{font-weight:600;white-space:nowrap;border-bottom:1px solid currentColor}

/* ---------- codigos de error: indice y una pagina por codigo ---------- */
.cod-intro{max-width:46rem;color:var(--gris)}
.cod-intro p:last-child{margin-bottom:0}
.cod-grupo{font-size:clamp(1.35rem,2.4vw,1.65rem);margin:2.75rem 0 0}
.cod-grupo + .rejilla{margin-top:1.25rem}
.prob .cod-chip{display:inline-block;margin-bottom:.8rem;padding:.25rem .65rem;border-radius:999px;
  background:#fdeaea;color:var(--rojo-hondo);font:700 .75rem/1.3 Jost,sans-serif;letter-spacing:.07em;
  text-transform:uppercase}
.prob .cod-chip--gris{background:var(--nieve);color:var(--gris)}
.cod{display:grid;gap:2.5rem;align-items:start}
@media (min-width:961px){.cod{grid-template-columns:minmax(0,1fr) 20rem;gap:4rem}}
.cod__texto{max-width:46rem}
.cod__texto h2{font-size:clamp(1.35rem,2.4vw,1.65rem);margin:2.5rem 0 .85rem}
.cod__texto h2:first-child{margin-top:0}
.cod__modelos{font-size:.9375rem}
.cod__causas{margin:0;padding-left:1.25rem}
.cod__causas li{margin-bottom:.8rem;line-height:1.55}
.cod__causas li:last-child{margin-bottom:0}
.cod__nota{color:var(--gris);font-size:.9375rem;margin:-.35rem 0 1rem}
.cod__texto .caso__pasos,.cod__texto .caso__parar{font-size:1rem}
.cod__lado{display:grid;gap:1.25rem}
.cod__lado .ficha{padding:1.5rem}
.cod__lado .ficha h3{margin-bottom:.6rem}
.cod__lado .ficha p{color:var(--gris);font-size:.9375rem}
.cod__lado .btn{width:100%}
.cod__lado .btn + .btn{margin-top:.6rem}
.cod__otros{list-style:none;margin:0 0 1rem;padding:0}
.cod__otros li{border-top:1px solid var(--linea)}
.cod__otros li:first-child{border-top:0}
.cod__otros a{display:block;padding:.65rem 0;font-size:.9375rem;line-height:1.35;color:var(--negro)}
.cod__otros a:hover{color:var(--rojo)}
.cod__otros b{display:block;margin-bottom:.15rem;font:700 .6875rem/1.3 Jost,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rojo)}

/* ---------- grifo de llenado por modelo (pagina del 108 / 1P4) ---------- */
.llenado [hidden]{display:none}
.llenado__marca{margin-top:1.25rem}
.llenado__marca-nombre{margin:0 0 .55rem;font:600 .75rem/1 Jost,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris)}
.llenado__modelos{display:flex;flex-wrap:wrap;gap:.5rem}
.llenado__modelos button{border:1px solid #cfc8cb;background:#fff;border-radius:999px;padding:.5rem 1rem;
  font:500 .9375rem/1.2 Jost,sans-serif;color:var(--negro);cursor:pointer;transition:.15s}
.llenado__modelos button:hover{border-color:var(--rojo);color:var(--rojo)}
.llenado__modelos button[aria-pressed="true"]{background:var(--rojo);border-color:var(--rojo);color:#fff}
.llenado__no-esta{margin:1.1rem 0 0;font-size:.9375rem;color:var(--gris)}
.llenado__foto{margin:1.5rem 0 0;max-width:40rem}
.llenado__foto img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--linea);background:var(--nieve)}
.llenado__foto figcaption{margin-top:.6rem;font-size:.9375rem;line-height:1.45;color:var(--gris)}
.llenado__nombre{display:block;font-weight:600;color:var(--negro)}
.llenado__guia{display:grid;gap:1.25rem 2rem;margin-top:1.75rem;align-items:start}
@media (min-width:600px){.llenado__guia{grid-template-columns:minmax(0,1fr) 10.5rem}}
.llenado__titulo{margin:0 0 .75rem;font-weight:600;color:var(--negro)}
.llenado__reloj{margin:0;max-width:13rem}
.llenado__reloj svg{display:block;width:100%;max-width:10.5rem;height:auto}
.llenado__reloj figcaption{margin-top:.6rem;font-size:.875rem;line-height:1.45;color:var(--gris)}
.llenado__aviso{margin:1.75rem 0 0;border-left-color:var(--rojo)}

/* ---------- buzon de sugerencias, quejas y felicitaciones ---------- */
.buzon__titulo{font-size:clamp(1.35rem,2.4vw,1.65rem);margin:0 0 1.25rem}
.buzon__hablar{margin-top:2rem}
.buzon__hablar p{margin:0;color:var(--gris)}
.formulario .buzon__uno{margin:-.35rem 0 1rem}

/* ---------- tarifa de reparacion (servicios) ---------- */
.tabla-caja--tarifas{border-top:3px solid var(--negro)}
.tabla-caja--tarifas table{min-width:50rem}
.tabla-caja--tarifas tbody th{min-width:13rem}
.t-tipo{display:block;font-weight:600;color:var(--negro)}
.t-sub{display:block;margin-top:.25rem;font-size:.8125rem;line-height:1.4;font-weight:400;color:var(--gris)}
.t-val small{display:block;font-size:.8125rem;color:var(--gris)}
.t-linea{display:block}
.t-linea + .t-linea{margin-top:.4rem}
.tabla-caja--tarifas .t-no{color:var(--gris)}
.tarifas-notas{display:grid;gap:.9rem 2.5rem;margin:1.75rem 0 0;max-width:62rem}
@media (min-width:761px){.tarifas-notas{grid-template-columns:1fr 1fr}}
.tarifas-notas dt{font-weight:600;color:var(--negro)}
.tarifas-notas dd{margin:.15rem 0 0;color:var(--gris);font-size:.9375rem;line-height:1.5}
/* En movil cada fila es una ficha: el dato a la derecha y su etiqueta a la izquierda */
@media (max-width:760px){
  .tabla-caja--tarifas table{min-width:0}
  .tabla-caja--tarifas tr{border-left-color:var(--negro)}
  .tabla-caja--tarifas tbody th{min-width:0;margin-bottom:.55rem}
  .tabla-caja--tarifas td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
                          padding:.5rem 0;border-top:1px solid var(--linea)}
  .tabla-caja--tarifas td::before{content:attr(data-etq);flex:none;max-width:48%;color:var(--gris);font-size:.875rem}
  .tabla-caja--tarifas .t-val{text-align:right}
}
.t-linea small{white-space:nowrap}
/* con la cabecera fija, un salto a un ancla (#tarifas, #averias...) no queda tapado por ella */
@media (min-width:1200px){[id]{scroll-margin-top:5.5rem}}

/* tarifas: la segunda tabla (otros conceptos) va pegada a la primera */
.tabla-caja--tarifas + .tabla-caja--tarifas{margin-top:1.25rem}
.tabla-caja--tarifas caption{font-size:1.0625rem}
@media (max-width:760px){.tabla-caja--tarifas + .tabla-caja--tarifas{margin-top:2rem}}

/* antes y despues: dos fotos en el hueco de una. En escritorio, una encima de otra
   llenando la columna; en movil, una al lado de otra para compararlas de un vistazo */
.antes-despues .marco{display:grid;grid-template-rows:1fr 1fr;gap:.6rem}
.antes-despues .ad{position:relative;min-height:0;overflow:hidden;border-radius:var(--r)}
.antes-despues .ad img{object-position:50% 55%}
.antes-despues .ad--despues img{object-position:50% 80%}
.ad__etq{position:absolute;left:.75rem;top:.75rem;z-index:1;padding:.3rem .75rem;border-radius:999px;
  background:var(--rojo);color:#fff;font:700 .75rem/1.2 Jost,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ad--despues .ad__etq{background:var(--azul)}
@media (max-width:760px){
  .antes-despues .marco{aspect-ratio:auto;grid-template-rows:none;grid-template-columns:1fr 1fr}
  .antes-despues .ad{aspect-ratio:3/4}
}

/* formulario: lo obligatorio con asterisco y los avisos de error debajo de cada campo */
.req{color:var(--rojo);font-weight:700;margin-left:.15em;letter-spacing:0}
.campo__error{display:block;margin-top:.4rem;font-size:.8125rem;line-height:1.35;font-weight:500;color:var(--rojo-hondo)}
.formulario [aria-invalid="true"]{border-color:var(--rojo)}
.formulario [aria-invalid="true"]:focus{border-color:var(--rojo);box-shadow:0 0 0 3px rgb(229 40 39 / 14%)}
.casilla{flex-wrap:wrap}
/* el texto se queda al lado de la casilla; solo el aviso de error baja de linea */
.casilla > span:not(.campo__error){flex:1 1 0;min-width:0}
.casilla .campo__error{flex-basis:100%;margin:0 0 0 calc(20px + .7rem)}
.sugerencia{display:inline-block;margin-top:.4rem;padding:0;border:0;background:none;cursor:pointer;
  font:600 .8125rem Jost,sans-serif;color:var(--azul);text-decoration:underline}
.formulario .form-ok{margin:.9rem 0 0;padding:.75rem 1rem;border-radius:10px;background:#e9f6ee;color:#1d6b3a;font-size:.9375rem}

/* placa de caracteristicas de ejemplo: en la FAQ de la portada y en Pedir asistencia */
.faq .ejemplo__foto{margin:0 0 .9rem}
.faq .ejemplo__foto img,.placa-ejemplo img{width:100%;max-width:30rem;height:auto;border-radius:10px;border:1px solid var(--linea)}
.placa-ejemplo{margin:1.25rem 0 0;max-width:30rem}
.placa-ejemplo figcaption{margin-top:.6rem;font-size:.875rem;line-height:1.45;color:var(--gris)}

/* fichas de precios en el movil: las palabras que pone la hoja de estilos, en cada idioma */
@media (max-width:760px){
  :lang(ca) .c-anio::after{content:" a l'any"}
  :lang(en) .c-cob::before{content:"Cover: "}
  :lang(en) .c-mes::after{content:" per month"}
  :lang(en) .c-anio::after{content:" per year"}
  :lang(de) .c-cob::before{content:"Garantiedauer: "}
  :lang(de) .c-mes::after{content:" pro Monat"}
  :lang(de) .c-anio::after{content:" pro Jahr"}
}

/* palabras largas (sobre todo en aleman: Eigentümergemeinschaften): se parten antes que
   desbordar la pantalla del movil, y las columnas no se ensanchan por su contenido */
h1,h2,h3,p,li,dd,dt,summary,figcaption,label,.dato,.prob,.caso,.ficha{overflow-wrap:break-word}
:lang(de) h1,:lang(de) h2,:lang(de) h3{hyphens:auto}
.rejilla > *,.bloque > *,.contacto > *,.cod > *,.datos > *,.pasos > li,.casos > *,.problemas > *{min-width:0}

/* web publicada: aviso si el envio falla y campo trampa para robots (invisible para las personas) */
.formulario .form-error{margin:.9rem 0 0;padding:.75rem 1rem;border-radius:10px;background:#fdeaea;color:var(--rojo-hondo);
  font-size:.9375rem}
.formulario .form-error a{color:inherit;font-weight:600;text-decoration:underline}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}