/* Marbella Maison · portada «Maison» (25-10-2026)
   Lujo francés y belga, callado: lino y piedra, su topo (#ABA598, la franja de su web) como la gran superficie
   (la valoración), texto carbón. Noto Serif Display fina, de alto contraste, que acompaña a las mayúsculas romanas
   de su logo, y Jost ligera (la sans geométrica de las revistas de interiores francesas).
   v2 (26-10): la portada a pantalla completa con sus imágenes, que pasan despacio, y el buscador dentro; sus casas
   en una rejilla ordenada (2 grandes y 3 + 3). La v1 está en maison-v1.css.
   Movimiento: solo opacity y transform, lento (cubic-bezier(.16,1,.3,1), 2,2-3,2 s), salvo el momento firma: el
   monograma MM que se dibuja (stroke-dashoffset). */

@font-face { font-family: 'Noto Serif Display'; src: url('../fonts/noto-serif-display-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --lino: #F2EDE4;
  --piedra: #E6E0D5;
  --topo: #ABA598;        /* su franja de la web: la gran superficie. Carbón encima: 5,8:1 */
  --topo-tinta: #988F7C;  /* el topo de su logo: solo líneas, nunca texto */
  --topo-texto: #6B6252;  /* topo oscurecido para texto pequeño sobre lino: 5,1:1 */
  --carbon: #2B2A27;      /* sobre lino: 12,3:1 */
  --linea: rgba(43, 42, 39, .2);
  --serif: 'Noto Serif Display', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --margen: clamp(16px, 4.6vw, 76px);
  --hueco: clamp(16px, 1.8vw, 28px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --barra: 84px;
  --busca-alto: 88px;
  --busca-abajo: clamp(20px, 3.6vh, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--barra); }
body { margin: 0; background: var(--lino); color: var(--carbon); font: 380 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3, .portada__lema, .agencia__entrada { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--carbon); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; 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: 12px; top: -60px; z-index: 50; padding: 12px 18px; background: var(--carbon); color: var(--lino); font: 500 13px/1 var(--sans); }
.saltar:focus { top: 12px; }

/* Etiquetas y titulares */
.etiqueta { font: 450 12px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--topo-texto); }
.t2 { font: 300 clamp(36px, 1.4rem + 2.4vw, 64px)/1.04 var(--serif); letter-spacing: -.012em; margin-top: 18px; }

/* Botones: rectos, nunca el radio «blando» */
.boton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 0 24px; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; overflow: hidden; isolation: isolate; }
.boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 1.4s var(--ease); }
.boton:hover svg { transform: translateX(5px); }
.boton::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.2s var(--ease); }
.boton:hover::before { opacity: 1; }
.boton--carbon { background: var(--carbon); color: var(--lino); }
.boton--carbon::before { background: #45433E; }
.boton--topo { background: var(--topo); color: var(--carbon); }
.boton--topo::before { background: #B8B2A5; }

/* 1 · Cabecera: barra de lino a todo el ancho, su logo suelto */
.barra { position: sticky; top: 0; z-index: 20; height: var(--barra); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--margen); background: var(--lino); }
.barra::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea); opacity: 0; transition: opacity 1.6s var(--ease); }
.barra.baja::after { opacity: 1; }
.barra__logo { flex-shrink: 0; }
.barra__logo img { height: 58px; width: auto; }
.barra__der { display: flex; align-items: center; gap: clamp(6px, 1.7vw, 30px); }
.idioma { display: flex; }
.idioma button { min-width: 34px; min-height: 40px; padding: 0 5px; font: 450 12px/1 var(--sans); letter-spacing: .16em; color: var(--topo-texto); }
.idioma button[aria-pressed="true"] { color: var(--carbon); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.barra__accion { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; font: 450 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.barra__accion svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.barra__valorar { min-height: 46px; }

/* 2 · Portada: sus imágenes a pantalla completa (las de la portada de su web). Pasan despacio: fundido de 2,4 s y,
   mientras se ven, un acercamiento de 1 a 1,06. Su lema y el buscador encima, con un degradado de carbón solo abajo. */
.portada { position: relative; height: calc(100svh - var(--barra)); min-height: 600px; max-height: 1080px; overflow: hidden; background: var(--piedra); color: var(--lino); }
.portada__vista { position: absolute; inset: 0; overflow: hidden; }
.portada__pase { position: absolute; inset: 0; overflow: hidden; }
.portada__img { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s ease-in-out; }
.portada__img img { width: 100%; height: 100%; object-fit: cover; }
/* la primera se ve desde el primer pintado (es el LCP); solo se oculta cuando ya pasan */
.portada__img:first-child, .portada__img.activa, .portada__img.saliendo { opacity: 1; }
.portada__img.activa { z-index: 2; }
.portada__img.saliendo { z-index: 1; }
.pasando .portada__img:first-child:not(.activa):not(.saliendo) { opacity: 0; }
.js .portada__img.activa img, .js .portada__img.saliendo img { transform: scale(1.06); }
.js .portada__img.activa img { transition: transform 7s linear; }
.portada__vista::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to top, rgba(24, 23, 21, .76) 0, rgba(24, 23, 21, .6) 24%, rgba(24, 23, 21, .26) 46%, rgba(24, 23, 21, 0) 64%),
    radial-gradient(110% 64% at 0 100%, rgba(24, 23, 21, .34), rgba(24, 23, 21, 0) 64%);
}
.portada__texto { position: absolute; z-index: 4; left: var(--margen); right: var(--margen); bottom: calc(var(--busca-abajo) + var(--busca-alto) + clamp(30px, 4.6vh, 56px)); isolation: isolate; }
/* velo suave solo detrás del texto, para que el antetítulo pequeño se lea también sobre las imágenes claras */
.portada__texto::before { content: ''; position: absolute; z-index: -1; left: calc(-1 * var(--margen)); top: -80%; bottom: -70%; width: min(66vw, 1040px); pointer-events: none; background: radial-gradient(ellipse 60% 46% at 34% 50%, rgba(24, 23, 21, .6), rgba(24, 23, 21, .32) 50%, rgba(24, 23, 21, 0) 100%); }   /* se apaga dentro de su caja: sin bordes */
.portada__ante { display: flex; width: fit-content; align-items: center; gap: 14px; margin-bottom: clamp(14px, 2.2vh, 24px); font: 450 12px/1.2 var(--sans); letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(24, 23, 21, .35); }
.portada__ante::before { content: ''; width: 40px; height: 1px; background: currentColor; }
/* corte natural: «Properties on the / Costa del Sol» («Propiedades en la / …»), por eso sin balance */
.portada__lema { max-width: 9em; text-wrap: wrap; font: 300 clamp(44px, 5.4vw, 84px)/1.02 var(--serif); letter-spacing: -.015em; text-shadow: 0 1px 28px rgba(24, 23, 21, .22); }
.portada__cuenta { position: absolute; z-index: 4; right: var(--margen); bottom: calc(var(--busca-abajo) + var(--busca-alto) / 2 - 6px); display: flex; align-items: center; gap: 16px; font: 450 12px/1 var(--sans); letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.portada__progreso { position: relative; display: block; width: 96px; height: 1px; overflow: hidden; background: rgba(242, 237, 228, .38); }
.portada__progreso i { position: absolute; inset: 0; display: block; background: var(--lino); transform: scaleX(0); transform-origin: 0 50%; }
.portada__progreso i.corre { transform: scaleX(1); transition: transform 7s linear; }

/* 3 · El buscador, dentro de la portada: una barra de lino (zona, precio máximo y «See N homes») */
.busca { --pad: clamp(20px, 2.2vw, 32px); position: absolute; z-index: 4; left: var(--margen); bottom: var(--busca-abajo); width: min(920px, calc(100% - 2 * var(--margen))); min-height: var(--busca-alto); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; padding: 14px 14px 14px var(--pad); background: var(--lino); color: var(--carbon); }
.busca__campo { position: relative; display: grid; gap: 6px; padding-right: var(--pad); }
.busca__campo + .busca__campo { padding-left: var(--pad); border-left: 1px solid var(--linea); }
.busca__nombre { font: 400 11px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--topo-texto); }
.busca__campo::after { content: ''; position: absolute; right: calc(var(--pad) + 4px); bottom: 13px; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.busca select { width: 100%; min-height: 34px; padding: 0 24px 0 0; border: 0; border-radius: 0; background: transparent; font: 300 22px/1.2 var(--serif); -webkit-appearance: none; appearance: none; cursor: pointer; }
.busca select:focus-visible { outline: 2px solid var(--carbon); outline-offset: 4px; }
.busca option { font: 400 16px var(--sans); color: var(--carbon); background: var(--lino); }
.busca__ir { min-height: 60px; padding: 0 28px; }

/* 4 · Sus casas: rejilla ordenada. Las 2 más caras en grande y las otras 6 de 3 en 3, por precio; todas 3:2 y con el
   mismo pie, alineadas a la rejilla, sin desfases. */
.casas { padding: clamp(64px, 8vw, 130px) var(--margen) clamp(80px, 10vw, 160px); outline: none; }
.casas__cab { max-width: 640px; margin-bottom: clamp(40px, 5vw, 72px); }
.casas__lista { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 5vw, 76px) var(--hueco); }
.casa { grid-column: span 4; min-width: 0; }
.casa--grande { grid-column: span 6; }
.casa__foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--piedra); }
.casa__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 2.8s var(--ease); }
.casa__foto:hover img { transform: scale(1.035); }
.casa__pie { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; row-gap: 6px; align-items: baseline; padding-top: 18px; }
.casa__zona { font: 300 clamp(22px, 1rem + .6vw, 28px)/1.15 var(--serif); letter-spacing: -.005em; }
.casa__precio { font: 400 16px/1.2 var(--sans); letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.casa__datos { grid-column: 1 / -1; font: 380 14px/1.5 var(--sans); letter-spacing: .02em; }
/* dentro de cada fila, entran una detrás de otra */
.js .casa:nth-child(2), .js .casa:nth-child(4), .js .casa:nth-child(7) { transition-delay: .14s; }
.js .casa:nth-child(5), .js .casa:nth-child(8) { transition-delay: .28s; }

/* 5 · ¿Vendes tu casa? Su topo como la gran superficie */
.vender { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: start; padding: clamp(80px, 10vw, 150px) var(--margen) clamp(80px, 8.5vw, 124px); background: var(--topo); color: var(--carbon); outline: none; }
.vender .etiqueta { color: var(--carbon); }
.vender__lado { grid-column: 1 / 6; }
.vender__form { grid-column: 7 / -1; align-self: center; }
.vender__entrada { max-width: 30ch; margin-top: 22px; font-size: 18px; }
.monograma { width: clamp(96px, 13vw, 196px); height: auto; margin-bottom: clamp(36px, 4vw, 56px); overflow: visible; }
.monograma path { fill: none; stroke: var(--lino); stroke-width: 1.5; stroke-linejoin: miter; }
/* Momento firma, el único de la página: el monograma se dibuja en línea fina (stroke-dashoffset, no transform ni
   opacity, porque es un trazo que avanza). Pinta solo este SVG pequeño, sin tocar el layout. */
.js .monograma path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s var(--ease); }
.js .monograma.dibuja path { stroke-dashoffset: 0; }
.js .monograma.dibuja path:nth-child(2) { transition-delay: .35s; }
.js .monograma.dibuja path:nth-child(3) { transition-delay: .55s; }
.js .monograma.dibuja path:nth-child(4) { transition-delay: .85s; }
.js .monograma.dibuja path:nth-child(5) { transition-delay: .85s; }

