/* ---------------------------------------------------------------------
   La tipografía va servida desde nuestro propio dominio, no desde Google
   Fonts. Motivos, por orden: cargar la fuente desde Google manda la IP de
   quien visita la web a un servidor de Estados Unidos sin que lo haya
   consentido —hay sentencias europeas al respecto y obligaría a pedir
   consentimiento—; y además eran dos conexiones nuevas y una hoja de
   estilos que bloquea el pintado antes de que se vea una sola letra. Con
   esto la web no habla con nadie de fuera.

   Es DM Sans variable (ejes de tamaño óptico y de grosor), con licencia
   SIL Open Font License 1.1: la licencia va al lado, en el mismo
   directorio, que es lo que pide. font-display:swap para que el texto se
   lea desde el primer momento con la tipografía del sistema.
   --------------------------------------------------------------------- */
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:100 1000;
  font-display:swap;
  src:url(../fonts/dm-sans-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:'DM Sans';
  font-style:normal;
  font-weight:100 1000;
  font-display:swap;
  src:url(../fonts/dm-sans-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;
}

/* =====================================================================
   Küina — hoja de estilos común, v2

   Cambios respecto a la v1:
   · contenedor real y único (.marco), con el mismo ancho y el mismo
     margen lateral en todas las páginas
   · barra superior alineada: logo a la izquierda, menú al centro y
     botón pegado a la derecha, también en móvil
   · escala de espacios: las secciones respiran y no se tocan entre sí
   · escala tipográfica fija, en vez de un clamp distinto por sitio
   ===================================================================== */

:root{
  /* color */
  --negro:#0A0A0A;
  --negro2:#141413;
  --blanco:#F6F5F3;
  --papel:#FFFFFF;
  --hueso:#ECE5E0;
  --tinta:#1A1A1A;
  --gris:#6B6862;
  /* 4,56:1 sobre blanco. Antes era #9D9993, que se quedaba en 2,83:1 y
     no llegaba al mínimo legible: lo llevaban los textos de apoyo, la
     letra chica y las etiquetas de las fichas de la guía. */
  --gris2:#7A756F;
  /* El mismo gris claro de antes, pero sólo para fondos oscuros, donde
     sí contrasta de sobra (6,99:1 sobre el negro). */
  --gris-sobre-oscuro:#9D9993;
  --dorado:#C4623B;          /* naranja de marca (antes dorado) */
  --acento-oscuro:#A94F2C;   /* el mismo, más oscuro, para texto pequeño
                                sobre fondo claro: el naranja puro se queda
                                justo de contraste a tamaños pequeños */
  --linea-clara:#E6E2DB;
  --linea-oscura:rgba(246,245,243,.13);
  --alerta:#C25B3C;

  /* espacios */
  --e1:8px;
  --e2:16px;
  --e3:24px;
  --e4:36px;
  --e5:56px;
  --e6:clamp(64px,8vw,104px);   /* aire dentro de una sección */
  --e7:clamp(80px,11vw,152px);  /* alto de una sección */

  /* medidas */
  /* 1320 y no 1180: en una pantalla de 1900 la página se quedaba en una
     columna estrecha con medio monitor en blanco. No alarga el texto,
     que está limitado por caracteres (p 64ch, entradilla 52ch): lo que
     gana son las rejillas de fotos, las tablas y las fichas. */
  --ancho:1320px;
  --lateral:clamp(22px,5vw,56px);
  --barra:78px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--papel);
  color:var(--tinta);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-optical-sizing:auto;
  font-weight:300;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip, NO hidden. 'hidden' convierte el body en contenedor de scroll y
     entonces la barra position:sticky deja de pegarse al viewport: Chrome
     se queda con el bloque anterior pintado encima del contenido y tapa el
     principio de los artículos. 'clip' recorta igual pero no crea scroll.
     Aun así esto es una red de seguridad: la auditoría comprueba a seis
     anchos que no haya desborde horizontal de verdad. */
  overflow-x:clip;
}

img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--dorado);outline-offset:3px;border-radius:2px}

/* ---------------- tipografía ---------------- */
h1,h2,h3,h4{font-weight:300;letter-spacing:-.032em;line-height:1.06}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem)}
h2{font-size:clamp(1.95rem,4.2vw,3.05rem);line-height:1.1}
h3{font-size:1.32rem;font-weight:400;letter-spacing:-.02em;line-height:1.25}

p{max-width:64ch}

/* filete corto que abre un bloque */
.filete{width:44px;height:2px;background:var(--dorado);margin-bottom:var(--e3)}

.entradilla{
  margin-top:var(--e3);
  max-width:52ch;
  font-size:clamp(1.05rem,2.1vw,1.22rem);
  line-height:1.62;
}
.oscuro .entradilla{color:rgba(246,245,243,.72)}
.claro .entradilla,.hueso .entradilla{color:var(--gris)}

.sub{
  margin-top:var(--e2);
  font-size:clamp(1.3rem,3.2vw,2rem);
  font-weight:300;letter-spacing:-.03em;line-height:1.15;
}
.oscuro .sub{color:rgba(246,245,243,.5)}
.claro .sub,.hueso .sub{color:var(--gris2)}

/* ---------------- contenedor ---------------- */
.marco{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--lateral);
}
.estrecho{max-width:840px}

/* ---------------- bloques ---------------- */
.claro{background:var(--papel);color:var(--tinta)}
.hueso{background:var(--hueso);color:var(--tinta)}
.oscuro{background:var(--negro);color:var(--blanco)}

.seccion{padding-block:var(--e7)}
.seccion-corta{padding-block:var(--e6)}

/* rejilla de dos columnas, con el mismo aire en todas las páginas */
.doble{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,84px);
  align-items:center;
}
.doble.arriba{align-items:start}

/* ---------------- barra ---------------- */
/* 'body > header' y NO 'header' a secas. Los 92 artículos de la guía
   llevan su propio <header class="pieza-cab"> con el título, y con la
   regla sin acotar también se quedaban pegados arriba, translúcidos y
   con blur: el bloque del título se quedaba clavado encima del texto y
   tapaba el principio del artículo. Es el mismo error que ya pasó con
   'nav' a secas y el índice de los artículos. */
body > header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea-clara);
}
header.pieza-cab{position:static;background:none;backdrop-filter:none;z-index:auto}

.barra{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.6vw,26px);
  min-height:var(--barra);
}
/* La barra ocupa todo el ancho de la pantalla, pero el logo cae EXACTAMENTE
   sobre la misma línea vertical que el h1, los títulos y los párrafos de
   abajo. Es una cuenta, no un número a ojo: el margen lateral de la barra
   es el aire que le sobra a la columna de texto más el lateral de siempre.
   Si la pantalla es más estrecha que la columna, el max() se queda con el
   lateral y la barra se comporta como siempre.
   Antes la barra era un .marco normal y se paraba en el ancho del texto:
   el botón de cita y los idiomas quedaban flotando en medio de la pantalla
   con un palmo de blanco a su derecha mientras la foto iba de borde a
   borde. */
header > .barra{
  max-width:none;
  padding-inline:max(var(--lateral), calc((100% - var(--ancho))/2 + var(--lateral)));
}
.barra > a:first-child{display:flex;align-items:center;flex:0 0 auto}
.klogo{height:23px;width:auto}

/* Sólo el menú de la barra. Antes era 'nav' a secas y alcanzaba a
   cualquier otro <nav> de la página: el índice de los artículos de la
   guía se quedaba invisible por debajo de 1060px. */
/* Negro y a tamaño de lectura. Estaba en gris a .93rem y, aunque el gris
   pasaba contraste, se leía como texto desactivado: parecía que no
   quisiéramos que se viera. Es el menú de una web comercial. */
/* Sin min-width:0 A PROPÓSITO. Con él, el menú se dejaba encoger por
   debajo de lo que miden sus textos —que no parten, llevan nowrap— y los
   rótulos se salían por fuera y acababan debajo del botón de cita. Pasaba
   en francés a cualquier ancho y en inglés en casi todos, y no lo veía
   nadie porque no generaba barra de scroll. Ahora el menú ocupa lo que
   mide: si un día no cabe, la página desborda y la auditoría lo canta. */
.barra nav{display:flex;gap:clamp(16px,1.9vw,32px);font-size:1.06rem;align-items:center;flex:0 0 auto}
.barra nav a{color:var(--tinta)}
.barra nav a:hover{color:var(--acento-oscuro)}
.barra nav a[aria-current="page"]{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:8px;
  text-decoration-color:var(--dorado);
}
/* El logo crece un punto en pantallas grandes. Sólo el de la barra: el
   del pie es más pequeño a propósito. */
.barra .klogo{height:clamp(23px,1.2vw,26px)}
nav a{
  text-decoration:none;color:var(--gris);
  padding-block:6px;transition:color .2s ease;white-space:nowrap;
}
nav a:hover,nav a[aria-current="page"]{color:var(--tinta)}

/* el botón siempre pegado al borde derecho, haya menú o no */
.barra .btn{margin-left:auto;white-space:nowrap;line-height:1}


/* ---------------- selector de idioma ---------------- */
.idiomas.idiomas-menu{display:none}
/* El selector de idioma medía 115x26 px en gris claro, pegado a la esquina
   de arriba a la derecha, y no lo encontraba nadie: parecía decoración, no
   un control. Ahora va dentro de un marco, el idioma activo en negro de
   marca y los otros en tinta, no en gris. Ocupa poco más y se ve. */
.idiomas{
  display:flex;align-items:center;gap:0;
  margin-left:clamp(8px,1vw,12px);flex:0 0 auto;
  border:1px solid var(--linea-clara);border-radius:3px;overflow:hidden;
}
.idiomas a{
  text-decoration:none;color:var(--tinta);
  font-size:.82rem;font-weight:500;letter-spacing:.04em;
  padding:8px 10px;line-height:1;
  transition:color .2s ease,background-color .2s ease;
}
.idiomas a + a{border-left:1px solid var(--linea-clara)}
.idiomas a:hover{background:rgba(26,26,26,.07)}
.idiomas a[aria-current="true"]{background:var(--negro);color:var(--blanco)}
.idiomas a[aria-current="true"]:hover{background:var(--negro)}

