/*
 * Sistema de diseño de la web nueva de The Seduction (diseño «Master», sept. 2026; fila 34 de la hoja).
 * Una sola hoja para todas las pantallas de templates/web/. Primero los tokens (lo único que se cambia para
 * cambiar el aspecto de toda la web), después la base y los componentes. Muestra viva: /es/_sistema.
 * Medidas tomadas de 01_HOME_DEFINITIVA_APROBADA.png (1672 px de ancho) y del resto de pantallas aprobadas.
 * Sin librerías. Guía para quien añade pantallas: docs/WEB-NUEVA.md.
 */

/* ---------- Fuentes (todas alojadas en public/web/fuentes, licencia SIL OFL: LICENCIAS.txt) ---------- */

/* Titulares: Bodoni Moda, la Didot libre más fiel (didona de alto contraste, con eje de tamaño óptico).
   El Master usa Didot, que es de pago. Bodoni Moda no trae cirílico: el ruso usa Playfair Display, otra didona. */
@font-face{font-family:"TS Didot";font-style:normal;font-display:swap;font-weight:400 900;src:url(fuentes/bodoni-moda-latin-opsz-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"TS Didot";font-style:normal;font-display:swap;font-weight:400 900;src:url(fuentes/bodoni-moda-latin-ext-opsz-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"TS Didot";font-style:italic;font-display:swap;font-weight:400 900;src:url(fuentes/bodoni-moda-latin-opsz-italic.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"TS Didot";font-style:italic;font-display:swap;font-weight:400 900;src:url(fuentes/bodoni-moda-latin-ext-opsz-italic.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"TS Didot";font-style:normal;font-display:swap;font-weight:400 900;src:url(fuentes/playfair-display-cyrillic-wght-normal.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"TS Didot";font-style:italic;font-display:swap;font-weight:400 900;src:url(fuentes/playfair-display-cyrillic-wght-italic.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* Texto, menú y botones: Jost, geométrica como la del Master (y una de las dos que pidió probar el cliente). */
@font-face{font-family:"Jost";font-style:normal;font-display:swap;font-weight:100 900;src:url(fuentes/jost-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-display:swap;font-weight:100 900;src:url(fuentes/jost-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Jost";font-style:normal;font-display:swap;font-weight:100 900;src:url(fuentes/jost-cyrillic-wght-normal.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* Manrope: la alternativa preparada (ver --fuente-texto). Declarada aquí, no se descarga mientras nadie la use. */
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(fuentes/manrope-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(fuentes/manrope-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(fuentes/manrope-cyrillic-wght-normal.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ---------- Tokens ---------- */
:root{--vw:1vw;
  /* Tipografía: cambiar la web entera de fuente es cambiar estas dos líneas.
     Alternativa «Manrope & Jost» que pidió probar el cliente (wordpress-last-changes, 1-oct), sin Didot:
       --fuente-titulares:"Jost","Futura","Helvetica Neue",Arial,sans-serif;
       --fuente-texto:"Manrope","Helvetica Neue",Arial,sans-serif;
     (y, si los titulares van en Jost, --peso-titulares:500 y --mayusculas-titulares:uppercase quedan bien tal cual). */
  --fuente-titulares:"TS Didot","Didot","Bodoni 72","Bodoni MT",Georgia,serif;
  --fuente-texto:"Jost","Futura","Helvetica Neue",Arial,sans-serif;
  --peso-titulares:500;
  /* Tamaño óptico de Bodoni Moda: alto (96) deja los trazos finos casi invisibles en pantalla; 18 se parece más a la Didot del Master. */
  --opsz-titulares:18;

  /* Color. Negro y oro sobre fotografía; el crema es el de las pantallas claras (Santa Anna, The Project). */
  --negro:#000;
  --fondo:#050505;
  --superficie:#0e0e0e;
  --superficie-2:#171615;
  --blanco:#fff;
  --texto:#f4f1ec;
  --texto-suave:#c8c2b8;            /* 10:1 sobre --fondo */
  --linea:rgba(255,255,255,.32);
  --linea-suave:rgba(255,255,255,.14);
  --oro:#f2b452;                    /* 11:1 sobre negro: vale para texto pequeño */
  --oro-claro:#f9c873;
  --oro-oscuro:#e9a437;
  --oro-degradado:linear-gradient(180deg,var(--oro-claro) 0%,var(--oro) 52%,var(--oro-oscuro) 100%);
  --tinta-sobre-oro:#120d05;        /* 11:1 sobre --oro */
  --crema:#f3efe8;
  --tinta:#15120e;
  --oro-sobre-claro:#7c5a17;        /* el oro para texto sobre crema: 5,6:1 */
  --foco:#ffd27a;

  /* Escala tipográfica (fluida entre 390 y 1920 de ancho). */
  --t-2xs:.6875rem;   /* 11 */
  --t-xs:.75rem;      /* 12 */
  --t-s:.875rem;      /* 14 */
  --t-m:1rem;         /* 16 */
  --t-l:clamp(1rem,.95rem + .25vw,1.1875rem);
  --t-h5:clamp(1.0625rem,1rem + .3vw,1.3125rem);
  --t-h4:clamp(1.25rem,1.1rem + .6vw,1.75rem);
  --t-h3:clamp(1.6rem,1.3rem + 1.3vw,2.6rem);
  --t-h2:clamp(2.1rem,1.5rem + 2.6vw,4.2rem);
  --t-h1:clamp(2.35rem,1.2rem + 4.1vw,6.1rem);
  --interlineado:1.5;
  --interlineado-titulares:.92;
  --espaciado-rotulos:.16em;

  /* Espacios (múltiplos de 4 px) */
  --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-5:1.5rem; --e-6:2rem; --e-7:3rem; --e-8:4rem; --e-9:6rem; --e-10:8rem;
  --margen:clamp(1rem,3.95vw,4.25rem);       /* margen lateral de la página: 66 px a 1672 en el Master */
  --ancho-maximo:1680px;
  --seccion:clamp(3.5rem,2rem + 6vw,8rem);  /* separación vertical entre secciones */

  /* Formas: el Master es de esquinas rectas */
  --radio:0;
  --radio-s:2px;
  --borde:1px solid var(--linea);
  --sombra:0 12px 32px rgba(0,0,0,.45);
  --sombra-oro:0 8px 22px rgba(242,180,82,.22);
  --transicion:.25s ease;

  /* Cabecera */
  --alto-cabecera:clamp(4.5rem,3.4rem + 2.2vw,6.6rem);
}
/* En ruso los titulares van en Playfair Display (Bodoni Moda no trae cirílico), con trazos bajos más largos: con .92 la Д y la Й tocaban la línea de al lado. */
html:lang(ru){--interlineado-titulares:1.02}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body.web{font-variation-settings:"opsz" var(--opsz-titulares);margin:0;background:var(--fondo);color:var(--texto);font:400 var(--t-m)/var(--interlineado) var(--fuente-texto);-webkit-font-smoothing:antialiased;overflow-x:clip}
.web img,.web video{max-width:100%;height:auto;display:block}
:where(.web) a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
.web :focus-visible{outline:2px solid var(--foco);outline-offset:3px}
/* Con :where para que cualquier clase de componente (.pie__titulo...) pueda cambiarlo */
:where(.web) :where(h1,h2,h3,h4,h5){margin:0;font-family:var(--fuente-titulares);font-weight:var(--peso-titulares);font-variation-settings:"opsz" var(--opsz-titulares);line-height:var(--interlineado-titulares);letter-spacing:0}
:where(.web) p{margin:0 0 var(--e-4)}
:where(.web) p:last-child{margin-bottom:0}
.solo-lectores{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:var(--e-4);top:-10rem;z-index:100;padding:var(--e-3) var(--e-4);background:var(--oro);color:var(--tinta-sobre-oro);font-weight:600}
.saltar:focus{top:var(--e-4)}
.contenedor{width:100%;max-width:var(--ancho-maximo);margin-inline:auto;padding-inline:var(--margen)}
.seccion{padding-block:var(--seccion)}
.seccion--superficie{background:var(--superficie)}
/* Pantallas claras (crema), como 02.1B o 02.1C */
.seccion--clara{background:var(--crema);color:var(--tinta)}
.seccion--clara .antetitulo,.seccion--clara .acento{color:var(--oro-sobre-claro);-webkit-text-fill-color:currentColor;background:none}
.seccion--clara .boton--contorno{background:transparent;color:var(--tinta);border-color:var(--oro-sobre-claro)}
.seccion--clara .muestra__titulo,.seccion--clara .muestra__nota{color:var(--oro-sobre-claro)}

/* ---------- Rótulo superior (antetítulo) y titulares ---------- */
.antetitulo{display:block;margin:0 0 var(--e-3);font:400 clamp(.95rem,.8rem + .5vw,1.4rem)/1.2 var(--fuente-titulares);letter-spacing:var(--espaciado-rotulos);text-transform:uppercase;color:var(--oro)}
.antetitulo--texto{font:500 var(--t-xs)/1.4 var(--fuente-texto);letter-spacing:.22em}
/* Una palabra más larga que la pantalla (EXTRAORDINARIOS en un móvil pequeño) se parte en vez de salirse. */
.titular{text-transform:uppercase;color:var(--blanco);overflow-wrap:break-word;hyphens:auto}
.titular--1{font-size:var(--t-h1)}
.titular--2{font-size:var(--t-h2)}
.titular--3{font-size:var(--t-h3);line-height:1.05}
.titular--4{font-size:var(--t-h4);line-height:1.1}
.titular--normal{text-transform:none}
.seccion--clara .titular{color:var(--tinta)}
/* La palabra en oro de los titulares (EXCEPTIONAL en la portada) */
.acento{background:var(--oro-degradado);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--oro)}
.subtitulo{font:400 var(--t-h4)/1.25 var(--fuente-titulares);text-transform:uppercase;letter-spacing:.04em}
/* Línea de servicios con su raya de oro: «LUXURY ARCHITECTURE · INTERIOR DESIGN · ...» */
.lema-linea{display:flex;align-items:center;gap:var(--e-4);margin:0;font:400 var(--t-xs)/1.5 var(--fuente-texto);letter-spacing:.14em;text-transform:uppercase}
.lema-linea::before{content:"";flex:0 0 clamp(3rem,5.3vw,5.5rem);height:3px;background:var(--oro-degradado)}
.texto-grande{font-size:var(--t-l);line-height:1.45}
.cita{margin:0;font:italic 400 var(--t-h5)/1.35 var(--fuente-titulares);letter-spacing:.02em}
.cita p{margin:0}
.cita footer{margin-top:var(--e-2);display:flex;align-items:center;justify-content:flex-end;gap:var(--e-4);font:400 var(--t-xs)/1 var(--fuente-texto);letter-spacing:.24em;text-transform:uppercase;font-style:normal}
.cita footer::before{content:"";width:2.6rem;height:1px;background:var(--oro)}

/* ---------- Botones ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-4);min-height:3rem;padding:var(--e-3) var(--e-6);border:1px solid transparent;border-radius:var(--radio);font:500 var(--t-s)/1.1 var(--fuente-texto);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background var(--transicion),color var(--transicion),border-color var(--transicion),box-shadow var(--transicion),transform var(--transicion)}
.boton svg{flex:none;width:1.4em;height:1.4em}
.boton--oro{background:var(--oro-degradado);color:var(--tinta-sobre-oro);box-shadow:var(--sombra-oro)}
.boton--oro:hover{filter:brightness(1.06);transform:translateY(-1px)}
.boton--contorno{background:rgba(0,0,0,.25);color:var(--blanco);border-color:var(--oro)}
.boton--contorno:hover{background:rgba(242,180,82,.12)}
.boton--contorno svg{color:var(--oro)}
.boton--texto{min-height:0;padding:0;color:var(--oro);letter-spacing:.14em}
.boton--texto:hover{text-decoration:underline}
.boton--grande{min-height:clamp(3.5rem,3rem + 1.2vw,4.6rem);padding-inline:clamp(1.25rem,.8rem + 1.3vw,2.4rem);font-size:clamp(.95rem,.85rem + .3vw,1.125rem)}
/* Botón con círculo de «play» y dos líneas (PLAY FILM / DISCOVER OUR UNIVERSE) */
.boton--doble{justify-content:flex-start;text-align:left}
.boton--doble .boton__icono{display:grid;place-items:center;width:2.6em;height:2.6em;border:2px solid currentColor;border-radius:50%}
.boton--doble .boton__icono svg{width:1em;height:1em;margin-left:.15em}
.boton__lineas{display:flex;flex-direction:column;gap:.3em}
.boton__principal{font-size:1.3em;letter-spacing:.02em}
.showroom-heroe .boton__principal:only-child{font-size:1em;letter-spacing:inherit}   /* D-PRIN-125: el vídeo del Showroom, sin segunda línea, va como los botones de al lado (acotado: la muestra de sistema.html.twig no cambia) */
.boton__secundaria{font-size:max(10px,.62em);letter-spacing:.12em;font-weight:500}   /* D-PRIN-099: suelo de 10 px (1889.; «Descubre The Seduction» a 390 salía a 9,42 px) */
.botones{display:flex;flex-wrap:wrap;gap:var(--e-4)}

/* ---------- Cabecera ---------- */
.cabecera{position:relative;z-index:40;background:var(--negro)}
.cabecera--sobre{position:absolute;inset:auto 0 auto;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.6) 55%,rgba(0,0,0,0))}   /* 23-oct (W11, puente 5510): el menú de 12 px sobre foto clara daba p99 3,0-4,4; solo la franja de la cabecera */
/* DECIDIDO 5518 (R2 de W1: menú p99 3,95-4,45 en Santa Anna y Albufera con .72→.6): refuerzo de la franja SOLO en esas dos fichas, sin tocar el resto */
body:has(main[data-ficha="barcelona"]) .cabecera--sobre,body:has(main[data-ficha="valencia-penthouse-albufera"]) .cabecera--sobre{background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.7) 55%,rgba(0,0,0,0))}
.cabecera__fila{display:flex;align-items:center;gap:var(--e-5);min-height:var(--alto-cabecera)}
.logo{display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1.6rem);min-height:2.75rem;color:var(--blanco);text-decoration:none;flex:none}
/* La S es el monograma del cliente (queja 21-oct 11:40 y orden de Víctor 11:5x: «LOGO SEDUCTION (1).png»; recortado de ese fichero, sin
   la dirección, a 3× en img/logo-s.webp), como máscara: toma el color del texto (blanco o dorado según el fondo). */
.logo__s{display:block;flex:none;height:clamp(2.2rem,1.6rem + 1.6vw,3.2rem);aspect-ratio:1694/1706;background:currentColor;
  -webkit-mask:url(img/logo-s.webp) center/contain no-repeat;mask:url(img/logo-s.webp) center/contain no-repeat}
.logo__nombre{display:flex;flex-direction:column;gap:.35em}
.logo__marca{font:500 clamp(1.05rem,.8rem + .8vw,1.6rem)/1 var(--fuente-titulares);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;-webkit-text-stroke:.2px currentColor}
/* El lema no pasa del ancho de la marca: en los idiomas en que es más largo (ruso), va en dos líneas. */
.logo__lema{max-width:21em;font:400 clamp(.5625rem,.5rem + .2vw,.75rem)/1.25 var(--fuente-texto);letter-spacing:.09em;text-transform:uppercase}
.menu-principal{margin-inline:auto}
.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(.7rem,1.1vw - .2rem,1.2rem)}
.menu>li{position:relative;display:flex;align-items:center}
.menu__enlace{display:inline-flex;align-items:center;gap:.35em;padding:.9rem 0;background:none;border:0;color:var(--blanco);font:400 clamp(.72rem,.45rem + .3vw,.8125rem)/1 var(--fuente-texto);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap}
.menu__enlace:hover,.menu__enlace[aria-current="page"],.menu>li.activo>.menu__enlace{color:var(--oro)}
.menu>li.activo>.menu__enlace::after{content:"";position:absolute;left:-.6rem;right:-.6rem;bottom:.05rem;height:2px;background:var(--oro)}
.menu__abrir{display:inline-grid;place-items:center;width:1.5rem;height:1.6rem;padding:0;margin-left:0;margin-right:-.65rem;background:none;border:0;color:var(--blanco);opacity:.6;cursor:pointer}
.menu__abrir:hover,.menu__abrir:focus-visible,.menu__abrir[aria-expanded="true"]{opacity:1}
.menu__abrir svg{width:.55rem;height:.55rem;transition:transform var(--transicion)}
.menu__abrir[aria-expanded="true"] svg{transform:rotate(180deg)}
.submenu{list-style:none;margin:0;padding:var(--e-3) 0;min-width:15rem;background:rgba(8,8,8,.97);border:var(--borde);border-top:2px solid var(--oro);box-shadow:var(--sombra)}
.submenu a{display:block;padding:.6rem 1.2rem;color:var(--texto);font:400 var(--t-s)/1.3 var(--fuente-texto);text-decoration:none}
.submenu a:hover,.submenu a[aria-current="page"]{color:var(--oro);background:rgba(255,255,255,.04)}
.submenu span{display:block;padding:.6rem 1.2rem;color:var(--texto-suave);font-size:var(--t-s)}
.cabecera__acciones{display:flex;align-items:center;gap:clamp(.6rem,1.2vw,1.2rem);flex:none}
/* 1600-1899 px (ES): menú + 2 botones amarillos no cabían y el último quedaba pegado al borde derecho (margen 1-4 px frente a 63-73 del logo; Víctor 23-oct, medido en PRUEBAS pt760). Menos hueco entre enlaces y entre bloques SOLO en ese tramo: el margen derecho vuelve a ser el del logo (±10 px del monograma). */
@media (min-width:1580px) and (max-width:1899.98px){.menu{gap:.55rem}.cabecera__fila{gap:var(--e-4)}}
.idiomas{position:relative}
.idiomas summary{display:flex;align-items:center;gap:.5em;min-height:2.9rem;padding:0 1rem;border:0;color:var(--blanco);font:500 var(--t-s)/1 var(--fuente-texto);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;list-style:none}
.idiomas summary::-webkit-details-marker{display:none}
.idiomas summary:focus-visible{outline:2px solid var(--oro);outline-offset:3px}   /* sin caja (diapositivas 8 y 28), pero con el foco de teclado a la vista */
.idiomas summary svg{width:.65rem;height:.65rem}
.idiomas summary .icono--globo{width:1rem;height:1rem}
.idiomas ul{position:absolute;z-index:41;right:0;top:calc(100% + .4rem);list-style:none;margin:0;padding:var(--e-2) 0;min-width:10rem;background:rgba(8,8,8,.97);border:var(--borde);box-shadow:var(--sombra)}
.idiomas a{display:block;padding:.75rem 1rem;color:var(--texto);text-decoration:none;font-size:var(--t-s)}
.idiomas a:hover,.idiomas a[aria-current="true"]{color:var(--oro)}
.cabecera__cta{white-space:nowrap;min-height:2.9rem;padding-inline:1rem;font-size:.75rem;letter-spacing:.02em}
.hamburguesa{display:none;width:2.9rem;height:2.9rem;padding:0;background:none;border:1px solid var(--oro);color:var(--blanco);cursor:pointer}
.hamburguesa svg{width:1.3rem;height:1.3rem}
.hamburguesa span{display:grid;place-items:center}
.hamburguesa .cerrar{display:none}
.hamburguesa[aria-expanded="true"] .abrir{display:none}
.hamburguesa[aria-expanded="true"] .cerrar{display:grid}

/* Escritorio: desplegables al pasar el ratón o al llegar con el teclado, y con el botón de la flecha */
@media (min-width:1440px){
  .menu .submenu{position:absolute;left:-1.2rem;top:100%;visibility:hidden;opacity:0;transform:translateY(.4rem);transition:opacity var(--transicion),transform var(--transicion),visibility var(--transicion)}
  .menu>li:hover>.submenu,.menu>li:focus-within>.submenu,.menu__abrir[aria-expanded="true"]+.submenu{visibility:visible;opacity:1;transform:none}
  .menu-movil__extra{display:none}
}
/* D-PRIN-137 (diapositiva 1): con ratón, el menú sin flechas; el submenú se abre al pasar o al llegar con el teclado, y la flecha solo aparece al
   enfocarla. En táctil (sin hover) la flecha se queda: es lo que abre el submenú al tocar (puente 21-oct). */
@media (min-width:1440px) and (hover:hover){.menu__abrir:not(:focus-visible){position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)}}
/* Escritorio estrecho: todo el menú en una línea también en francés, castellano o ruso */
@media (min-width:1440px) and (max-width:1599.98px){
  .cabecera__fila{gap:var(--e-4)}
  .cabecera__acciones{gap:var(--e-3)}
  .cabecera__cta{padding-inline:.8rem}
  .logo{gap:.8rem}
  .logo__marca{font-size:1.2rem}
  .logo__lema{font-size:.625rem;letter-spacing:.07em}
  .idiomas summary{padding:0 .7rem}
}
/* Móvil y tableta: botón de menú y panel a pantalla completa */
@media (max-width:1439.98px){
  .hamburguesa{display:grid}
  .cabecera__acciones{margin-left:auto}
  .menu-principal{position:fixed;inset:var(--alto-cabecera) 0 0;z-index:39;margin:0;padding:var(--e-5) var(--margen) var(--e-8);background:var(--negro);overflow-y:auto;display:none}
  .menu-principal.abierto{display:block}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu>li{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--linea-suave)}
  .menu__enlace{flex:1;padding:1.1rem 0;font-size:var(--t-m);letter-spacing:.06em}
  .menu>li.activo>.menu__enlace::after{display:none}
  .menu__abrir{width:3rem;height:3rem;margin:0;opacity:1}
  .menu__abrir svg{width:.8rem;height:.8rem}
  .submenu{display:none;flex:0 0 100%;padding:0 0 var(--e-3);background:none;border:0;box-shadow:none}
  .menu__abrir[aria-expanded="true"]+.submenu{display:block}
  .submenu a,.submenu span{padding:.75rem var(--e-4)}
  .submenu a{display:flex;align-items:center;min-height:2.75rem}   /* zona táctil de 44 px (SEG servicios 390) */
  body.menu-abierto{overflow:hidden}
}
/* Secciones propias de una web (SS Performance): arriba del panel, solo donde esa web recoge su menú (1100 y menos). */
.menu-movil__secciones{display:none}
@media (max-width:1100px){
  .menu-movil__secciones{display:block;margin-bottom:var(--e-6)}
  .menu-movil__titulo{margin:0 0 var(--e-2);font-size:var(--t-s);letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
  .menu-movil__secciones ul{list-style:none;margin:0;padding:0}
  .menu-movil__secciones li{border-bottom:1px solid var(--linea-suave)}
  .menu-movil__secciones a,.menu-movil__secciones button{display:block;width:100%;padding:1.1rem 0;background:none;border:0;color:inherit;font:inherit;font-size:var(--t-m);letter-spacing:.06em;text-align:left;text-transform:uppercase;text-decoration:none;cursor:pointer}
  body.menu-abierto .tsp-cabecera{visibility:hidden}   /* su barra (SS Performance) quedaría encima del panel */
  .menu-movil__secciones [aria-current]{color:var(--oro)}
}
/* Con el menú en el panel, el botón «Empieza tu proyecto» sigue en la barra mientras cabe (decidido por el puente 21-oct, p8 diap. 9: desde 1024); por debajo de 1024 pasa al panel. */
@media (max-width:1023.98px){
  .cabecera__acciones .cabecera__cta{display:none}
  .menu-movil__extra{display:flex;flex-direction:column;gap:var(--e-4);margin-top:var(--e-6)}
}
@media (max-width:520px){
  .logo__lema{display:none}
  .idiomas summary{padding:0 .7rem}
}
/* W8 (D-PRIN-011/031/037/044, WCAG 1.4.10): a 320 px el logo, el idioma y el botón del menú caben en la fila */
@media (max-width:380px){
  .cabecera__fila{gap:var(--e-2)}
  .logo{gap:.4rem;flex:0 1 auto;min-width:0}
  .logo__marca{letter-spacing:.03em}
  .cabecera__acciones{gap:var(--e-2)}
  .idiomas summary{padding:0 .5rem;gap:.3em}
}

/* ---------- Héroe (imagen o vídeo de fondo, texto encima) ---------- */
.heroe{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;background:var(--negro);overflow:hidden}
.heroe__fondo{position:absolute;z-index:-1;inset:0 0 0 36%;margin:0}
/* Portada: la foto ENTERA del original KANELA, como en la maqueta de la diap. 1 (21-oct): empieza al 14,5 % del ancho, con el cuadro de
   círculos y las estanterías detrás del texto, y llega hasta la franja de ventajas; el fundido de la izquierda deja leer el texto. */
.heroe--portada .heroe__fondo{inset:0 0 10% 14.5%}
@media (min-width:1100px),(min-width:900px) and (orientation:landscape){   /* d1 a 1024 (V3, SEG-cx-p35-4-diap1-1024-1, DECIDIDO 4164): también de 900 a 1099 en horizontal: foto de borde a borde, velo y alto de 1440 (encuadre abierto como la diapositiva) */
  /* 2.ª revisión (p15, 15:3x): hasta casi abajo, detrás de la franja de ventajas como en la maqueta, para que no se recorte la alfombra ni
     las mesas; y fundidos más estrechos que los genéricos, para que no salga apagada. */
  .heroe--portada .heroe__fondo img{object-position:0 50%}
  /* El cuadro de círculos a la derecha del titular, como la diapositiva (x ≈430-545 a 1440): la foto empieza al 23 % (no al 14,5 %). */
  .heroe--portada .heroe__fondo{inset:0 0 10% 0}   /* de borde a borde como la diapositiva 1 (con el 23 % salía una banda negra a la izquierda, queja de Víctor 23:22) */
  /* Velo detrás de la columna del texto (hasta ~40 % del ancho) para el contraste p99 ≥4,5 por línea (puente); a la derecha, la foto limpia. */
  /* SEG-p4-showroom-diap1-1440-1 (V3, puente 20:2x): el cuadro de círculos y las estanterías (x ≈21-33 % a 1440) se ven atenuados como en la
     diapositiva: el velo baja sobre ellos sin bajar del contraste p99 ≥4,5 de cada línea (lo mide el e2e). */
  .heroe--portada .heroe__fondo::after{background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.6) 18%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.15) 42%,rgba(0,0,0,0) 50%),linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.55) 12%,rgba(0,0,0,0) 30%),linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 12%)}
  /* VS 22:00 (foto del héroe de Inicio como la diapositiva 1): la foto es la misma que la del Drive (SSIM 0,997; V12); lo que la apagaba era el velo de la foto, que llegaba hasta el 50 % de su caja. Más corto (hasta el 40 %): la franja x 33-50 % (cuadro, estantería, ventana) pasa de luma ≈60 a ≈75 (diapositiva 161). El velo del texto no se toca: acortarlo dejaba el párrafo a 1,7-3,1 de contraste (e2e 7342e7557, 5 nuevos); la maqueta lo resuelve con un párrafo más estrecho, que no cabe en los 810 px. */
  /* 2.ª revisión de W12: la primera pantalla entera (cabecera, ventajas, «Una visión global» y la franja) en 810 px a 1440, como la maqueta. */
  .heroe--portada{min-height:min(100svh,56.25vw)}
  .heroe--portada .lema{padding-block:clamp(.6rem,.3rem + .4vw,.9rem) clamp(.3rem,.2rem + .2vw,.5rem)}
  .heroe--portada .banda__fila{min-height:3rem;padding-block:var(--e-2)}
  .heroe--portada .heroe__contenido{padding-top:calc(var(--alto-cabecera) + clamp(.3rem,.5vw,1rem));padding-bottom:clamp(.6rem,.8vw,1.2rem)}
  .heroe--portada .heroe__texto>*+*,.heroe--portada .heroe__texto>.titular+*{margin-top:clamp(.5rem,.1rem + .55vw,1.1rem)}
  .heroe--portada .boton--grande{min-height:clamp(3.2rem,2.4rem + 1.2vw,4.2rem)}
  .heroe--portada .ventaja{padding-block:clamp(.5rem,.2rem + .3vw,.8rem)}
  /* r6 (e2e r5: «interior design and» 1,6-3,1 y los rótulos a 1100 3,4-4,46): el velo de la foto va en % de su caja y la columna del
     texto (más ancha en inglés y centrada desde 1680) se le salía. Este segundo velo va pegado a la columna: llega hasta su borde
     derecho en cualquier ancho y se funde 10rem más allá; arriba y abajo, fundido (sin cantos). */
  .heroe--portada .heroe__texto{position:relative}
  .heroe--portada .heroe__texto::before{content:"";position:absolute;z-index:-1;inset:-3rem -10rem -3rem -100vw;pointer-events:none;
    background:linear-gradient(90deg,rgba(0,0,0,.72) calc(100% - 10rem),rgba(0,0,0,0) calc(100% - 2rem));   /* llega al borde de la columna y se apaga 8rem más allá: con .5 hasta 14rem antes, el texto sobre la foto de borde a borde caía a 3,2-4,5 (e2e v3-d1-23h-con-9bb33b486) */
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 3rem,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(180deg,transparent,#000 3rem,#000 calc(100% - 3rem),transparent)}
}
/* Foto del héroe de Inicio como la diapositiva 1 (VS 22:00): de 1280 px en adelante el velo de la foto llega solo al 40 % de su caja (1440: franja del cuadro luma 52-67 -> 66-84). A 1100 el párrafo cae a 4,29-4,43 de contraste con este velo (e2e 45674e4e3): ahí queda el de antes. */
@media (min-width:1280px){.heroe--portada .heroe__fondo::after{background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 14%,rgba(0,0,0,.12) 26%,rgba(0,0,0,0) 36%),linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.55) 12%,rgba(0,0,0,0) 30%),linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 12%)}}
/* Párrafo de la portada como la diapositiva 1 (VS 22:17): mismo ancho (31,5 rem) y mismos cortes de línea en es (medida. / desde la / detalle.); así acaba al 37 % del ancho, dentro del velo, y el de la foto puede ser corto sin bajar el contraste. */
@media (min-width:1280px){.heroe.heroe--portada .texto-grande{max-width:31.5rem;font-size:.92rem;line-height:1.5}}
@media (min-width:1440px){.heroe.heroe--portada .texto-grande{max-width:33rem;font-size:.98rem}}   /* d1 (V9 20:5x, puente: un solo mecanismo, todo por la raíz): párrafo 1,09 % del ancho a 1440 (15,7 px) y en 3 líneas como la diapositiva 1; escala con el rem */
/* Titular de la portada de 900 px en adelante, UNA sola regla (V3 + W7, acuerdo 21-oct 20:1x). r6/r7 (e2e: la franja acababa en 886 y luego en 834 a 1440x810): letra y huecos algo menores, unos 130 px menos de alto a 1440; SEG-W12rev-diap1-1440-1/2: 700 y ~47 px. SEG-p23-inicio-diap1-1024-1: de 900 a 1099 mandaba la regla de móvil (6vw ≈ 71 px) y partía ARQUITECTUR/A, INTERIORISM/O, CONSTRUCCIÓ/N. */
@media (min-width:900px){.heroe.heroe--portada .titular--1{font-size:clamp(2.1rem,.4rem + 2.4vw,4rem);font-weight:700;line-height:.98}}
@media (min-width:1100px){.heroe.heroe--portada .boton--grande{min-height:clamp(2.7rem,1.9rem + 1.1vw,3.7rem);padding-inline:clamp(1rem,.5rem + 1.2vw,1.8rem)}}   /* titular y botones como en la diapositiva 1 (el titular ocupaba ~1/3 más ancho que ella) */
@media (min-width:1440px){.heroe.heroe--portada .titular--1{font-size:2.97rem}}   /* d1 (V9 20:2x): titular 3,3 % del ancho a 1440 (47,5 px; antes 2,84 %) como la diapositiva 1, en rem: escala con la raíz (a 2356 el tope por alto de la raíz lo deja en ≈2,98 %, anotado) */
/* D-PRIN-004: «EXTRAORDINARIOS.» (y «extraordinàries.», «extraordinaire.») cabe entero en su línea sin tocar el tamaño de la letra:
   la columna del titular se ensancha solo en los tramos en que no cabía (1024, 1100-1439 y de 1600 arriba). 390, 768 y 1440 no cambian. */