/* La valoración en 3 pasos (valoracion-ui.js) */
.val { display: grid; gap: 26px; }
.val__progreso { font: 450 12px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.val__paso { border: 0; margin: 0; padding: 0; min-width: 0; }
.val__frase { font: 300 clamp(26px, 1rem + 1.6vw, 40px)/1.5 var(--serif); overflow-wrap: anywhere; }
.campo { position: relative; display: inline-block; max-width: 100%; }
.campo__medida { position: absolute; left: 0; top: 0; visibility: hidden; white-space: pre; font: 400 1em/1.2 var(--serif); }
.val__frase select, .val__frase input { width: auto; max-width: 100%; margin: 0; padding: 0 .75em 3px 0; border: 0; border-bottom: 1px solid var(--carbon); border-radius: 0; background: transparent; color: inherit; font: 400 1em/1.2 var(--serif); -webkit-appearance: none; appearance: none; cursor: pointer; }
.val__frase input { width: 3.6em; padding-right: 0; cursor: text; }
.val__frase select:focus-visible, .val__frase input:focus-visible { outline: none; box-shadow: 0 2px 0 var(--carbon); }
.val__frase input::placeholder { color: rgba(43, 42, 39, .55); }
.val__frase option, .val__frase optgroup { color: var(--carbon); background: var(--lino); font: 400 16px var(--sans); }
.campo:not(.campo--m2)::after { content: ''; position: absolute; right: .18em; top: 50%; width: .2em; height: .2em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.val__resumen { font: 300 24px/1.4 var(--serif); }
.val__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.val__campo { display: grid; gap: 8px; font: 450 11px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.val__campo input { min-height: 50px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--carbon); border-radius: 0; background: transparent; font: 380 18px var(--sans); letter-spacing: 0; text-transform: none; }
.val__aviso { margin-top: 16px; font-size: 14px; }
.val__error { font: 450 15px/1.4 var(--sans); }
.val__error:empty { display: none; }
.val__acciones { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.val__atras { min-height: 44px; font: 450 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.val__resultado { display: grid; gap: 16px; outline: none; }
.val__resultado:empty { display: none; }
.val__etiqueta { font: 450 12px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.val__rango { font: 300 clamp(38px, 1.2rem + 3.6vw, 72px)/1.02 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.val__rango--texto { font-size: clamp(30px, 1rem + 2vw, 44px); }
.val__agente { font: 300 24px/1.35 var(--serif); }
.val__nota { font-size: 14px; }
.val__resultado .pill { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 26px; background: var(--carbon); color: var(--lino); font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.pill__arrow { width: 16px; height: 1px; background: currentColor; }

/* 6 · La agencia: su texto, su equipo */
.agencia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); align-items: start; padding: clamp(80px, 10vw, 160px) var(--margen); }
.agencia__texto { grid-column: 1 / 8; }
.agencia__entrada { margin: 26px 0 34px; font: 300 clamp(24px, .9rem + 1.3vw, 36px)/1.25 var(--serif); letter-spacing: -.005em; }
.agencia__texto p:not(.etiqueta):not(.agencia__entrada) { max-width: 62ch; }
.agencia__texto p + p:not(.agencia__entrada) { margin-top: 18px; }
.agencia__equipo { grid-column: 9 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--hueco); margin-top: clamp(0px, 8vw, 120px); }
.persona img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--piedra); }
.persona:nth-child(2) { margin-top: 56px; }
.persona figcaption { display: grid; gap: 4px; padding-top: 14px; }
.persona b { font: 300 21px/1.2 var(--serif); }
.persona span { font: 400 12px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--topo-texto); }

/* Pie: piedra, contacto */
.pie { padding: clamp(64px, 8vw, 110px) var(--margen) 36px; background: var(--piedra); }
.pie__arriba { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--linea); }
.pie__logo { height: 92px; width: auto; }
.pie__fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--hueco); padding: 40px 0; font-size: 15px; line-height: 1.7; }
.pie__fila .etiqueta { margin-bottom: 10px; }
.pie__fila a, .pie__legal a { display: inline-block; min-height: 26px; padding-top: 1px; }
.pie__fila a { text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 4px; }
.pie__abajo { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--topo-texto); }
.pie__legal { display: flex; gap: 22px; }
.nw { white-space: nowrap; }