/* ---------------- botones ---------------- */
.btn{
  font-family:inherit;font-size:.95rem;font-weight:500;line-height:1;
  padding:14px 26px;border:1px solid var(--dorado);border-radius:2px;
  background:var(--dorado);color:#FFFFFF;
  cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  /* Nada de nowrap: en inglés hay etiquetas de tres palabras que en un
     móvil de 320 se salen de la pantalla y arrastran la página entera. */
  white-space:normal;text-align:center;max-width:100%;
  line-height:1.25;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{background:transparent;color:var(--dorado)}
.claro .btn:hover,.hueso .btn:hover{color:var(--acento-oscuro);border-color:var(--acento-oscuro)}
.btn:disabled{opacity:.45;cursor:default}

.btn.fino{background:transparent;color:inherit;border-color:currentColor;opacity:.75}
.btn.fino:hover{opacity:1;border-color:var(--dorado);color:var(--dorado)}

.acciones{margin-top:var(--e4);display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------------- etiquetas de confianza ---------------- */
.chips{margin-top:var(--e4);display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--linea-oscura);border-radius:100px;
  padding:9px 18px;font-size:.92rem;color:rgba(246,245,243,.8);
}
.claro .chip,.hueso .chip{border-color:var(--linea-clara);color:var(--gris)}
.chip.dorado{background:var(--dorado);border-color:var(--dorado);color:#FFFFFF;font-weight:500}

/* ---------------- tarjeta ---------------- */
.tarjeta{
  background:var(--negro2);border:1px solid var(--linea-oscura);
  border-radius:3px;padding:clamp(26px,3.4vw,40px);
}
.claro .tarjeta,.hueso .tarjeta{background:var(--papel);border-color:var(--linea-clara)}
/* una tarjeta marcada como clara manda sobre el bloque que la contiene */
.oscuro .tarjeta.claro,.tarjeta.claro{
  background:var(--papel);color:var(--tinta);border-color:var(--linea-clara);
}
.tarjeta.claro p,.tarjeta.claro li{color:var(--gris)}
.tarjeta.claro .num,.tarjeta.claro h3{color:var(--tinta)}
.tarjeta h3{margin-bottom:var(--e2)}
.tarjeta p{font-size:1rem;color:rgba(246,245,243,.66)}
.claro .tarjeta p,.hueso .tarjeta p{color:var(--gris)}

/* ---------------- huecos de imagen ---------------- */
.hueco{position:relative;background:#EFEDE9;overflow:hidden;border-radius:3px}
.hueco::after{
  content:attr(data-nota);
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:.82rem;color:#A9A29A;
  background:repeating-linear-gradient(45deg,#EFEDE9 0 14px,#E7E3DC 14px 28px);
}
.oscuro .hueco{background:var(--negro2)}
.oscuro .hueco::after{
  color:rgba(246,245,243,.3);
  background:repeating-linear-gradient(45deg,#121211 0 16px,#171716 16px 32px);
}
.hueco img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}

/* ---------------- listas ---------------- */
.lista{display:grid;gap:12px;list-style:none;margin-top:var(--e3)}
.lista li{padding-left:28px;position:relative;max-width:52ch}
.lista li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:9px;height:9px;
  border-left:1.4px solid var(--dorado);border-bottom:1.4px solid var(--dorado);
  transform:rotate(-45deg) translateY(-2px);
}
.lista.fuera li{color:var(--gris)}
.lista.fuera li::before{
  border:0;background:var(--gris2);width:10px;height:1.4px;transform:none;top:.78em;
}

/* ---------------- rejilla de puntos ---------------- */
.rejilla{
  margin-top:var(--e6);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(30px,3.6vw,52px);
}
.punto h3{
  font-size:1.06rem;font-weight:500;
  padding-bottom:12px;margin-bottom:14px;
  border-bottom:1px solid var(--dorado);display:inline-block;
}
.punto p{font-size:.97rem;max-width:32ch}
.oscuro .punto p{color:rgba(246,245,243,.64)}
.claro .punto p,.hueso .punto p{color:var(--gris)}

/* ---------------- pasos ---------------- */
/* --e6 y no --e7: el aire entre el texto de entrada y el bloque que
   viene debajo es --e6 en TODA la web. Estos dos llevaban otro y se
   notaba: 150 px aquí contra 104 en la sección de al lado. */
.escalera{margin-top:var(--e6)}
/* La primera fila no suma su propio relleno al aire del bloque. Sin esto
   el hueco DECLARADO era 104 px y el que se VE, 141: el bloque ponía su
   aire y encima la fila ponía el suyo. Pasa en todos los bloques cuya
   primera fila lleva padding, así que se corrige igual en .hechos. */
.escalera > .paso:first-child{padding-top:0;border-top:none}
.hechos > div:first-child{padding-top:0}
.paso{
  display:grid;grid-template-columns:52px 1fr;gap:clamp(16px,2.6vw,34px);
  padding-block:var(--e4);border-top:1px solid var(--linea-clara);align-items:start;
}
.oscuro .paso{border-top-color:var(--linea-oscura)}
.paso:last-child{border-bottom:1px solid var(--linea-clara)}
.oscuro .paso:last-child{border-bottom-color:var(--linea-oscura)}
.paso .n{font-size:1.4rem;color:var(--acento-oscuro);line-height:1.2}
.paso p{margin-top:10px;max-width:58ch}
.claro .paso p,.hueso .paso p{color:var(--gris)}
.oscuro .paso p{color:rgba(246,245,243,.64)}

/* ---------------- formularios ---------------- */
form{display:flex;flex-direction:column;gap:var(--e3)}
.campo{display:flex;flex-direction:column;gap:8px}
label{font-size:.88rem;color:var(--gris)}
.oscuro label{color:var(--gris-sobre-oscuro)}

input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  font-family:inherit;font-size:1rem;font-weight:300;
  background:rgba(26,26,26,.04);
  border:0;border-bottom:1px solid #C7C1B8;
  border-radius:2px 2px 0 0;
  color:var(--tinta);padding:13px 12px;transition:border-color .25s ease,background .25s ease;
  /* Sin esto, un <select> mide lo que mide su opción más larga y
     descuadra la rejilla: cada fila del formulario salía con las dos
     columnas de un ancho distinto. */
  width:100%;max-width:100%;min-width:0;min-height:48px;
}
input:hover,textarea:hover{background:rgba(26,26,26,.06)}
select:hover{background-color:rgba(26,26,26,.06)}
.oscuro input[type=text],.oscuro input[type=tel],.oscuro input[type=email],
.oscuro select,.oscuro textarea{
  border-bottom-color:rgba(246,245,243,.32);
  color:var(--blanco);
  background:rgba(246,245,243,.05);
  padding:13px 12px;border-radius:2px 2px 0 0;
}
.oscuro input:hover,.oscuro textarea:hover{background:rgba(246,245,243,.08)}
.oscuro select:hover{background-color:rgba(246,245,243,.08)}
.oscuro label{color:rgba(246,245,243,.72)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--dorado)}
input::placeholder,textarea::placeholder{color:#B9B4AC}
.oscuro input::placeholder,.oscuro textarea::placeholder{color:rgba(246,245,243,.26)}
/* Con appearance:none el select se queda sin flecha y parece una caja de
   texto. La flecha va de fondo, para que se vea que se despliega. */
select{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6862' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
}
.oscuro select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239D9993' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
}
.oscuro select option{background:var(--negro2);color:var(--blanco)}
textarea{resize:vertical;min-height:66px}
/* minmax(0,1fr) y no 1fr: 1fr no baja del tamaño mínimo del contenido,
   así que un select con una opción larga ensanchaba su columna. */
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e3)}
.campo{min-width:0}

.acepto{display:flex;gap:12px;align-items:flex-start;font-size:.87rem;color:var(--gris);line-height:1.5}
.acepto input{width:17px;height:17px;flex:0 0 auto;margin-top:3px;accent-color:var(--tinta)}
.oscuro .acepto{color:var(--gris-sobre-oscuro)}
.oscuro .acepto input{accent-color:var(--dorado)}

.estado{font-size:.92rem;min-height:1.4em;color:var(--gris)}
.estado.mal{color:var(--alerta)}
.legal{font-size:.79rem;color:var(--gris2);max-width:46ch}

.letra-chica{margin-top:var(--e4);font-size:.79rem;line-height:1.55;color:var(--gris2);max-width:74ch}

/* ---------------- pie ---------------- */
footer{
  background:var(--negro);color:rgba(246,245,243,.5);
  border-top:1px solid var(--linea-oscura);
  padding-block:var(--e6) var(--e5);font-size:.9rem;
}
.pie-malla{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(30px,4vw,64px)}
footer .pie-malla h3{font-size:.88rem;font-weight:500;color:var(--blanco);margin-bottom:var(--e2)}
footer ul{list-style:none;display:grid;gap:10px}
footer a{text-decoration:none;transition:color .2s ease}
footer a:hover{color:var(--blanco)}
footer .klogo{height:21px;margin-bottom:var(--e2)}
footer p{max-width:32ch;line-height:1.6}
.pie-abajo{
  margin-top:var(--e6);padding-top:var(--e3);
  border-top:1px solid var(--linea-oscura);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:.79rem;color:rgba(246,245,243,.32);
}

/* ---------------- móvil ---------------- */
/* 1060 y no 920: con cinco entradas de menú, el botón de cita y el
   selector de idioma, la barra se salía ya en tablet. */
@media (max-width:1060px){
  /* El menú pasa a ser un panel desplegable bajo la barra */
  .barra nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    /* opaco del todo: con alfa se transparentaba la foto de cabecera
       por detrás del menú y se leía fatal */
    background:var(--papel);
    border-bottom:1px solid var(--linea-clara);
    box-shadow:0 18px 40px rgba(10,10,10,.10);
    padding:4px var(--lateral) 22px;
    /* visibility además de opacity: con opacity sola, si el css llega
       tarde el navegador anima el panel al cargar y se queda un fantasma
       blanco encima del principio de la página. Con visibility no puede. */
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .28s ease,
               visibility 0s linear .28s;
    /* El panel no puede medir más que la pantalla. Medía más: en un
       Galaxy S22 (360x772) el menú abierto ocupaba 925px empezando en
       y=64, y el selector de idioma caía en y=916 —144px por debajo del
       borde de abajo—. Y no tenía scroll propio (scrollHeight 924 ===
       clientHeight 924), así que no había forma humana de llegar a él:
       desde un móvil no se podía cambiar de idioma. Con esto el panel
       se queda en lo que hay de pantalla y lo que sobre se desplaza.
       Las dos líneas a propósito: dvh descuenta la barra del navegador,
       vh es el respaldo para quien no la entienda. */
    max-height:calc(100vh - var(--barra));
    max-height:calc(100dvh - var(--barra));
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .barra nav a{
    display:block;text-align:left;
    padding:17px 2px;font-size:1.06rem;color:var(--tinta);
    border-bottom:1px solid var(--linea-clara);
  }
  .barra nav > a:last-of-type{border-bottom:0}

  body.menu-abierto .barra nav{transform:none;opacity:1;visibility:visible;
    pointer-events:auto;transition-delay:0s,0s,0s}


  /* El idioma deja la barra y se va dentro del menú: en un móvil
     manda el botón de cita, y el idioma se cambia una vez.
     Va ARRIBA del todo (order:-1), no al final. Estaba al final, detrás
     de diez entradas de menú, y quien abría el menú en un móvil no lo
     veía: no es un sitio más de la web, es un control, y un control que
     hay que buscar no existe. Arriba se ve al abrir, sin desplazar. */
  .idiomas.idiomas-barra{display:none}
  .idiomas.idiomas-menu{
    display:flex;flex-direction:row;gap:6px;order:-1;
    margin:0 0 4px;padding:8px 0 14px;
    /* sin el marco del selector de escritorio: aquí los recuadros son
       los propios botones, y un marco alrededor de botones separados
       parecía un error de css */
    border:0;border-bottom:1px solid var(--linea-clara);
    border-radius:0;overflow:visible;
  }
  .idiomas.idiomas-menu a{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:52px;padding:0 16px;
    font-size:.9rem;border:1px solid var(--linea-clara);border-radius:3px;
  }

  .doble{grid-template-columns:1fr;gap:var(--e5)}
  .dos{grid-template-columns:1fr}
  .pie-malla{grid-template-columns:1fr;gap:var(--e5)}
}