@media (min-width:880px) and (max-width:1099.98px){.heroe--portada .heroe__texto{max-width:48rem}}
@media (min-width:1100px) and (max-width:1439.98px){.heroe--portada .heroe__texto{max-width:min(46rem,49vw)}}
@media (min-width:1600px){.heroe--portada .heroe__texto{max-width:min(54rem,46vw)}}
/* SEG-p4-showroom-diap1-1440-4: en inglés el titular salía en 6 líneas con «AND» sola; su columna, algo más ancha (de 1100 en adelante), deja «INTERIOR DESIGN AND» en una línea, como el castellano. */
@media (min-width:1100px){:lang(en) .heroe--portada .heroe__texto{max-width:min(62rem,52vw)}}
.heroe__fondo img,.heroe__fondo video{width:100%;height:100%;object-fit:cover;object-position:30% 0}
/* Fundidos a negro: hacia el texto, hacia abajo (franja de ventajas) y arriba (cabecera) */
.heroe__fondo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--negro) 0%,rgba(0,0,0,.78) 5%,rgba(0,0,0,.4) 12%,rgba(0,0,0,.12) 20%,rgba(0,0,0,0) 28%),
  linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.6) 9%,rgba(0,0,0,.18) 20%,rgba(0,0,0,0) 30%),
  linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 14%)}