/* Apariciones lentas (2,2 s) */
.js [data-entra] { opacity: 0; transform: translateY(26px); transition: opacity 2.2s var(--ease), transform 2.2s var(--ease); }
.js [data-entra].ok { opacity: 1; transform: none; }

/* Pantallas medianas: «01 / 05» sube a la altura del lema si no cabe al lado de la barra */
@media (min-width: 761px) and (max-width: 1180px) {
  .portada__cuenta { bottom: calc(var(--busca-abajo) + var(--busca-alto) + clamp(30px, 4.6vh, 56px) + 8px); }
}

/* Móvil: el mismo diseño, a una columna */
@media (max-width: 760px) {
  :root { --barra: 66px; }
  body { font-size: 16px; }
  .barra { gap: 8px; }
  .barra__logo img { height: 44px; }
  .barra__der { gap: 4px; }
  .barra__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra__accion { justify-content: center; min-width: 40px; }
  .idioma button { min-width: 30px; padding: 0 3px; }
  .barra__valorar { min-height: 40px; padding: 0 10px; font-size: 10.5px; letter-spacing: .1em; }   /* «VALORAR MI CASA» cabe a 390 */
  /* portada: la imagen arriba con el lema encima; el buscador justo debajo, en lino */
  .portada { height: auto; min-height: 0; max-height: none; }
  .portada__vista { position: relative; height: calc(100svh - var(--barra) - 196px); min-height: 380px; max-height: 640px; }
  .portada__texto { left: 16px; right: 16px; bottom: 24px; }
  .portada__texto::before { top: -60%; bottom: -24px; }   /* el velo acaba en el borde de la imagen: sin mancha sobre el lino */
  .portada__ante { margin-bottom: 12px; font-size: 11px; letter-spacing: .26em; }
  .portada__ante::before { width: 28px; }
  .portada__lema { font-size: clamp(34px, 9.6vw, 42px); }
  .portada__cuenta { display: none; }
  .busca { position: static; width: auto; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; row-gap: 18px; padding: 20px 16px 28px; }
  .busca__campo, .busca__campo + .busca__campo { padding: 0 0 10px; border-left: 0; border-bottom: 1px solid var(--carbon); }
  .busca__campo::after { right: 4px; bottom: 21px; }
  .busca select { font-size: 19px; }
  .busca__ir { grid-column: 1 / -1; min-height: 56px; }
  .casas { padding: 64px 16px 88px; }
  .casas__cab { margin-bottom: 36px; }
  .casas__lista { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .casa, .casa--grande { grid-column: auto; }
  .js .casa:nth-child(n) { transition-delay: 0s; }
  .casa__pie { padding-top: 14px; }
  .vender { display: block; padding: 76px 16px 84px; }
  .monograma { width: 92px; margin-bottom: 30px; }
  .monograma path { stroke-width: 2.2; }
  .vender__form { margin-top: 40px; }
  .val__datos { grid-template-columns: 1fr; }
  .agencia { display: block; padding: 76px 16px 84px; }
  .agencia__equipo { margin-top: 48px; }
  .persona:nth-child(2) { margin-top: 40px; }
  .persona b { font-size: 19px; }
  .persona span { font-size: 11px; }
  .pie { padding: 60px 16px 32px; }
  .pie__logo { height: 70px; }
  .pie__fila { grid-template-columns: 1fr 1fr; gap: 28px 18px; font-size: 14px; }
  .pie__abajo { display: grid; }
}
@media (max-width: 380px) {
  .barra__logo img { height: 40px; }
  .barra__der { gap: 2px; }
  .idioma button { min-width: 26px; padding: 0 2px; }
  .barra__accion { min-width: 34px; }
  .barra__valorar { padding: 0 9px; font-size: 10px; letter-spacing: .08em; }
  .pie__fila { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portada__img, .js .portada__img.activa img { transition: none; }
  .js .portada__img.activa img, .js .portada__img.saliendo img { transform: none; }
  .portada__progreso { display: none; }
  .js [data-entra] { opacity: 1; transform: none; transition: none; }
  .js .monograma path { stroke-dashoffset: 0; transition: none; }
  .casa__foto img, .boton svg, .boton::before, .barra::after { transition: none; }
}