/* ---------------- tocar con el dedo ----------------
   Por debajo de 760 todo lo que se pulsa tiene 44px de alto como
   mínimo, que es lo que pide una mano, no un ratón. */
@media (max-width:760px){
  /* el logo también se pulsa: 20px de alto no es un destino */
  .barra > a:first-child{min-height:44px;align-items:center}
  .filtro{min-height:44px;padding-block:0;display:inline-flex;align-items:center}
  .barra .btn{min-height:44px}
  .hamburguesa{width:44px;height:44px}
  .franja a{display:inline-flex;align-items:center;min-height:44px}
  /* los enlaces del pie también se tocan con el dedo: 44px */
  .pie-malla ul a{display:inline-flex;align-items:center;min-height:44px}
  .pie-abajo a{display:inline-flex;align-items:center;min-height:44px}
  .pie-abajo{row-gap:0}

  /* la casilla de consentimiento era de 17px: imposible de acertar */
  .acepto{gap:14px;padding-block:6px;font-size:.92rem}
  .acepto input{width:24px;height:24px;flex:0 0 24px;margin-top:1px}

  /* nada de letra por debajo de 13px en una pantalla pequeña */
  .letra-chica{font-size:.86rem;line-height:1.6}
  .pie-abajo{font-size:.84rem}
  .cinta figcaption{font-size:.9rem}
}

@media (max-width:560px){
  /* en móvil los botones sueltos ocupan la línea entera: se tocan mejor
     y se acabaron los textos largos empujando la página */
  .ayuda-rapida{flex-direction:column;align-items:flex-start}
  .ayuda-rapida .btn,.franja .btn{width:100%}

  body{font-size:16px}
  /* --barra tiene que seguir diciendo lo que mide la barra de verdad:
     de ella cuelgan el alto del menú desplegable, el top de la barra de
     progreso y los scroll-margin de los anclajes. Cuando la barra
     encogía y la variable no, todo eso quedaba 8px desencajado. */
  :root{--barra:70px}
  .barra{min-height:70px;gap:12px}
  .klogo{height:20px}
  .barra .btn{padding:11px 16px;font-size:.88rem}
  .acciones .btn{width:100%}
}

/* Pantallas estrechas de verdad (iPhone SE, Android básico).
   Aquí el logo, el botón y la hamburguesa van justos de milímetros. */
/* Por debajo de 420 el botón de la barra se queda en una palabra.
   "Book an appointment" no cabe al lado del logo y la hamburguesa. */
/* El inglés necesita acortar antes: "Book an appointment" es el doble
   de largo que "Pedir cita". Por eso el corte va por idioma. */
html[lang="en"] .barra .btn[data-corto]{--corta:1}
@media (max-width:420px){
  .barra .btn[data-corto]{font-size:0;padding-inline:15px}
  .barra .btn[data-corto]::after{
    content:attr(data-corto);
    font-size:.9rem;font-weight:500;letter-spacing:0;
  }
}
@media (min-width:361px) and (max-width:420px){
  html:not([lang="en"]) .barra .btn[data-corto]{font-size:.88rem;padding-inline:16px}
  html:not([lang="en"]) .barra .btn[data-corto]::after{content:none}
}

@media (max-width:380px){
  :root{--lateral:16px;--barra:64px}
  .barra{gap:8px;min-height:64px}
  .klogo{height:18px}
  .barra .btn{padding:10px 13px;font-size:.84rem;letter-spacing:0}
  .hamburguesa{width:38px;height:38px;margin-left:4px;padding:0 9px}
}

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

/* =====================================================================
   MÓDULOS DE PÁGINA
   Cada bloque de abajo pertenece a una página concreta.
   ===================================================================== */

/* ---------------- portada (inicio) ---------------- */
.portada{padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,80px)}
.portada .doble{gap:clamp(40px,6vw,96px);align-items:start}
.portada h1{max-width:13ch}
.portada .sub{max-width:20ch}
.escena{margin-top:var(--e6);aspect-ratio:21/9}
.pantalla{aspect-ratio:4/3}

.resumen-oferta{position:sticky;top:calc(var(--barra) + 24px)}
.resumen-oferta .marca{font-size:.82rem;color:var(--gris)}
.resumen-oferta .num{margin-top:10px;font-size:clamp(2.8rem,6vw,3.8rem);font-weight:300;letter-spacing:-.045em;line-height:1;color:var(--tinta)}
.resumen-oferta .num small{font-size:.32em;color:var(--gris);margin-left:6px}
.resumen-oferta .mes{margin-top:10px;font-size:.95rem;color:var(--gris)}
.resumen-oferta .lista li{font-size:.95rem;color:var(--gris);max-width:none}
.resumen-oferta .btn{margin-top:var(--e4);width:100%}

.cifra{margin-top:var(--e4);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cifra .num{font-size:clamp(3.6rem,10vw,6rem);font-weight:300;letter-spacing:-.05em;line-height:.9}
.cifra .eur{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--gris)}
.cifra .mes{font-size:1rem;color:var(--gris)}
.iva{margin-top:14px;font-size:.94rem;color:var(--gris)}

.muestras{margin-top:var(--e6);display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--e3)}
.muestra{border:1px solid var(--linea-clara);border-radius:3px;overflow:hidden}
.muestra .hueco,.muestra img{aspect-ratio:3/4;border-radius:0;width:100%;object-fit:cover}
.muestra .pie{padding:18px 20px 22px}
.muestra .precio{font-size:1.6rem;font-weight:300;letter-spacing:-.035em;line-height:1}
.muestra .donde{margin-top:6px;font-size:.9rem;color:var(--gris)}

.ciudades{margin-top:var(--e6);display:flex;flex-wrap:wrap;gap:10px}
/* Estos chips estaban pintados en blanco sobre un fondo que dejó de ser
   oscuro hace tiempo: se leían casi en blanco sobre hueso. Ahora siguen
   al fondo de la sección, como el resto de componentes. */
.ciudad{
  border:1px solid var(--linea-clara);border-radius:100px;
  padding:10px 20px;font-size:.96rem;color:var(--tinta);
  display:inline-flex;align-items:center;min-height:44px;
}
.ciudad b{font-weight:400;color:var(--acento-oscuro);font-size:.86em;margin-left:7px}
.oscuro .ciudad{border-color:var(--linea-oscura);color:rgba(246,245,243,.82)}
.oscuro .ciudad b{color:var(--dorado)}

@media (max-width:920px){
  .resumen-oferta{position:static}
  .escena{aspect-ratio:16/10}
}

/* ---------------- cocinas alemanas ---------------- */
.tabla{margin-top:var(--e6);width:100%;border-collapse:collapse;font-size:.97rem}
.tabla th,.tabla td{text-align:left;padding:18px 14px;border-bottom:1px solid var(--linea-clara);vertical-align:top}
.tabla thead th{font-weight:500;font-size:.85rem;color:var(--gris);border-bottom:1px solid var(--tinta)}
.tabla td:first-child{font-weight:400;width:26%}
.tabla .flojo{color:var(--gris)}

/* Aquí el descuento va en el margen y no quitando el relleno de la
   primera fila, como en .escalera: estas son fichas con borde y fondo, y
   sin su relleno se romperían. Los 45 px son el relleno de arriba de
   .dato, así que el hueco que se VE vuelve a ser el mismo --e6 que en el
   resto de la web. */
.cifras{margin-top:calc(var(--e6) - 45px);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--linea-oscura);border:1px solid var(--linea-oscura)}
.dato{background:var(--negro);padding:30px 26px 32px}
.dato .n{font-size:clamp(1.65rem,3.4vw,2.2rem);font-weight:300;letter-spacing:-.03em;line-height:1.1;min-height:1.1em;white-space:nowrap;color:var(--blanco)}
.dato p{margin-top:14px;font-size:.94rem;color:rgba(246,245,243,.62);max-width:26ch}

/* ---------------- menú desplegable ---------------- */
/* El panel cerrado lleva el atributo hidden y por tanto display:none. No
   se oculta con opacidad ni moviéndolo fuera de la pantalla, que es como
   estaba el anterior: aquel seguía ocupando sitio, se pintaba encima del
   principio de los artículos en Chrome y hubo que quitarlo entero. */
.desp{position:relative;display:inline-flex;align-items:center}
.desp-b{
  font:inherit;font-size:1rem;color:var(--tinta);
  background:none;border:0;padding:6px 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.desp-b::after{
  content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;
}
.desp-b[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}
.desp-b:hover{color:var(--acento-oscuro)}
.desp[data-aqui] .desp-b{
  text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:8px;text-decoration-color:var(--dorado);
}
.desp-p[hidden]{display:none}
.desp-p{
  position:absolute;top:calc(100% + 10px);left:-18px;z-index:70;
  display:flex;flex-direction:column;gap:2px;
  min-width:232px;padding:10px 0;
  background:var(--papel);border:1px solid var(--linea-clara);border-radius:3px;
  box-shadow:0 18px 40px rgba(10,10,10,.1);
}
.desp-p a{
  padding:11px 20px;font-size:.97rem;white-space:nowrap;
  display:flex;align-items:center;min-height:44px;
}
.desp-p a:hover{background:var(--hueso);color:var(--acento-oscuro)}

@media (max-width:1060px){
  /* En el panel de móvil no hay desplegables dentro de desplegables: los
     hijos se ven siempre, sangrados bajo su categoría. */
  .desp{display:block;width:100%}
  .desp-b{width:100%;justify-content:space-between;padding:14px 0;font-size:1.06rem}
  .desp-b::after{display:none}
  .desp-p,.desp-p[hidden]{
    display:flex;position:static;border:0;box-shadow:none;background:none;
    padding:0 0 10px;min-width:0;
  }
  .desp-p a{padding:9px 0 9px 18px;min-height:40px;border-left:1px solid var(--linea-clara)}
  .desp-p a:hover{background:none}
}

/* ---------------- rejillas de producto ---------------- */
.catalogo{margin-top:var(--e6);display:flex;flex-direction:column;gap:var(--e6)}
.catalogo .fam h3{
  font-size:1.18rem;font-weight:400;letter-spacing:-.01em;
  padding-bottom:12px;border-bottom:1px solid var(--linea-clara);
  display:flex;align-items:baseline;gap:10px;
}
.catalogo .fam h3 span{font-size:.86rem;color:var(--gris2)}
.catalogo figure{margin:0}
.catalogo img{width:100%;height:auto;display:block;background:var(--papel)}
.catalogo figcaption{margin-top:10px;font-size:.88rem;line-height:1.45}
.catalogo figcaption b{display:block;font-weight:400;color:var(--tinta)}
.catalogo figcaption span{display:block;color:var(--gris2);font-size:.82rem;margin-top:2px}

.malla-frentes{
  margin-top:var(--e4);
  /* 150 y no 176: con 176 el móvil se quedaba en UNA columna y eran
     dieciséis puertas a pantalla completa, un scroll eterno. Con 150
     caben dos en el móvil y cuatro en la tableta, que además deja la
     familia entera en una fila. */
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:clamp(18px,2.2vw,34px);
  align-items:start;
}
/* Las fotos de puerta vienen a 807 u 812 px de alto sobre 560 de ancho,
   así que en crudo cada celda medía distinto y los pies quedaban a
   alturas diferentes, en escalera. Caja fija y el pie con sitio para dos
   líneas, que es lo que ocupa "Laminado lacado · con marco". */
.malla-frentes img{aspect-ratio:56/81;object-fit:cover}
.malla-frentes figcaption{min-height:3.4em}
.malla-tiradores{
  margin-top:var(--e4);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:clamp(16px,2vw,28px);
  align-items:start;
}
/* Las fotos del fabricante vienen de ocho medidas distintas: unas apaisadas,
   otras casi cuadradas. Puestas en crudo, cada celda medía una cosa y los
   pies quedaban a alturas distintas, en escalera. Se encajan todas en la
   misma caja 4:3 sin recortar el tirador (contain, no cover) y el pie se
   reserva dos líneas, que es lo que ocupa el acabado más largo. */
.malla-tiradores img{
  background:var(--hueso);
  aspect-ratio:4/3;object-fit:contain;
}
.malla-tiradores figcaption{min-height:2.6em}

/* ---------------- el teléfono ---------------- */
/* En la barra se separa del menú con un filete y va en negro: es una vía
   de contacto, no una sección más. En el pie, discreto pero visible. */
.tel-barra{
  display:inline-flex;align-items:center;min-height:44px;
  margin-left:clamp(10px,1.2vw,18px);
  padding-left:clamp(12px,1.4vw,20px);
  border-left:1px solid var(--linea-clara);
  color:var(--tinta)!important;
  font-variant-numeric:tabular-nums;
}
.tel-barra:hover{color:var(--acento-oscuro)!important}
.pie-tel{margin-top:10px}
/* inline-flex con alto mínimo: un enlace de texto medía 23 px de alto y
   con el dedo no se acierta. 44 px es la medida de toque de toda la web. */
.pie-tel a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--blanco);text-decoration:none;font-size:1.06rem;
  font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(246,245,243,.3);
}
.pie-tel a:hover{border-bottom-color:var(--dorado)}
/* El teléfono es la pieza que cede cuando la barra va justa: el menú no
   se puede acortar y el botón de cita es el que convierte. En castellano
   y catalán sólo estorba por debajo de 1300. En francés y en inglés los
   rótulos son tan largos que no cabe a ningún ancho, así que ahí vive en
   el pie y en el menú de móvil, donde sigue a un toque. */