.heroe__contenido{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--alto-cabecera) + clamp(1rem,2.4vw,3rem));padding-bottom:clamp(1.5rem,2.2vw,2.6rem)}
.heroe__texto{max-width:min(46rem,46vw)}
.heroe__texto>*+*{margin-top:clamp(.9rem,.3rem + 1.2vw,1.9rem)}
.heroe__texto>.titular+*{margin-top:clamp(1.1rem,.4rem + 1.6vw,2.4rem)}
.heroe .titular--1{font-size:clamp(2.2rem,.6rem + 3.6vw,5.4rem);font-weight:600;letter-spacing:-.01em}
.heroe .texto-grande{font-size:clamp(.95rem,.5rem + .55vw,1.2rem);line-height:1.38;max-width:35em}
/* El cirílico (Playfair Display) es más ancho que Bodoni Moda: el mismo titular ocupa lo mismo con un 15 % menos. */
:lang(ru) .heroe .titular--1{font-size:clamp(1.9rem,.5rem + 3.05vw,4.6rem)}
.heroe__pie{position:relative}
/* Héroe de página interior: más bajo */
.heroe--medio{min-height:min(78svh,52rem)}
@media (max-width:1099.98px){
  .heroe .heroe__fondo{inset:0 0 auto 0;height:62svh}
  .heroe__fondo img,.heroe__fondo video{object-position:42% 30%}
  .heroe__fondo::after{background:linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.75) 22%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.35) 100%)}
  .heroe__contenido{justify-content:flex-end;padding-top:calc(46svh)}
  .heroe__texto{max-width:42rem}
  .heroe .titular--1{font-size:clamp(1.9rem,.6rem + 6vw,4.4rem)}
}
/* Portada a 390 (puente 2178): el sofá y el cuadro rojo y verde, no la pared de la izquierda. */
@media (max-width:1099.98px){.heroe--portada .heroe__fondo img{object-position:62% 50%}}
/* Portada entre 900 y 1099 (SEG-p23-inicio-diap1-1024-1): como a 1440, la foto detrás del texto hasta casi abajo, no cortada sobre media pantalla negra. */
@media (min-width:900px) and (max-width:1099.98px){
  .heroe--portada .heroe__fondo{inset:0 0 10% 14.5%;height:auto}
  .heroe--portada .heroe__fondo img{object-position:0 50%}
  .heroe--portada .heroe__fondo::after{background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.86) 38%,rgba(0,0,0,.45) 50%,rgba(0,0,0,0) 60%),linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.55) 12%,rgba(0,0,0,0) 30%),linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 12%)}
  .heroe--portada .heroe__contenido{justify-content:center;padding-top:calc(var(--alto-cabecera) + clamp(1rem,2.4vw,3rem))}
  .heroe--portada .heroe__texto{max-width:min(46rem,52vw)}
}