@media (min-width:1061px) and (max-width:1300px){
  .tel-barra{display:none}
}
@media (min-width:1061px){
  html[lang="en"] .tel-barra,
  html[lang="fr"] .tel-barra{display:none}
}
@media (max-width:1060px){
  /* En el panel de móvil es una fila más, y la primera que se toca. */
  .tel-barra{margin-left:0;padding-left:0;border-left:none;border-top:1px solid var(--linea-clara);padding-top:14px;margin-top:6px}
}

/* ---------------- lista de hechos ---------------- */
/* Lo contrario de .rejilla. Seis tarjetas iguales en fila se leen como un
   catálogo y es justo lo que sobra en una página que quiere convencer:
   esto son seis filas separadas por un filete, el título a la izquierda y
   lo que cuenta a la derecha. Se lee de arriba abajo, como una lista. */
.hechos{border-top:1px solid var(--linea-clara);margin-top:var(--e6)}
.hechos > div{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,8fr);
  gap:clamp(16px,3vw,48px);
  padding-block:var(--e3);
  border-bottom:1px solid var(--linea-clara);
}
.hechos h3{margin:0;font-size:1.14rem;letter-spacing:-.01em}
.hechos p{margin:0;color:var(--gris)}
/* Con foto: la muestra a la izquierda, el título y el texto a la derecha.
   Explicar tres formas de puerta sin enseñarlas no sirve de nada, y las
   fotos de frente están justo para esto. */
.hechos.con-foto > div{grid-template-columns:150px minmax(0,4fr) minmax(0,7fr)}
.hechos.con-foto img{
  width:100%;height:auto;display:block;border-radius:2px;
  background:var(--papel);
}
/* Los frentes son fotos de puerta, verticales. Las muestras de tirador son
   apaisadas y de medidas distintas entre sí, así que se recortan todas a
   4:3 para que las tres filas midan lo mismo y la columna no baile. */
.hechos.con-foto.apaisada > div{grid-template-columns:190px minmax(0,4fr) minmax(0,7fr)}
.hechos.con-foto.apaisada img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:760px){
  .hechos > div{grid-template-columns:1fr;gap:6px}
  .hechos.con-foto > div{grid-template-columns:96px minmax(0,1fr);gap:16px}
  .hechos.con-foto img{grid-row:span 2}
  .hechos.con-foto.apaisada > div{grid-template-columns:116px minmax(0,1fr)}
}

/* ---------------- piezas: fotos de detalle con pie ---------------- */
.piezas{
  margin-top:var(--e6);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(18px,2.4vw,30px);
}
.piezas figure{margin:0}
.piezas img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  display:block;border-radius:2px;background:rgba(246,245,243,.06);
}
.piezas figcaption{
  margin-top:13px;font-size:.92rem;line-height:1.55;
  color:rgba(246,245,243,.62);
}
.claro .piezas figcaption,.hueso .piezas figcaption{color:var(--gris)}
.claro .piezas img,.hueso .piezas img{background:var(--hueso)}

.pregunta{border-bottom:1px solid var(--linea-clara)}
.pregunta summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;font-size:1.14rem;font-weight:400;letter-spacing:-.01em}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:'';position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:1.4px solid var(--dorado);border-bottom:1.4px solid var(--dorado);transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.pregunta[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.pregunta p{padding:0 0 26px;color:var(--gris);max-width:70ch}
.pregunta p + p{margin-top:12px}

.centrado{text-align:center}
.centrado h2,.centrado .entradilla{margin-inline:auto}
.centrado .acciones{justify-content:center}

@media (max-width:760px){
  .tabla th,.tabla td{padding:13px 8px;font-size:.9rem}
  .tabla td:first-child{width:34%}
}

/* ---------------- cocinas instaladas ---------------- */
.feed-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--tinta)}
.filtros{display:flex;gap:8px;flex-wrap:wrap}
.filtro{font-family:inherit;font-size:.9rem;padding:9px 17px;border-radius:100px;cursor:pointer;border:1px solid var(--linea-clara);background:transparent;color:var(--gris);transition:border-color .2s ease,color .2s ease,background .2s ease}
.filtro:hover{border-color:var(--tinta);color:var(--tinta)}
.filtro[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}

.fila{display:grid;grid-template-columns:240px 136px 1fr auto;gap:clamp(20px,3vw,40px);align-items:center;padding-block:var(--e4);border-bottom:1px solid var(--linea-clara)}
.fila .foto{aspect-ratio:4/3;border-radius:2px;overflow:hidden;background:#EFEDE9}
.fila .foto img{width:100%;height:100%;object-fit:cover}
.plano{width:136px;height:auto}
.plano .muro{stroke:#C9C4BB;stroke-width:1.4;fill:none}
.plano .mueble{fill:#1A1A1A}
.plano .isla{fill:#C4623B}
.plano-pie{margin-top:8px;font-size:.8rem;color:var(--gris2);text-align:center}
.sitio{font-size:1.36rem;font-weight:400;letter-spacing:-.02em}
.alcance{display:inline-block;margin-top:10px;font-size:.8rem;padding:4px 12px;border-radius:100px;border:1px solid var(--linea-clara);color:var(--gris)}
.fechas{margin-top:14px;font-size:.92rem;color:var(--gris);display:flex;flex-direction:column;gap:2px}
.acabado{margin-top:10px;font-size:.92rem;color:var(--gris)}
.importe{text-align:right;min-width:176px}
.importe .num{font-size:clamp(1.9rem,4vw,2.5rem);font-weight:300;letter-spacing:-.035em;line-height:1}
.importe .num .eur{font-size:.48em;margin-left:3px;vertical-align:.4em;color:var(--gris)}
.importe .que{margin-top:8px;font-size:.84rem;color:var(--gris)}
.importe .cuota{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea-clara);font-size:.9rem}
.importe .cuota b{font-weight:500}
.mas{margin-top:var(--e5);text-align:center}
.pulso{margin-top:var(--e4);display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--gris2)}
.brasa{width:7px;height:7px;border-radius:50%;background:var(--dorado);animation:latir 2.8s ease-out infinite}
@keyframes latir{0%{box-shadow:0 0 0 0 rgba(196,98,59,.5)}70%{box-shadow:0 0 0 9px rgba(196,98,59,0)}100%{box-shadow:0 0 0 0 rgba(196,98,59,0)}}

@media (max-width:980px){
  .fila{grid-template-columns:200px 1fr;grid-template-areas:'foto datos' 'plano importe';row-gap:20px}
  .fila .foto{grid-area:foto}
  .fila .planoc{grid-area:plano}
  .fila .datos{grid-area:datos}
  .fila .importe{grid-area:importe}
}
@media (max-width:620px){
  .fila{grid-template-columns:1fr 1fr;grid-template-areas:'foto foto' 'datos datos' 'plano importe'}
}

/* ---------------- presupuesto (pasos) ---------------- */
.progreso{position:sticky;top:var(--barra);z-index:50;background:var(--papel);border-bottom:1px solid var(--linea-clara)}
.progreso-int{display:flex;align-items:center;gap:16px;padding-block:15px}
.barra-p{flex:1;height:2px;background:var(--linea-clara);position:relative;overflow:hidden}
.barra-p span{position:absolute;inset:0 auto 0 0;background:var(--dorado);width:0;transition:width .4s cubic-bezier(.4,0,.2,1)}
.progreso-txt{font-size:.86rem;color:var(--gris);white-space:nowrap}

/* El formulario vive en una columna estrecha: una pregunta con cuatro
   opciones no puede ocupar 1.200 px de ancho, se lee fatal. */
.paso-bloque,.mandos,.final,.paso-bloque form,.resumen{max-width:880px}

.paso-bloque{display:none}
.paso-bloque.activo{display:block;animation:entra .35s ease}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.paso-bloque h2{max-width:18ch}
.ayuda{margin-top:var(--e2);color:var(--gris);max-width:52ch}

/* Tres columnas como mucho: con cinco opciones quedan 3 y 2, no 4 y una
   suelta. Y las tarjetas de una misma fila igualan altura. */
.opciones{
  margin-top:var(--e4);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
  gap:12px;align-items:stretch;
}
.opcion{text-align:left;height:100%;font-family:inherit;cursor:pointer;border:1px solid var(--linea-clara);border-radius:3px;background:transparent;padding:20px;transition:border-color .2s ease,background .2s ease}
.opcion:hover{border-color:var(--gris2)}
.opcion b{display:block;font-weight:400;font-size:1.06rem;color:var(--tinta);letter-spacing:-.01em}
.opcion span{display:block;margin-top:7px;font-size:.89rem;color:var(--gris);line-height:1.45}
.opcion[aria-pressed="true"]{border-color:var(--tinta);background:#FAF5F2;box-shadow:inset 0 0 0 1px var(--tinta)}
.opcion .precio-ref{display:block;margin-top:10px;font-size:.84rem;color:var(--acento-oscuro)}
.compacta{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.compacta .opcion{padding:15px 18px;text-align:center;display:grid;align-content:center}
.compacta .opcion b{font-size:.98rem}
/* Aquí hubo un '.grupo' a secas, de una versión del formulario de cita que
   ya no existe: no lo usaba nadie salvo, por accidente, las 336 etiquetas
   <span class="grupo"> de las fichas de la guía, a las que les metía 104px
   de margen y dejaba un claro enorme entre la foto y el título. Si vuelve
   a hacer falta un grupo de opciones, que lleve su propia clase. */

.rango{margin-top:var(--e5);max-width:620px}
.rango .cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.rango .cabeza span{font-size:.92rem;color:var(--gris)}
.rango .cabeza output{font-size:1.4rem;letter-spacing:-.02em;color:var(--tinta)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;margin-top:16px;background:var(--linea-clara);border-radius:2px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--tinta);border:4px solid var(--papel);box-shadow:0 0 0 1px var(--tinta)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--tinta);border:3px solid var(--papel);box-shadow:0 0 0 1px var(--tinta)}

.soltar{margin-top:var(--e3);border:1px dashed var(--linea-clara);border-radius:3px;padding:36px 24px;text-align:center;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.soltar:hover,.soltar.encima{border-color:var(--dorado);background:#FAF5F2}
.soltar p{color:var(--gris);font-size:.95rem;max-width:none}
.soltar .chico{margin-top:7px;font-size:.83rem;color:var(--gris2)}
.adjuntos{margin-top:14px;display:grid;gap:8px;font-size:.89rem;color:var(--gris)}
.adjuntos div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--linea-clara);padding-bottom:8px}
.adjuntos button{background:none;border:0;color:var(--alerta);cursor:pointer;font-family:inherit;font-size:.86rem}

.resumen{margin-top:var(--e5);border:1px solid var(--linea-clara);border-radius:3px;padding:26px}
.resumen h3{font-size:.86rem;font-weight:500;color:var(--gris);margin-bottom:14px}
.resumen .par{display:flex;justify-content:space-between;gap:16px;font-size:.95rem;padding-block:5px}
.resumen dt{color:var(--gris)}
.resumen dd{text-align:right;max-width:60%}

.mandos{margin-top:var(--e5);padding-top:var(--e3);border-top:1px solid var(--linea-clara);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.atras{background:none;border:0;font-family:inherit;font-size:.95rem;color:var(--gris);cursor:pointer;padding-block:12px}
.atras:hover{color:var(--tinta)}
.derecha{display:flex;gap:14px;align-items:center}
.omitir{background:none;border:0;font-family:inherit;font-size:.92rem;color:var(--gris2);cursor:pointer}
.omitir:hover{color:var(--gris)}

.final{display:none;text-align:center}
.final.activo{display:block}
.linea-tiempo{margin-top:var(--e6);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--linea-clara);border:1px solid var(--linea-clara);text-align:left}
.hito{background:var(--papel);padding:24px}
.hito b{display:block;font-weight:400;color:var(--acento-oscuro);font-size:.9rem}
.hito p{margin-top:8px;font-size:.95rem;color:var(--gris)}

/* ---------------- tiendas ---------------- */
.locales{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--e3)}
.local{border:1px solid var(--linea-clara);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.local .hueco,.local img{aspect-ratio:16/10;border-radius:0;width:100%;object-fit:cover}
.local .cuerpo{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.local .dir{margin-top:12px;font-size:.96rem;color:var(--gris);white-space:pre-line}
.local .hora{margin-top:10px;font-size:.91rem;color:var(--gris2)}
.local .tel{margin-top:10px;font-size:.96rem}
.local .pies{margin-top:auto;padding-top:20px;display:flex;gap:18px;flex-wrap:wrap}
.local .pies a{font-size:.93rem;text-decoration:none;color:var(--tinta);border-bottom:1px solid var(--dorado);padding-bottom:2px}
.local .pies a:hover{color:var(--acento-oscuro)}
.despues{margin-top:var(--e4);display:grid;gap:16px}
.despues .linea{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start}
.despues .n{color:var(--dorado);font-size:.95rem;line-height:1.6}
.despues p{font-size:.96rem;max-width:44ch}
.oscuro .despues p{color:rgba(246,245,243,.66)}
.claro .despues p,.hueso .despues p{color:var(--gris)}
.hecho{padding-block:var(--e4);font-size:1.15rem;max-width:40ch}
.hecho span{display:block;margin-top:12px;font-size:.95rem}
.oscuro .hecho span{color:rgba(246,245,243,.6)}
.claro .hecho span,.hueso .hecho span{color:var(--gris)}

/* =====================================================================
   GALERÍA DE COCINAS  (sustituye al feed antiguo)
   ===================================================================== */

.cuenta{margin-top:var(--e4);font-size:.92rem;color:var(--gris)}

.galeria{
  margin-top:var(--e4);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.obra{
  border:0;padding:0;background:none;font-family:inherit;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;
}
.obra .marcoimg{
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:#EFEDE9;
}
.obra img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.obra:hover img,.obra:focus-visible img{transform:scale(1.04)}
.obra .cuantas{
  position:absolute;right:10px;bottom:10px;
  background:rgba(10,10,10,.72);color:var(--blanco);
  font-size:.78rem;padding:4px 10px;border-radius:100px;backdrop-filter:blur(4px);
}
.obra .sitio{margin-top:12px;font-size:1.04rem;font-weight:400;letter-spacing:-.015em;color:var(--tinta)}
.obra .clase{margin-top:3px;font-size:.86rem;color:var(--gris)}

.sin-nada{padding:var(--e6) 0;color:var(--gris);text-align:center}

/* ---------------- visor ---------------- */
.visor{
  position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.97);
  display:none;flex-direction:column;
}
.visor.abierto{display:flex}
body.bloqueado{overflow:hidden}

.visor-barra{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px clamp(16px,3vw,32px);border-bottom:1px solid var(--linea-oscura);
}
.visor-barra .titulo{font-size:1.05rem;color:var(--blanco);letter-spacing:-.01em}
.visor-barra .clase{font-size:.85rem;color:var(--gris-sobre-oscuro);margin-top:2px}
.cerrar{
  background:none;border:1px solid var(--linea-oscura);color:var(--blanco);
  width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1;
  display:grid;place-items:center;transition:border-color .2s ease,color .2s ease;flex:0 0 auto;
}
.cerrar:hover{border-color:var(--dorado);color:var(--dorado)}

.visor-cuerpo{
  flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,24px);
  padding:clamp(12px,2.4vw,28px);min-height:0;position:relative;
}
.visor-cuerpo img{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:2px;
  animation:aparecefoto .35s ease;
}
@keyframes aparecefoto{from{opacity:0}to{opacity:1}}

.paso-foto{
  background:rgba(246,245,243,.06);border:1px solid var(--linea-oscura);color:var(--blanco);
  width:52px;height:52px;border-radius:50%;cursor:pointer;flex:0 0 auto;
  display:grid;place-items:center;transition:background .2s ease,border-color .2s ease;
}
.paso-foto:hover:not(:disabled){background:rgba(196,98,59,.2);border-color:var(--dorado)}
.paso-foto:disabled{opacity:.25;cursor:default}
.paso-foto svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}

.visor-pie{
  border-top:1px solid var(--linea-oscura);
  padding:16px clamp(16px,3vw,32px) calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.contador{font-size:.9rem;color:var(--gris-sobre-oscuro);font-variant-numeric:tabular-nums}
.visor-pie .acciones{margin:0}
.visor-pie .btn{padding:12px 22px;font-size:.92rem}

.tiras{display:flex;gap:8px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
.tiras::-webkit-scrollbar{display:none}
.tira{
  width:54px;height:54px;flex:0 0 auto;border:0;padding:0;cursor:pointer;border-radius:2px;
  overflow:hidden;opacity:.45;transition:opacity .2s ease,box-shadow .2s ease;background:none;
}
.tira img{width:100%;height:100%;object-fit:cover}
.tira[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px var(--dorado)}

@media (max-width:760px){
  .visor-cuerpo{padding:10px}
  .paso-foto{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px}
  .paso-foto.izq{left:8px}
  .paso-foto.der{right:8px}
  .visor-pie{flex-direction:column;align-items:stretch;gap:12px}
  .visor-pie .acciones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .visor-pie .btn{width:100%;text-align:center}
  .tiras{display:none}
}

/* "No lo sé" y "Sin decidir" son salidas, no una opción más: se ven
   como tales y ocupan toda la fila si se quedan solas. */
.opcion.suave{border-style:dashed;grid-column:1/-1}
.opcion.suave b{color:var(--gris)}
.opcion.suave[aria-pressed="true"]{border-style:solid}
.opcion.suave[aria-pressed="true"] b{color:var(--tinta)}

/* =====================================================================
   FEED EDITORIAL DE COCINAS
   Tarjeta grande: foto a un lado, texto al otro, alternando.
   ===================================================================== */
.tira-obra{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,60px);align-items:center;
  padding-block:clamp(36px,4vw,60px);
  border-bottom:1px solid var(--linea-clara);
}
.tira-obra:nth-child(even) .foto-grande{order:2}
.tira-obra:first-child{padding-top:0}

.foto-grande{
  position:relative;border:0;padding:0;background:#EFEDE9;cursor:pointer;
  border-radius:3px;overflow:hidden;width:100%;
  aspect-ratio:4/5;max-height:540px;
}
.foto-grande img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.foto-grande:hover img,.foto-grande:focus-visible img{transform:scale(1.03)}
.foto-grande .cuantas{
  position:absolute;right:12px;bottom:12px;
  background:rgba(10,10,10,.72);color:var(--blanco);
  font-size:.8rem;padding:5px 12px;border-radius:100px;backdrop-filter:blur(4px);
}

.texto-obra .donde{
  font-size:.86rem;color:var(--acento-oscuro);letter-spacing:.04em;margin-bottom:12px;
}
.texto-obra h3{font-size:clamp(1.45rem,2.8vw,2.05rem);font-weight:300;letter-spacing:-.03em;line-height:1.14}
.texto-obra p{margin-top:var(--e2);color:var(--gris);max-width:46ch}
.texto-obra .detalles{
  margin-top:var(--e3);display:grid;gap:8px;list-style:none;font-size:.94rem;color:var(--gris);
}
.texto-obra .detalles li{padding-left:20px;position:relative}
.texto-obra .detalles li::before{
  content:'';position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--dorado);
}
.texto-obra .acciones{margin-top:var(--e4)}
.texto-obra .btn{padding:11px 20px;font-size:.9rem}

@media (max-width:860px){
  .tira-obra{grid-template-columns:1fr;gap:var(--e3);padding-block:var(--e5)}
  .tira-obra:nth-child(even) .foto-grande{order:0}
  .foto-grande{aspect-ratio:4/5;max-height:none}
  .texto-obra .acciones{margin-top:var(--e3)}
  .texto-obra .acciones .btn{width:auto}
}

/* --- resto de cocinas, en rejilla compacta --- */
.mas-cocinas{padding-top:var(--e6)}
.mas-cocinas h2{margin-bottom:var(--e2)}

/* =====================================================================
   OFERTAS
   ===================================================================== */
.packs{
  margin-top:var(--e6);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(18px,2.2vw,26px);
}
.pack{
  border:1px solid var(--linea-clara);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;background:var(--papel);
}
.pack .foto{aspect-ratio:4/3;overflow:hidden;background:#EFEDE9}
.pack .foto img{width:100%;height:100%;object-fit:cover}
.pack .cuerpo{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.pack h3{font-size:1.24rem}
.pack .medida{margin-top:5px;font-size:.9rem;color:var(--gris)}
.pack .precio{
  margin-top:var(--e3);display:flex;align-items:baseline;gap:8px;
  font-size:2.3rem;font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--tinta);
}
.pack .precio .eur{font-size:.44em;color:var(--gris)}
.pack .mes{margin-top:7px;font-size:.88rem;color:var(--gris)}
.pack .lista{margin-top:var(--e3);font-size:.93rem}
.pack .lista li{max-width:none}
.pack .lista.fuera{margin-top:12px}
.pack .btn{margin-top:var(--e4);width:100%}

.aviso-precios{
  margin-top:var(--e4);padding:16px 20px;border-left:2px solid var(--dorado);
  background:#FAF3EF;font-size:.92rem;color:var(--gris);max-width:70ch;
}


/* =====================================================================
   BOTÓN DE MENÚ (móvil)
   ===================================================================== */
.hamburguesa{
  display:none;
  width:44px;height:44px;margin-left:12px;flex:0 0 auto;
  background:none;border:1px solid var(--linea-clara);border-radius:2px;
  cursor:pointer;padding:0 11px;
  /* en columna y estirando: si se usa grid centrado, las rayas se
     quedan con ancho cero */
  flex-direction:column;justify-content:center;align-items:stretch;gap:5px;
  transition:border-color .2s ease;
}
.hamburguesa:hover{border-color:var(--dorado)}
.hamburguesa span{
  display:block;height:1.5px;width:100%;background:var(--tinta);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s ease;
}
body.menu-abierto .hamburguesa span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-abierto .hamburguesa span:nth-child(2){opacity:0}
body.menu-abierto .hamburguesa span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* El botón solo existe en móvil. Esta regla va al final del fichero a
   propósito: si se escribe antes, la regla base display:none la pisa. */
@media (max-width:1060px){
  .hamburguesa{display:flex}
}

@media (max-width:560px){
  .hamburguesa{margin-left:8px;padding:0 10px;gap:4.5px}
}

/* =====================================================================
   FRANJA DISCRETA
   Una línea de texto con enlace, para decir algo sin montar una sección.
   ===================================================================== */
.franja{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);flex-wrap:wrap;
  padding-block:var(--e4);
  border-top:1px solid var(--linea-clara);
  border-bottom:1px solid var(--linea-clara);
}
.oscuro .franja{border-color:var(--linea-oscura)}
.franja p{font-size:1rem;max-width:62ch;margin:0}
.claro .franja p,.hueso .franja p{color:var(--gris)}
.oscuro .franja p{color:rgba(246,245,243,.66)}
.franja p b{font-weight:400;color:var(--tinta)}
.oscuro .franja p b{color:var(--blanco)}
.franja a{
  font-size:.94rem;text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--dorado);padding-bottom:2px;
}
.franja a:hover{color:var(--acento-oscuro)}
.oscuro .franja a:hover{color:var(--dorado)}