/* ---------- Franja de ventajas ---------- */
.ventajas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:var(--borde);border-bottom:var(--borde)}
.ventaja{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,1.6vw,1.9rem);padding:clamp(.8rem,.4rem + .5vw,1.05rem) var(--e-3);font:400 clamp(.75rem,.66rem + .22vw,.875rem)/1.45 var(--fuente-texto);text-transform:uppercase;letter-spacing:.02em}
.ventaja+.ventaja{border-left:1px solid transparent;background:linear-gradient(var(--linea),var(--linea)) left center/1px 62% no-repeat}
.ventaja svg{flex:none;width:clamp(2.1rem,1.5rem + 1.45vw,3.2rem);height:clamp(2.1rem,1.5rem + 1.45vw,3.2rem);color:var(--oro)}
.ventaja span{max-width:9.5em}
@media (max-width:899.98px){
  .ventajas{grid-template-columns:repeat(2,1fr)}
  .ventaja{justify-content:flex-start;border-top:1px solid var(--linea-suave)}
  .ventaja+.ventaja{background:none}
  .ventaja:nth-child(-n+2){border-top:0}
  .ventaja:nth-child(even){border-left:1px solid var(--linea-suave)}
  .ventaja:last-child:nth-child(odd){grid-column:1/-1}
}
/* Ventajas de la portada (SEG-p24e-diap1-768-3): en una fila con sus separadores dorados como la maqueta desde 600 (icono encima del texto);
   por debajo, en dos columnas, la 5.ª ocupa la fila entera en vez de quedar sola a media fila. */
@media (min-width:600px) and (max-width:899.98px){
  .heroe--portada .ventajas{grid-template-columns:repeat(5,1fr)}
  .heroe--portada .ventaja{flex-direction:column;justify-content:center;text-align:center;gap:var(--e-2);border-top:0}
  .heroe--portada .ventaja+.ventaja{border-left:0;background:linear-gradient(var(--linea),var(--linea)) left center/1px 62% no-repeat}
}
@media (max-width:599.98px){.heroe--portada .ventaja:last-child:nth-child(odd){grid-column:1/-1;border-left:0}}
/* Portada a 768 (SEG-cx-p19-4-diap1-768-2): las 5 ventajas en UNA fila, como en la diapositiva; la regla de la 5.ª suelta (impar) solo vale en móvil. */
@media (min-width:600px) and (max-width:899.98px){.heroe--portada .ventaja:last-child:nth-child(odd){grid-column:auto;border-left:0}}
/* Portada a 390 (SEG-cx-p18-3-diap1-390-1): se ven la mesa y la alfombra del primer plano encima del texto, sin perder el sofá ni el cuadro. */
@media (max-width:599.98px){
  .heroe--portada .heroe__fondo{height:72svh}
  .heroe--portada .heroe__fondo img{object-position:48% 50%}
  .heroe--portada .heroe__fondo::after{background:linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.6) 10%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 85%,rgba(0,0,0,.35) 100%)}
  .heroe--portada .heroe__contenido{padding-top:66svh}
}

/* ---------- Franja de lema bajo el héroe (A GLOBAL VISION · cita) ---------- */
.lema{display:flex;align-items:center;justify-content:space-between;gap:var(--e-5) var(--e-7);flex-wrap:wrap;padding-block:clamp(1rem,.5rem + .9vw,1.4rem) clamp(.5rem,.3rem + .4vw,.8rem)}
.lema__vision{position:relative;margin:0;padding-left:.8rem;border-left:2px solid var(--oro);font:500 clamp(.75rem,.66rem + .2vw,.875rem)/1.35 var(--fuente-texto);letter-spacing:.32em;text-transform:uppercase;color:var(--oro)}
.lema__vision::before{content:"";position:absolute;left:-2px;top:-.85rem;width:2.6rem;height:2px;background:var(--oro)}
.banda{border-top:var(--borde);background:var(--negro)}
.banda__fila{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3) var(--e-6);flex-wrap:wrap;min-height:3.6rem;padding-block:var(--e-3);font:400 var(--t-xs)/1.4 var(--fuente-texto);letter-spacing:.16em;text-transform:uppercase}
.banda__frase{display:flex;align-items:center;gap:var(--e-5);font:400 clamp(.95rem,.85rem + .3vw,1.15rem)/1.3 var(--fuente-titulares);letter-spacing:.14em;text-transform:none}
.banda__frase::before,.banda__frase::after{content:"";width:2.2rem;height:1px;background:var(--oro)}
@media (max-width:899.98px){.banda__fila{justify-content:center;text-align:center}.banda__frase{order:-1;flex-basis:100%;justify-content:center}}