/* =====================================================================
   PÁGINA DE CITA
   El formulario va primero; lo demás, debajo.
   ===================================================================== */
.pedir>*{min-width:0}
.pedir{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(34px,5vw,76px);align-items:start;
}
.caja-cita{
  background:var(--papel);border:1px solid var(--linea-clara);border-radius:3px;
  padding:clamp(22px,3.4vw,40px);
  min-width:0;
}
.caja-cita h2{font-size:clamp(1.5rem,3vw,1.95rem)}
.caja-cita .ayuda{margin-top:10px;margin-bottom:var(--e4)}
.caja-cita .btn{width:100%;margin-top:6px}

.lado .chips{margin-top:0}
.lado h3{margin-top:var(--e5)}
.lado h3:first-child{margin-top:0}
.lado ul{list-style:none;display:grid;gap:10px;margin-top:var(--e2)}
.lado li{font-size:.97rem;color:var(--gris);padding-left:20px;position:relative}
.lado li::before{content:'';position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--dorado)}

.reloj{margin-top:var(--e2);display:grid;gap:0}
.reloj .tramo{
  display:grid;grid-template-columns:86px 1fr;gap:var(--e3);
  padding-block:16px;border-bottom:1px solid var(--linea-clara);align-items:start;
}
.reloj .tramo:first-child{border-top:1px solid var(--linea-clara)}
.reloj .hora{font-size:.88rem;color:var(--acento-oscuro);white-space:nowrap}
.reloj p{font-size:.97rem;color:var(--gris);margin:0}
.reloj b{font-weight:400;color:var(--tinta);display:block;margin-bottom:3px}

@media (max-width:920px){
  .pedir{grid-template-columns:1fr;gap:var(--e5)}
  .reloj .tramo{grid-template-columns:1fr;gap:4px}
}

/* =====================================================================
   ESTILO EDITORIAL
   Fondo claro, fotografía a sangre y mucho aire. Los bloques oscuros
   pasan a ser la excepción, no la norma.
   ===================================================================== */

/* --- a sangre: se sale del contenedor hasta los bordes de la pantalla --- */
.sangre{width:100vw;margin-left:calc(50% - 50vw)}

/* --- portada --- */
.cubierta{position:relative;min-height:min(84vh,780px);display:flex;align-items:flex-end;overflow:hidden;background:#EFEDE9}
.cubierta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Dos capas, porque la foto de cabecera cambia en cada visita y hay
   cocinas muy claras: sin esto el titular se pierde sobre una ventana. */
.cubierta::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(10,10,10,.80) 0%,rgba(10,10,10,.42) 34%,rgba(10,10,10,.06) 70%),
    linear-gradient(to right,rgba(10,10,10,.42) 0%,rgba(10,10,10,.10) 46%,rgba(10,10,10,0) 72%);
}
.cubierta .texto{text-shadow:0 1px 26px rgba(10,10,10,.34)}
.cubierta .texto{position:relative;z-index:2;width:100%;padding-block:clamp(40px,6vw,80px);color:#FFF}
.cubierta h1{color:#FFF;max-width:14ch;font-size:clamp(2.6rem,7vw,5.2rem)}
.cubierta .sub{color:rgba(255,255,255,.82);max-width:34ch;margin-top:var(--e3);font-size:clamp(1.1rem,2.4vw,1.5rem)}
.cubierta .acciones{margin-top:var(--e4)}
.cubierta .btn.fino{color:#FFF;border-color:rgba(255,255,255,.55);opacity:1}
.cubierta .btn.fino:hover{background:#FFF;color:var(--tinta);border-color:#FFF}

/* --- tres argumentos en fila --- */
.tres{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(28px,4vw,60px);
}
.tres h3{font-size:1.18rem;font-weight:400;letter-spacing:-.02em}
.tres p{margin-top:10px;font-size:.98rem;color:var(--gris);max-width:34ch}
.tres .num{font-size:.82rem;color:var(--acento-oscuro);display:block;margin-bottom:12px}

/* --- tarjetas grandes de sección --- */
.puertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,1.6vw,20px)}
.puerta{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:3px;background:#EFEDE9}
.puerta .marcoimg{aspect-ratio:3/4;overflow:hidden}
.puerta img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.puerta:hover img{transform:scale(1.045)}
.puerta::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.6),rgba(10,10,10,0) 55%)}
.puerta .pie{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px;color:#FFF}
.puerta h3{color:#FFF;font-size:1.5rem;font-weight:300;letter-spacing:-.025em}
.puerta span{display:block;margin-top:7px;font-size:.92rem;color:rgba(255,255,255,.8)}
/* La misma tarjeta, apaisada: para las seis formas de cocina de /cocinas/,
   donde seis fichas en vertical dejaban la página larguísima. */
.puertas.anchas{grid-template-columns:repeat(auto-fit,minmax(296px,1fr))}
.puertas.anchas .puerta .marcoimg{aspect-ratio:4/3}
.puertas.anchas .puerta h3{font-size:1.28rem}
.puertas.anchas .puerta .pie{padding:22px}
/* Las fotos de cocina alemana son casi todas claras: con el degradado
   suave de las tarjetas verticales, el título se perdía. */
.puertas.anchas .puerta::after{background:linear-gradient(to top,rgba(10,10,10,.74),rgba(10,10,10,.06) 64%)}

/* --- cinta de inspiración, desplazable --- */
.cinta{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--lateral);scrollbar-width:none}
.cinta::-webkit-scrollbar{display:none}
.cinta figure{flex:0 0 clamp(230px,30vw,360px);scroll-snap-align:start;margin:0}
.cinta img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;background:#EFEDE9}
.cinta figcaption{margin-top:10px;font-size:.88rem;color:var(--gris)}

/* --- bloque de texto y foto, a sangre por un lado --- */
.mitades{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0}
.mitades .lienzo{aspect-ratio:4/3;overflow:hidden;background:#EFEDE9}
.mitades .lienzo img{width:100%;height:100%;object-fit:cover}
.mitades .palabras{padding:clamp(32px,5vw,80px)}
.mitades .palabras h2{max-width:16ch}
.mitades.invertida .lienzo{order:2}

@media (max-width:860px){
  .mitades{grid-template-columns:1fr}
  .mitades.invertida .lienzo{order:0}
  .mitades .palabras{padding:var(--e5) var(--lateral)}
}

/* --- franja de ayuda --- */
.ayuda-rapida{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);flex-wrap:wrap;
  padding:clamp(28px,4vw,44px);border:1px solid var(--linea-clara);border-radius:3px;
}
.ayuda-rapida h3{font-size:1.3rem}
.ayuda-rapida p{margin-top:8px;color:var(--gris);max-width:46ch}


/* Cabecera de página interior: entra directa, sin tanto aire debajo */
main > .claro:first-child .seccion{padding-bottom:var(--e5)}
main > .claro:first-child + .claro .seccion{padding-top:var(--e5)}

/* El 404 sigue siendo oscuro: su barra necesita el logo blanco */
body.oscura header{background:rgba(10,10,10,.9);border-bottom-color:var(--linea-oscura)}
body.oscura nav a{color:rgba(246,245,243,.68)}
body.oscura .hamburguesa span{background:var(--blanco)}

/* --- portada corta de página interior --- */
.cubierta.corta{min-height:min(58vh,520px)}
.cubierta.corta h1{font-size:clamp(2.2rem,5.6vw,3.9rem);max-width:17ch}
.cubierta.corta .sub{font-size:clamp(1rem,2.1vw,1.26rem);max-width:52ch;color:rgba(255,255,255,.85)}
.cubierta .chips{margin-top:var(--e4)}
.cubierta .chip{border-color:rgba(255,255,255,.42);color:rgba(255,255,255,.92)}
.cubierta .chip.dorado{border-color:var(--dorado);color:#FFF}
.cubierta .acciones .btn.fino{color:#FFF}
.cubierta .pulso{color:rgba(255,255,255,.75)}

/* --- fotos dentro de los bloques a dos columnas --- */
.retrato{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;background:#EFEDE9}

/* La tabla comparativa no cabe en tres columnas en un móvil:
   se apila por filas y cada fila se lee como una ficha. */
@media (max-width:620px){
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:auto}
  .tabla{font-size:1rem}
  .tabla thead{display:none}
  .tabla tr{border-bottom:1px solid var(--linea-clara);padding:20px 0}
  .tabla tr:last-child{border-bottom:0}
  .tabla td{border:0;padding:0}
  .tabla td:first-child{
    width:auto;font-size:1.06rem;letter-spacing:-.01em;
    color:var(--tinta);margin-bottom:12px;
  }
  .tabla td:nth-child(2),.tabla td:nth-child(3){
    position:relative;padding-left:26px;margin-top:8px;line-height:1.55;
  }
  .tabla td:nth-child(2)::before,
  .tabla td:nth-child(3)::before{
    position:absolute;left:0;top:0;font-size:.95rem;
  }
  .tabla td:nth-child(2)::before{content:'✓';color:var(--dorado)}
  .tabla td:nth-child(3)::before{content:'—';color:var(--gris)}
}

/* =====================================================================
   LA GUÍA
   Texto largo para leer, no para ojear. Medida de línea corta, cuerpo
   un punto mayor que el resto del sitio y aire entre apartados. Todo
   dentro de .pieza para no tocar nada de las páginas comerciales.
   ===================================================================== */

/* ---------------- migas de pan (también en las tiendas) ---------------- */
.migas{
  font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gris2);margin-bottom:var(--e3);max-width:none;
}
.migas a{
  text-decoration:none;color:var(--gris);
  display:inline-block;padding-block:15px;margin-block:-15px;
}
.migas a:hover{color:var(--acento-oscuro)}
.cubierta .migas{color:rgba(255,255,255,.78)}
.cubierta .migas a{color:rgba(255,255,255,.9)}

/* ---------------- cabecera del artículo ---------------- */
.pieza-cab{
  padding-block:clamp(44px,7vw,92px) clamp(28px,4vw,44px);
  border-bottom:1px solid var(--linea-clara);
  margin-bottom:clamp(36px,5vw,64px);
}
.pieza-cab h1{font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.08;max-width:22ch}
/* La entradilla también se acota. Sin medida se iba a líneas de más de
   cien caracteres, que a tamaño de display se leen fatal. 52ch es la
   misma medida que la portada de la guía. */
.pieza-cab .sub{max-width:52ch}
.pieza-firma{
  margin-top:var(--e3);font-size:.88rem;color:var(--gris2);
  letter-spacing:.01em;max-width:none;
}

/* ---------------- la portada de la guía ---------------- */
/* La guía no vende nada: contesta. Va en negro para que se note al
   entrar que has cambiado de sitio, y el índice de temas está porque la
   página mide seis pantallas. */
.cab-guia{
  background:var(--negro);color:var(--blanco);
  padding-block:clamp(52px,7.5vw,104px) clamp(40px,5vw,72px);
  margin-bottom:clamp(44px,6vw,80px);
}
.cab-guia .dieresis{
  display:block;width:37px;height:11px;fill:var(--dorado);
  margin-bottom:clamp(22px,3vw,34px);
}
.cab-guia h1{
  font-size:clamp(2.2rem,5.2vw,3.6rem);line-height:1.04;
  letter-spacing:-.022em;max-width:16ch;margin:0;
}
.cab-guia .sub{
  margin-top:clamp(16px,2vw,22px);
  font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.6;
  color:var(--gris-sobre-oscuro);max-width:52ch;
}
/* Los temas: el nombre en blanco y cuántas respuestas tiene al lado, en
   gris. Sin viñetas y sin puntos de separación: cada uno es un destino. */
.temas-guia{
  list-style:none;margin:clamp(34px,4.5vw,56px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px clamp(20px,3vw,44px);
  border-top:1px solid var(--linea-oscura);padding-top:clamp(22px,2.6vw,30px);
}
.temas-guia a{
  display:inline-flex;align-items:baseline;gap:8px;min-height:44px;
  color:var(--blanco);font-size:1rem;letter-spacing:-.005em;
  text-decoration:none;
  box-shadow:inset 0 -1px 0 0 transparent;
  transition:color .18s ease, box-shadow .18s ease;
}
.temas-guia a span{
  color:var(--gris-sobre-oscuro);font-size:.84rem;
  font-variant-numeric:tabular-nums;
}
.temas-guia a:hover{color:var(--dorado);box-shadow:inset 0 -1px 0 0 var(--dorado)}
.temas-guia a:hover span{color:var(--dorado)}

/* El salto desde el índice deja el título debajo de la barra fija. */
.grupo-guia{scroll-margin-top:calc(var(--barra) + 24px)}

@media (max-width:620px){
  .temas-guia{gap:2px clamp(20px,3vw,44px)}
  .cab-guia .sub{max-width:none}
}

/* ---------------- la respuesta corta ---------------- */
/* Lo primero que lee una persona y lo primero que lee una IA. Va
   destacado a propósito: si alguien sólo lee esto, ya tiene su
   respuesta. */
.respuesta{
  background:var(--hueso);
  padding:clamp(24px,3.4vw,36px);
  border-left:3px solid var(--dorado);
  margin-bottom:clamp(36px,5vw,56px);
}
.respuesta p{
  font-size:clamp(1.08rem,2.1vw,1.26rem);line-height:1.58;
  max-width:60ch;margin:0;
}
.respuesta strong{font-weight:500}

.etiqueta{
  font-size:.74rem!important;font-weight:500!important;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);margin-bottom:var(--e2);line-height:1.4!important;
}

/* ---------------- índice de la página ---------------- */
.indice{margin-bottom:clamp(40px,5vw,64px)}
.indice ol{list-style:none;counter-reset:ind}
.indice li{counter-increment:ind}
.indice a{
  display:flex;gap:14px;align-items:baseline;min-width:0;
  text-decoration:none;padding-block:9px;
  border-bottom:1px solid var(--linea-clara);
  font-size:1rem;color:var(--tinta);
  transition:color .2s ease;
}
.indice a::before{
  content:counter(ind,decimal-leading-zero);
  font-size:.76rem;color:var(--gris2);flex:0 0 auto;letter-spacing:.06em;
}
.indice a:hover{color:var(--acento-oscuro)}

/* ---------------- el cuerpo ---------------- */
.prosa{font-size:1.06rem;line-height:1.72}
.prosa h2{
  font-size:clamp(1.45rem,2.9vw,1.95rem);line-height:1.18;
  margin-top:clamp(44px,5.5vw,76px);margin-bottom:var(--e3);
  max-width:28ch;scroll-margin-top:calc(var(--barra) + 20px);
}
.prosa h2:first-child{margin-top:0}
.prosa p{max-width:66ch;margin-bottom:var(--e3)}
.prosa p:last-child{margin-bottom:0}
.prosa strong{font-weight:500}
.prosa a{color:var(--acento-oscuro);text-decoration:underline;text-underline-offset:3px}

.prosa .puntos,.prosa .pasos{
  margin:0 0 var(--e3);padding-left:0;list-style:none;
  display:grid;gap:var(--e2);max-width:66ch;
}
.prosa .puntos li{position:relative;padding-left:26px}
.prosa .puntos li::before{
  content:"";position:absolute;left:4px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--dorado);
}
.prosa .pasos{counter-reset:paso}
.prosa .pasos li{position:relative;padding-left:38px;counter-increment:paso}
.prosa .pasos li::before{
  content:counter(paso);position:absolute;left:0;top:.08em;
  width:26px;height:26px;border-radius:50%;
  background:var(--hueso);color:var(--tinta);
  font-size:.82rem;display:flex;align-items:center;justify-content:center;
}

/* una cifra que quiere verse sola */
.cifra-suelta{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--e3)}
.cifra-suelta strong{font-size:clamp(2rem,5vw,2.8rem);font-weight:300;letter-spacing:-.03em;line-height:1}
.cifra-suelta span{font-size:.95rem;color:var(--gris)}

/* aviso o matiz */
.nota{
  border:1px solid var(--linea-clara);
  padding:clamp(18px,2.4vw,26px);
  margin-bottom:var(--e3);
  background:#FBFAF8;
}
.nota p{font-size:.97rem;color:var(--gris);margin:0;max-width:62ch}

/* ---------------- tablas de datos ---------------- */
.tabla-marco{margin:0 0 var(--e4);overflow-x:auto;-webkit-overflow-scrolling:touch}
table.datos{width:100%;border-collapse:collapse;font-size:.98rem;min-width:460px}
table.datos caption{
  caption-side:bottom;text-align:left;padding-top:var(--e2);
  font-size:.85rem;color:var(--gris2);line-height:1.5;
}
table.datos th,table.datos td{
  text-align:left;vertical-align:top;
  padding:13px 16px 13px 0;
  border-bottom:1px solid var(--linea-clara);
}
table.datos thead th{
  font-weight:500;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);border-bottom:1px solid var(--tinta);
}
table.datos tbody th{font-weight:400;color:var(--tinta)}
table.datos tbody tr:last-child th,table.datos tbody tr:last-child td{border-bottom:0}

/* ---------------- preguntas ---------------- */
.faq-pieza{margin-top:clamp(52px,6.5vw,88px);padding-top:clamp(36px,4.5vw,56px);border-top:1px solid var(--linea-clara)}
.faq-pieza h2{font-size:clamp(1.45rem,2.9vw,1.95rem);margin-bottom:var(--e3)}
.faq-pieza details{border-bottom:1px solid var(--linea-clara)}
.faq-pieza summary{
  cursor:pointer;list-style:none;
  padding:17px 34px 17px 0;position:relative;
  font-size:1.04rem;line-height:1.45;
}
.faq-pieza summary::-webkit-details-marker{display:none}
.faq-pieza summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:1.5px solid var(--gris);border-bottom:1.5px solid var(--gris);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq-pieza details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq-pieza details>div{padding:0 0 var(--e3)}
.faq-pieza details p{font-size:1rem;color:var(--gris);max-width:64ch;line-height:1.68}

/* ---------------- cierre y enlaces ---------------- */
.cta-pieza{
  margin-top:clamp(52px,6.5vw,88px);
  background:var(--negro);color:var(--blanco);
  padding:clamp(32px,4.5vw,56px);
}
.cta-pieza h2{font-size:clamp(1.5rem,3.2vw,2.2rem);margin-bottom:var(--e2);max-width:26ch}
.cta-pieza p{color:rgba(246,245,243,.66);max-width:58ch}
.cta-pieza .acciones{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e4)}
.cta-pieza .btn.fino{color:var(--blanco);border-color:var(--linea-oscura)}
.cta-pieza .btn.fino:hover{border-color:var(--blanco)}

.tambien{margin-top:clamp(52px,6.5vw,88px)}
.tambien h2{font-size:clamp(1.3rem,2.4vw,1.65rem);margin-bottom:var(--e3)}
.volver{margin-top:var(--e4);font-size:.95rem}
.volver a{color:var(--acento-oscuro);text-decoration:underline;text-underline-offset:3px}

.lista-piezas{list-style:none;display:grid;gap:1px;background:var(--linea-clara)}
.lista-piezas a{
  display:block;text-decoration:none;background:var(--papel);
  padding:var(--e3) var(--e3) var(--e3) 0;
  transition:background-color .2s ease;
}
.lista-piezas a:hover{background:#FBFAF8}
.lista-piezas .grupo{
  display:block;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris2);margin:0 0 7px;
}
.lista-piezas .tit{font-size:1.1rem;line-height:1.35;display:block;max-width:40ch}