/* ---------- Rejilla de tarjetas ---------- */
.tarjetas{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.75rem,.5rem + .8vw,1.5rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--tarjeta-min,17rem)),1fr))}
.tarjeta{position:relative;display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--linea-suave);transition:border-color var(--transicion),transform var(--transicion)}
.tarjeta:hover{border-color:var(--oro)}
.tarjeta__imagen{aspect-ratio:var(--tarjeta-proporcion,4/3);overflow:hidden;margin:0;background:var(--superficie-2)}
.tarjeta__imagen img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tarjeta:hover .tarjeta__imagen img{transform:scale(1.04)}
.tarjeta__cuerpo{display:flex;flex-direction:column;gap:var(--e-2);padding:var(--e-4) var(--e-4) var(--e-5)}
.tarjeta__titulo{font-size:var(--t-h5);text-transform:uppercase;letter-spacing:.04em;line-height:1.15}
.tarjeta__titulo a{text-decoration:none}
/* Toda la tarjeta se pulsa, con el enlace en el título (un solo enlace por tarjeta para los lectores de pantalla) */
.tarjeta__titulo a::after{content:"";position:absolute;inset:0}
.tarjeta__texto{color:var(--texto-suave);font-size:var(--t-s)}
.tarjeta__flecha{margin-top:auto;align-self:flex-end;color:var(--oro)}
.tarjeta__flecha svg{width:1.4rem;height:1.4rem}
.seccion--clara .tarjeta{background:#fff;border-color:rgba(0,0,0,.08)}
.seccion--clara .tarjeta__texto{color:#4a443c}

/* ---------- Bloque de texto con imagen ---------- */
.texto-imagen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(2rem,1rem + 4vw,6rem)}
.texto-imagen--invertido{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.texto-imagen--invertido .texto-imagen__media{order:-1}
.texto-imagen__texto>*+*{margin-top:var(--e-5)}
.texto-imagen__media{position:relative;margin:0}
.texto-imagen__media img{width:100%;aspect-ratio:var(--proporcion,3/2);object-fit:cover}
.texto-imagen__media figcaption{margin-top:var(--e-2);color:var(--texto-suave);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:899.98px){.texto-imagen,.texto-imagen--invertido{grid-template-columns:1fr}.texto-imagen--invertido .texto-imagen__media{order:0}}

/* ---------- Formulario corto ---------- */
.formulario{display:grid;gap:var(--e-4)}
.formulario__fila{display:grid;gap:var(--e-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.campo{display:flex;flex-direction:column;gap:var(--e-2);font-size:var(--t-s)}
.campo input,.campo textarea,.campo select{width:100%;min-height:3rem;padding:.75rem .9rem;background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--radio-s);color:var(--texto);font:400 var(--t-m)/1.4 var(--fuente-texto)}
.campo textarea{min-height:7.5rem;resize:vertical}
/* D-PRIN-096: filas·1,4em + relleno + borde + 1 px, para que el alto entero redondeado (clientHeight) no se quede en 2,99 líneas */
.campo textarea.campo__filas--2{min-height:calc(2.8em + 1.5rem + 3px)}
.campo textarea.campo__filas--3{min-height:calc(4.2em + 1.5rem + 3px)}
.campo input:focus,.campo textarea:focus{border-color:var(--oro);outline:2px solid transparent}
.campo input:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.casilla{display:flex;align-items:flex-start;gap:var(--e-3);font-size:var(--t-s);color:var(--texto-suave)}
.casilla input{flex:none;width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--oro)}
.casilla a{color:var(--oro)}
.formulario__aviso{padding:var(--e-3) var(--e-4);border-left:3px solid var(--oro);background:rgba(242,180,82,.08);font-size:var(--t-s)}
.formulario__aviso{scroll-margin-top:var(--e-8,6rem)}
.formulario__seguro{display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-6);margin:0;padding:0;list-style:none;color:var(--texto-suave);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase}
.formulario__seguro li{display:flex;align-items:center;gap:var(--e-2)}
.formulario__seguro svg{width:1.1rem;height:1.1rem;color:var(--oro)}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Pie ---------- */
.pie{background:var(--negro);border-top:var(--borde);color:var(--texto-suave);font-size:var(--t-s)}
.pie__marca{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--e-5) var(--e-7);padding-block:var(--e-7) var(--e-6);border-bottom:1px solid var(--linea-suave)}
.pie__ciudades{font:400 var(--t-xs)/1.4 var(--fuente-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--texto)}
.pie__frase{display:flex;align-items:center;gap:var(--e-5);margin:0;font:400 var(--t-h5)/1.3 var(--fuente-titulares);letter-spacing:.14em;color:var(--texto)}
.pie__frase::before,.pie__frase::after{content:"";width:3.2rem;height:1px;background:var(--oro)}
/* 4830 (orden de Víctor 4801): el pie de las diapositivas 29 y 31: tras las ciudades una raya de oro y el lema en cursiva, sin espaciado, a la derecha (antes, el de la 30: lema centrado entre dos filetes). */
.pie__frase{font-style:italic;letter-spacing:0}
.pie__frase::after{content:none}
/* D-PRIN-138: si la página ya cierra con la frase (la banda de Inicio, la franja «marca» o el panorama de Estudio), el pie no la repite: queda su logo */
main:has(.banda__frase,.franja--marca,.panorama__frase)~.pie .pie__frase,main:has(.banda__frase,.franja--marca,.panorama__frase)~.pie .pie__ciudades{display:none}
.pie__columnas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-7) var(--e-6);padding-block:var(--e-7)}
.pie__titulo{margin:0 0 var(--e-4);font:500 var(--t-xs)/1.3 var(--fuente-texto);letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pie a{color:var(--texto-suave);text-decoration:none}
.pie .logo{color:var(--blanco)}
.pie a:hover{color:var(--oro);text-decoration:underline}
.pie address{font-style:normal;display:grid;gap:.55rem}
.pie__mas{margin-top:var(--e-5)!important}
.pie__legal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--e-3) var(--e-6);padding-block:var(--e-5);border-top:1px solid var(--linea-suave);font-size:var(--t-xs)}
.pie__legal ul{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-5)}
/* D-PRIN-143: los legales en UNA línea y en letra pequeña desde 768 (en el móvil, si no caben, bajan); el contacto, igual de pequeño. */
.pie__legal,.pie__legal a,.pie__legal button{font-size:.75rem}
@media (min-width:768px){.pie__legal ul{flex-wrap:nowrap;white-space:nowrap}}
.pie__contacto a{white-space:nowrap}
.pie__cookies{display:inline;margin:0;padding:0;border:0;background:none;color:var(--texto-suave);font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;cursor:pointer}
.pie__cookies:hover{color:var(--oro);text-decoration:underline}
@media (max-width:1023.98px){
  .pie__columnas{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* En pantallas táctiles, cada enlace del pie con su zona de 44 px de alto */
  .pie__columnas ul,.pie address{gap:0}
  .pie__columnas a,.pie__legal a{display:inline-flex;align-items:center;min-height:2.75rem}
  /* D-PRIN-083: el enlace de cookies (inline, en la línea del copyright) gana zona táctil de 44 px (pseudoelemento, sin mover la altura de la fila) */
  .pie__cookies{display:inline-block;padding-block:.85rem;margin-block:-.85rem}   /* la caja del botón mide ≥44 px (SEG servicios 390); el margen negativo no mueve la fila */
}
/* SEG-7 (diap. 6, V7 21-oct): por debajo de 768 px el botón de cookies no cabe tras el copyright y el «·» quedaba suelto al final de la línea
   (medido en vivo a 390, es/en): el botón baja a su propia línea y el punto se quita. */
@media (max-width:767.98px){.pie__legal .pie__sep{display:none}.pie__legal .pie__cookies{display:block;text-align:inherit}}
@media (max-width:520px){.pie__columnas{grid-template-columns:1fr}.pie__marca{flex-direction:column;align-items:flex-start}}

/* ---------- Vídeo en ventana (PLAY FILM) ---------- */
.ventana-video{--rv:1.7778;width:min(92vw,1280px,calc((100vh - 7rem) * var(--rv)));max-height:none;padding:0;border:0;overflow:visible;background:var(--negro);color:var(--blanco)}  /* el × va por encima del marco: sin overflow:visible el dialog lo recortaba, y el ancho deja siempre 3,5rem libres arriba para él (D-PRIN-002) */
.ventana-video::backdrop{background:var(--negro)}  /* opaca, como la diapositiva 28: no se ve la página detrás (puente 2177b, 21-oct) */
.ventana-video__marco{position:relative;aspect-ratio:var(--rv)}   /* --rv: la proporción del vídeo (16/9 por defecto; web.js la pone con la del vídeo subido, p. ej. 9/16 en el vertical) */
/* Con versión vertical (video_web: <source media> del móvil), en el móvil la ventana es vertical, 9:16 y a lo alto de la pantalla: en el marco
   16:9 el vídeo vertical salía de 113 px de ancho a 390 (V7 21-oct, medido en pt139). Misma condición que la <source> vertical. */
@media (max-width:600px),(orientation:portrait) and (max-width:1099.98px){
  .ventana-video--vertical{width:min(92vw,calc((100vh - 7rem) * 9 / 16))}
  .ventana-video--vertical .ventana-video__marco{aspect-ratio:9/16}
}
.ventana-video__marco iframe,.ventana-video__marco video{position:absolute;inset:0;width:100%;height:100%;border:0}
.ventana-video__cerrar{position:absolute;right:0;top:-3.25rem;width:2.75rem;height:2.75rem;background:none;border:1px solid var(--oro);color:var(--blanco);cursor:pointer;font-size:1.4rem;line-height:1}

/* ---------- Aviso de cookies (lo pinta base.html.twig) ---------- */
.web .aviso-cookies{position:relative;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--e-3) var(--e-4);padding:var(--e-4) var(--margen);background:rgba(5,5,5,.97);border-bottom:1px solid var(--oro);font-size:var(--t-s);color:var(--texto)}
.web .aviso-cookies p{margin:0;max-width:46rem}
.web .aviso-cookies a{color:var(--oro)}
.web .aviso-cookies form{margin:0}
.web .aviso-cookies button{min-height:2.6rem;padding:0 1.4rem;border:1px solid var(--oro);background:transparent;color:var(--texto);font:500 var(--t-xs)/1 var(--fuente-texto);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.web .aviso-cookies .aviso-cookies-configurar{font-size:.8rem;text-decoration:underline;white-space:nowrap}
/* SEG-p18-villa-emmar-diap25-1024-4: de 600 a 1099 el aviso en UNA fila y bajo (a 1024 medía 129 px, «Rechazar» caía solo a otra fila y tapaba
   71 px del titular de la portada): el texto se encoge a su hueco y los botones, juntos y sin partir, conservan sus 44 px de alto. */
@media (min-width:600px) and (max-width:1099.98px){.web .aviso-cookies{flex-wrap:nowrap;justify-content:space-between;gap:var(--e-3);padding-block:.25rem;font-size:var(--t-xs);line-height:1.4}.web .aviso-cookies p{flex:1 1 auto;min-width:0;max-width:none}.web .aviso-cookies form,.web .aviso-cookies .aviso-cookies-configurar{flex:none}.web .aviso-cookies button{min-height:2.75rem;padding:0 1rem;white-space:nowrap}}

/* ---------- Página de muestra del sistema (/es/_sistema) ---------- */
.muestra{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-5)}
.muestra__fila{display:flex;flex-wrap:wrap;gap:var(--e-4);align-items:center}
.muestra__color{width:9rem;font-size:var(--t-xs);color:var(--texto-suave)}
.muestra__color span{display:block;height:4rem;margin-bottom:var(--e-2);border:1px solid var(--linea-suave)}
.muestra__nota{color:var(--texto-suave);font-size:var(--t-s)}
.web .muestra__titulo{overflow-wrap:anywhere;margin-bottom:var(--e-6);font:500 var(--t-xs)/1.3 var(--fuente-texto);letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}