/* ---------------- índice de la guía ---------------- */
.grupo-guia{margin-bottom:clamp(48px,6vw,84px)}
.grupo-guia>h2{
  font-size:clamp(1.25rem,2.2vw,1.5rem);
  padding-bottom:var(--e2);margin-bottom:var(--e3);
  border-bottom:1px solid var(--tinta);
}
.lista-piezas.malla{
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  background:transparent;gap:1px;
}
.lista-piezas.malla li{background:var(--linea-clara)}
.lista-piezas.malla a{
  height:100%;display:flex;flex-direction:column;gap:var(--e2);
  padding:var(--e3);
}
.lista-piezas.malla h3{font-size:1.22rem;line-height:1.25;max-width:26ch}
.lista-piezas.malla p{font-size:.97rem;color:var(--gris);margin:0;flex:1}
.lista-piezas.malla .leer{
  font-size:.84rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--acento-oscuro);
}

.franja-cita{
  background:var(--hueso);
  padding-block:clamp(48px,6.5vw,88px);
  margin-top:clamp(24px,3vw,40px);
}
.franja-cita h2{font-size:clamp(1.6rem,3.4vw,2.4rem);max-width:26ch}
.franja-cita p{margin-top:var(--e3);color:var(--gris);max-width:58ch}
.franja-cita .acciones{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e4)}

@media (max-width:760px){
  .prosa{font-size:1.02rem}
  .indice a{padding-block:13px}
  .faq-pieza summary{padding-block:15px;min-height:44px;display:flex;align-items:center}
  .lista-piezas a{padding:var(--e3) 0}
  .lista-piezas.malla a{padding:var(--e3)}
  .cta-pieza .acciones .btn,.franja-cita .acciones .btn{width:100%}
}

@media (max-width:620px){
  /* Una tabla de tres columnas no se lee en un móvil. Se deja
     desplazarse en horizontal, con sombra que avisa de que hay más. */
  .tabla-marco{
    margin-inline:calc(var(--lateral) * -1);
    padding-inline:var(--lateral);
  }
  table.datos{font-size:.93rem;min-width:420px}
  table.datos th,table.datos td{padding:11px 13px 11px 0}
}

/* ---------------- tira de la guía al final de las páginas comerciales ------ */
.guia-rel{
  padding-block:clamp(48px,6.5vw,88px);
  border-top:1px solid var(--linea-clara);
}
.guia-rel h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.guia-rel .rel-sub{margin-top:var(--e2);color:var(--gris);max-width:56ch}
.guia-rel .lista-piezas{margin-top:var(--e4)}
.lista-piezas.tres{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.oscuro .guia-rel{border-color:var(--linea-oscura)}
.entrada-grupo{margin:calc(var(--e2) * -1) 0 var(--e4);color:var(--gris);max-width:64ch;font-size:1.02rem}

/* Aviso de que una tabla tiene más a la derecha: dos sombras pegadas al
   contenido que sólo se ven cuando hay algo fuera de la vista. */
.tabla-marco{
  background:
    linear-gradient(to right, var(--papel) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--papel) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(10,10,10,.14), rgba(10,10,10,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(10,10,10,.14), rgba(10,10,10,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%, 36px 100%, 13px 100%, 13px 100%;
  background-attachment:local, local, scroll, scroll;
}

/* ---------------- fichas de la guía con foto ---------------- */
/* Sin imagen, una tira de tres enlaces sobre fondo blanco se lee como un
   hueco. Con la foto del acabado, cada artículo tiene cara. */
.lista-piezas .marcoimg{
  display:block;overflow:hidden;background:var(--hueso);
  aspect-ratio:4/3;
}
.lista-piezas .marcoimg img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.lista-piezas a:hover .marcoimg img{transform:scale(1.04)}
/* El enlace es una columna: foto arriba, texto debajo pegado a la foto.
   Sin esto el <a> se estira al alto de la fila más alta y deja un claro
   enorme entre la imagen y el título. */
.lista-piezas .cuerpo{
  display:flex;flex-direction:column;gap:10px;
  padding:var(--e3) 0 0;flex:1;
}
.lista-piezas.malla a{padding:0 0 var(--e3);gap:0}
.lista-piezas.malla .cuerpo{padding-inline:var(--e3)}
.lista-piezas.malla .marcoimg{aspect-ratio:3/2}
.lista-piezas.malla p{margin:0}
.tambien .lista-piezas .cuerpo{padding-block:var(--e3) 0}

@media (max-width:760px){
  .lista-piezas.malla a{padding-bottom:var(--e3)}
  .lista-piezas .marcoimg{aspect-ratio:16/9}
}

/* ---------------- comprobador de la guía ---------------- */
.calc{
  border:1px solid var(--linea-clara);
  background:#FBFAF8;
  padding:clamp(22px,3vw,32px);
  margin-bottom:var(--e4);
}
.calc h3{font-size:1.2rem;margin-bottom:8px}
.calc .calc-p{font-size:.97rem;color:var(--gris);margin-bottom:var(--e3);max-width:52ch}
.calc-campos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e2);margin-bottom:var(--e3)}
.calc-campos label{display:flex;flex-direction:column;gap:7px;font-size:.86rem;color:var(--gris)}
.calc-campos input{background:var(--papel)}
.calc .btn{width:100%}
.calc-salida{margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--linea-clara)}
.calc-titulo{font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:var(--e2)}
.calc.calc-aviso .calc-titulo{color:var(--alerta);letter-spacing:0;text-transform:none;font-size:.97rem}
.calc-lista{list-style:none;display:grid;gap:0}
.calc-lista li{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 14px;
  padding:11px 0;border-bottom:1px solid var(--linea-clara);
}
.calc-lista li:last-child{border-bottom:0}
.calc-lista .nom{font-size:1rem}
.calc-lista .des{grid-column:1;font-size:.86rem;color:var(--gris2)}
.calc-lista .vd{
  grid-row:1/3;grid-column:2;align-self:center;
  font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;white-space:nowrap;
}
.calc-lista li[data-estado="si"] .vd{background:rgba(93,128,78,.13);color:#4A6B3C}
.calc-lista li[data-estado="no"] .vd{background:rgba(26,26,26,.05);color:var(--gris2)}
.calc-lista li[data-estado="no"] .nom{color:var(--gris2)}
.calc-nota{margin-top:var(--e3);font-size:.85rem;color:var(--gris2);max-width:60ch}

@media (max-width:620px){
  .calc-campos{grid-template-columns:1fr}
}
.calc-campos.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.calc-check{margin:0 0 var(--e3);font-size:.92rem;align-items:center}
.calc-check input{width:22px;height:22px;flex:0 0 22px;min-height:0}
.calc-cifra{display:flex;align-items:baseline;gap:8px;margin:0 0 6px}
.calc-cifra strong{font-size:clamp(2.2rem,6vw,3rem);font-weight:300;letter-spacing:-.03em;line-height:1}
.calc-cifra span{font-size:1rem;color:var(--gris)}
.calc-sub{font-size:.9rem;color:var(--gris);margin-bottom:var(--e3)}
.calc-avisos{list-style:none;display:grid;gap:10px;margin:0}
.calc-avisos li{
  position:relative;padding-left:22px;font-size:.92rem;color:var(--gris);line-height:1.6;
}
.calc-avisos li::before{
  content:"";position:absolute;left:4px;top:.66em;
  width:6px;height:6px;border-radius:50%;background:var(--dorado);
}
@media (max-width:620px){ .calc-campos.tres{grid-template-columns:1fr} }

/* --- páginas legales ---
   (OJO con los nombres: .legal ya es la letra chica y .dato ya es la
   tarjeta negra de las cifras. De ahí .pagina-legal y .identidad.)------------------------------------------------
   Aviso legal, privacidad y cookies son documentos, no páginas de venta:
   mucho texto seguido y nadie los lee de arriba abajo, se busca un dato
   concreto. Por eso el h2 va pequeño y con un filete encima, que separa
   los apartados de un vistazo, y los párrafos llevan aire entre ellos. Los
   datos de identificación de la empresa van en bloque aparte, con una
   línea al margen: son seis líneas que se consultan, no que se leen. */
.pagina-legal h2{font-size:1.3rem;font-weight:500;letter-spacing:-.012em;line-height:1.3;
  margin-top:var(--e5);margin-bottom:var(--e2);padding-top:var(--e3);
  border-top:1px solid var(--linea-clara)}
.pagina-legal h2:first-of-type{margin-top:var(--e4)}
.pagina-legal p:not(.entradilla){max-width:66ch;margin:0 0 .9em;line-height:1.62}
.pagina-legal p.identidad{margin:0;line-height:1.85;padding-left:var(--e2);
  border-left:2px solid var(--dorado);max-width:72ch}
.pagina-legal p.identidad + :not(.identidad){margin-top:var(--e3)}

/* --- tabla que se apila en móvil -------------------------------------
   Sólo las que lleven la clase "apilable", que son las que traen el
   nombre de la columna en data-label de cada celda. Las tablas de la
   guía NO la llevan y siguen desplazándose a lo ancho: si se apilaran
   sin etiqueta, las celdas se quedarían sin decir de qué son.
   Cinco columnas en 390 px dan celdas de cuatro palabras de ancho. */
@media (max-width:640px){
  .tabla-marco table.datos.apilable{min-width:0;display:block}
  .tabla-marco table.datos.apilable thead{display:none}
  .tabla-marco table.datos.apilable tbody,
  .tabla-marco table.datos.apilable tr,
  .tabla-marco table.datos.apilable th,
  .tabla-marco table.datos.apilable td{display:block;width:auto}
  .tabla-marco table.datos.apilable tr{border-bottom:1px solid var(--linea-clara);padding-block:var(--e3)}
  .tabla-marco table.datos.apilable tr:last-child{border-bottom:0}
  .tabla-marco table.datos.apilable tbody th{font-size:1.15rem;font-weight:500;border:0;padding:0 0 10px}
  .tabla-marco table.datos.apilable td{border:0;padding:0 0 10px}
  .tabla-marco table.datos.apilable td:last-child{padding-bottom:0}
  .tabla-marco table.datos.apilable td::before{content:attr(data-label);display:block;
    color:var(--gris2);font-size:.78rem;letter-spacing:.03em;margin-bottom:2px}
  /* Con la tabla apilada el caption deja de ir debajo y se cuela arriba en
     una columna de dos palabras de ancho. Se esconde de la vista pero no
     del lector de pantalla, que sí lo necesita para saber qué tabla es;
     quien ve la pantalla ya tiene el h2 justo encima diciendo lo mismo. */
  .tabla-marco table.datos.apilable caption{position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}

/* El título de un "punto" puede ser un enlace (la encimera, desde la
   página de precio). Con a{color:inherit} no se distinguía de los que no
   lo son, así que lleva subrayado fino y se marca al pasar por encima. */
.punto h3 a{text-decoration:underline;text-decoration-color:var(--linea-clara);
  text-underline-offset:4px;transition:text-decoration-color .2s ease,color .2s ease}
.punto h3 a:hover{color:var(--acento-oscuro);text-decoration-color:currentColor}