/* Aviso de cookies (orden 812 del puente, confirmada por el VS 23-oct): franja a lo ancho ARRIBA, en el flujo (tras «Saltar al contenido»), que empuja el contenido y no tapa nada; ya no hace falta dejar sitio debajo ni scroll-padding. La cabecera sobre la foto (.cabecera--sobre) usa su posición estática, así que baja con el aviso. */
@media (max-width:599.98px){.web .aviso-cookies{display:grid;grid-template-columns:auto auto 1fr;align-items:center;justify-content:stretch;gap:.4rem .6rem;padding:.5rem var(--margen);font-size:.75rem;line-height:1.3}.web .aviso-cookies p{grid-column:1/-1;max-width:none}.web .aviso-cookies .aviso-cookies-configurar{grid-column:3;justify-self:end;order:3;font-size:.75rem}.web .aviso-cookies button{min-height:2.2rem;padding:0 .8rem}}   /* a 390 el aviso ocupaba ≈190 px y tapaba VER VÍDEO del héroe de Inicio (fila SEG-USAR-inicio-4af251ab): una fila de botones y el texto en letra menor, ≈110 px */

/* ---------- Visor de galerías (web.js; orden de Víctor 21-oct) ---------- */
.visor-fotos{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.92);color:#fff}
.visor-fotos::backdrop{background:#000}
.visor-fotos[open]{display:grid;grid-template-columns:3.5rem minmax(0,1fr) 3.5rem;align-items:center}
.visor-fotos__escena{grid-column:2;margin:0;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:0}
.visor-fotos__escena img{width:100%;height:calc(100vh - 4.5rem);height:calc(100dvh - 4.5rem);object-fit:contain}   /* ocupa toda la escena aunque el fichero sea pequeño (la miniatura de 335 px se veía diminuta) */
.visor-fotos figcaption{font:400 var(--t-s,.875rem)/1.3 var(--fuente-texto,sans-serif);text-align:center}
.visor-fotos button{background:transparent;border:0;color:#fff;font-size:2.5rem;line-height:1;cursor:pointer;min-width:2.75rem;min-height:2.75rem}
.visor-fotos button:focus-visible{outline:2px solid var(--oro,#c9a24b);outline-offset:2px}
.visor-fotos__cerrar{position:absolute;top:.5rem;right:.75rem;z-index:1}
.visor-fotos__paso--ant{grid-column:1;grid-row:1}
.visor-fotos__paso--sig{grid-column:3;grid-row:1}
.visor-fotos.visor-fotos--una .visor-fotos__paso{display:none}   /* una sola foto («1 de 1»): sin flechas, que no harían nada (web.js) */
.ficha__galeria-fotos img,.proyecto-c__galeria img,.lectura__galeria img,.galeria-franja img,.hotel-mosaico img,.hotel-fotos img,.proyecto-b__fotos img,.proyecto-b__plano img,.servicio__foto img{cursor:zoom-in}
.proyecto-b__plano a img{cursor:pointer}
.heroe--proyecto:has(.heroe__fondo img[src*="dubai-marina-gate/portada"]){cursor:zoom-in}   /* la foto de cabecera de Marina Gate abre el visor al pulsarla (web.js; SEG-USAR dubai-marina-gate): solo su ficha, por la ruta de su portada */
@media (max-width:600px){   /* móvil: la foto a todo el ancho y las flechas encima (con columnas de 3 rem la foto ocupaba el 75 % del ancho) */
  .visor-fotos[open]{grid-template-columns:minmax(0,1fr)}
  .visor-fotos__escena{grid-column:1;grid-row:1}
  .visor-fotos__paso{grid-row:1;z-index:1;background:rgba(0,0,0,.45);align-self:center;font-size:2rem}
  .visor-fotos__paso--ant{grid-column:1;justify-self:start}
  .visor-fotos__paso--sig{grid-column:1;justify-self:end}
}
body:has(dialog.visor-fotos[open]){overflow:hidden}

/* Visor: deslizar a la derecha en móvil disparaba el «atrás» del navegador (V6, en vivo a 390). Gestos horizontales para el visor, no para el navegador. */
.visor-fotos,.visor-fotos__escena{touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
html:has(dialog.visor-fotos[open]){overscroll-behavior-x:none}

/* SEG servicios 390 (2.ª revisión): zonas táctiles de 44 px en el aviso de cookies, sin mover el texto (los títulos de Servicios y el pie legal ya medían 44 px en lo servido; con inline-block el título bajaba ≈25 px por tarjeta: w10-av) */
@media (max-width:1023.98px){
  .web .aviso-cookies button{min-height:2.75rem}
  .web .aviso-cookies p a{display:inline-block;padding-block:.9rem;margin-block:-.9rem}
  .web .aviso-cookies .aviso-cookies-configurar{display:inline-flex;align-items:center;min-height:2.75rem}
}

/* d1 a 1024 (V3, SEG-cx-p35-4-diap1-1024-2; criterio 3558, puente DECIDIDO 4164): de 900 a 1099 en horizontal, el titular, el párrafo y los botones de la portada
   en vw, con la proporción de 1440 (antes salían ≈1,4 veces mayores que la diapositiva): a 1024x768, párrafo 359 px de ancho (antes 532) y botones 433 px
   en total (antes 527). El párrafo no baja de 11,5 px. */
@media (min-width:900px) and (max-width:1099.98px) and (orientation:landscape){
  .heroe.heroe--portada .titular--1{font-size:2.84vw}
  .heroe.heroe--portada .texto-grande{max-width:35vw;font-size:max(.72rem,1.02vw);line-height:1.5}
  .heroe.heroe--portada .boton--grande{min-height:5vw;padding-inline:1.6vw;font-size:1.24vw}
}

/* d1 a 1024, pieza 3 (V3, SEG-cx-p35-4-diap1-1024-1; DECIDIDO 4164): el bloque de 900-1099 de más arriba reponía el margen del 14,5 % a la foto y centraba
   el contenido, así que la pieza 2 (bloque de 1100 también desde 900 en horizontal) se quedaba a medias. De 900 a 1099 en horizontal, la foto va de borde a
   borde y el contenido arriba, como a 1440. */
@media (min-width:900px) and (max-width:1099.98px) and (orientation:landscape){
  .heroe--portada .heroe__fondo{inset:0 0 10% 0}
  .heroe--portada .heroe__contenido{justify-content:flex-start;padding-top:calc(var(--alto-cabecera) + clamp(.3rem,.5vw,1rem))}
}

/* d1 a 1440 (V3, DIFERENCIAS-VISIBLES-VS-1040; DECIDIDO 4206): velos de la foto del héroe de Inicio más claros, como la diapositiva (el cuadro de puntos y la pared se
   veían apagados), sin bajar del contraste p99 4,5 del texto. */
@media (min-width:1100px){
  .heroe--portada .heroe__texto::before{background:linear-gradient(90deg,rgba(0,0,0,.64) calc(100% - 12rem),rgba(0,0,0,0) calc(100% - 3rem))}
}
@media (min-width:1280px){.heroe--portada .heroe__fondo::after{background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.4) 14%,rgba(0,0,0,.1) 26%,rgba(0,0,0,0) 34%),linear-gradient(0deg,var(--negro) 0%,rgba(0,0,0,.55) 12%,rgba(0,0,0,0) 30%),linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 12%)}}

/* V12 (prio 0 de Víctor 22-oct 15:14, puente 812711): un botón SIN destino (vídeo PENDIENTE en el Drive, acción que aún no existe) se ve
   APAGADO en toda la web y fichas: más tenue, sin el dorado vivo (gris), sin efecto al pasar y con el cursor de «no permitido». Sigue VISIBLE
   (4249: botón visible desactivado, nunca otro vídeo). Sustituye a las reglas propias de secciones.css (.55 común y .85 de Propiedades
   exclusivas), paginas.css (.85 de Santa Anna, W8, y .55 del héroe de ficha). Fuera: los indicativos de Invertir (.boton--indicativo) y
   los de «Tras la firma» y del paso 04 del acuerdo, que tienen su decisión propia (d19). Contraste: WCAG 1.4.3 no lo exige a controles inactivos. */
:is(.boton,.boton-video)[aria-disabled="true"]:not(.boton--indicativo),:is(.boton,.boton-video)[disabled]:not(.boton--indicativo){opacity:.4;filter:grayscale(1);cursor:not-allowed;box-shadow:none}
:is(.boton,.boton-video)[aria-disabled="true"]:not(.boton--indicativo):hover,:is(.boton,.boton-video)[disabled]:not(.boton--indicativo):hover{opacity:.4;filter:grayscale(1);transform:none}

/* ESCALA >1440 (PRIO 0 MÁXIMA de Víctor, puente 4900/4911: «Fundadores a 2356 se rompe»; V9 4912): por encima de 1680 px TODA la web vivía en un contenedor de 1680 centrado (la cabecera y el texto empezaban a x=407 de 2356) con la letra de 1440 (clamp con máximo en rem), mientras las fotos y bandas iban a sangre; las diapositivas son proporcionales al ancho. Desde 1441 px: el contenedor deja de toparse (--ancho-maximo:100vw) y la base rem crece con el ancho (16 px a 1440, ≈26,2 px a 2356; tope en 2560 px), con lo que todo lo que va en rem y vw (letra, márgenes, topes de foto en rem, relleno) escala como la maqueta. ≤1440 no cambia. Lo que va en px no escala: se mide aparte por página. */
@media (min-width:1441px){
  :root{--ancho-maximo:100vw}
  html{font-size:max(16px,calc(min(100vw,2560px) / 90))}
}
/* Titulares en vw con la MISMA raíz que el rem. DECIDIDO 4988 (orden del VS 21:0x): la raíz ya NO lleva tope por alto (max(16px, 100vw/90)), así que 1vw de titular vale lo que la raíz; --vw solo repite el tope de 2560 px de la raíz (25,6 px). */
@media (min-width:1441px){
  :root{--vw:min(1vw,25.6px)}
}
/* d1 Inicio desde 1100 (V16 r2, 23-oct; medido en la lámina diap|servido de V9 a 2356×1325): los botones del héroe medían +18 % la diapositiva (VER VÍDEO 20,0 × 5,04 % del ancho, la diap. 16,7 × 4,3 %; VER PROYECTOS 17,1 %, la diap. 14,7 %): alto 4,3 vw, relleno 1,25 vw y letra 1,07 vw (×0,86). */
@media (min-width:1100px){.heroe.heroe--portada .boton--grande{min-height:calc(4.3*var(--vw));padding-inline:calc(1.25*var(--vw));font-size:calc(1.07*var(--vw))}}
/* Suelo de letra <700 px (regla 4163, barrido W5 23-oct): el lema de la cabecera («Arquitectura e interiorismo») medía 9,2 px a 600 y 9,36 a 680 (a ≤520 está oculto); a ≥10 px bajo 700 sin cambiar nada de 700 en adelante. */
@media (max-width:699.98px){
  .logo__lema{font-size:max(10px,clamp(.5625rem,.5rem + .2vw,.75rem))}
}
/* Cabecera común desde 1900 (W13, 23-oct: desborde horizontal a 2356, 2443 > 2356 en las fuentes de reserva, y el CTA a 7 px del borde con las fuentes cargadas): el logo (463), el menú (1028) y las acciones (687) no encogen y el margen crece con vw (93 px a 2356): 2256 > 2170. Menos hueco entre los tres y entre las entradas del menú: ≈2118, el CTA dentro de la caja del contenido. */
@media (min-width:1500px){.cabecera__fila{gap:var(--e-4)}.cabecera .menu{gap:.4rem}}   /* PRIO 0 (VS, 23-oct): a 1700-1856 px los botones de la cabecera se salían por la derecha (margen 2-4 px en vez de ≈70); la compactación de ≥1900 desde 1500: margen 53-65 px medido en pod */   /* +W11 (medido en pod, ES): con .55rem el último botón quedaba ≈10 px dentro del padding de la fila a 1600-2356 (EN no); con .4rem margen = padding exacto en es y en */
/* d1 Inicio desde 1100 (V16 r2, 23-oct; medido en pod w1-d1-botones-cand-pt735): con el relleno vertical por defecto del botón el alto de los dos botones del héroe era 4,59 % (1440) y 4,53 % (2356) del ancho porque el contenido de 2 líneas pasaba del min-height; sin relleno vertical mide 4,3 % como la diapositiva 1 (ancho sin cambio) */
@media (min-width:1100px){.heroe.heroe--portada .boton--grande{padding-block:0}}