/* ==========================================================================
   Marujadel98 · estilos
   Colores y tipografías de la marca. Móvil: por debajo de 920 px.
   Orden: base → cabecera → portada → pie → /links → legales → herramientas de color.
   ========================================================================== */

/* ---------- Tipografías (alojadas en el propio servidor) ---------- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/playfair-display-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/dm-sans-italic-latin.woff2") format("woff2");
}

/* ---------- Variables ---------- */
:root {
  --crema: #fbf9f7;
  --beige: #ece8e5;
  --oliva: #556b2f;
  --marron: #42281a;
  --tinta: #1d1e20;
  --rosa: #f4bace;
  --amarillo: #e7e495;
  --dorado: #f0c850;
  --blanco: #ffffff;
  --error: #b3261e;
  --texto-suave: #6b5a4f;                 /* texto secundario (6,2:1 sobre blanco) */
  --linea: rgba(66, 40, 26, 0.13);        /* separadores */
  --borde: #e2dcd6;                       /* borde de opciones, chips y tarjetas */
  --borde-campo: #958779;                 /* borde de los campos de texto (3,3:1, se ve bien) */
  --oliva-claro: #eef2e6;                 /* fondo de la opción elegida (y «Verde suave» de las secciones de la portada) */
  --rosa-suave: #fceaf0;                  /* «Rosa suave» de las secciones de la portada (el rosa al 30 % sobre blanco) */
  --amarillo-suave: #f8f7df;              /* «Amarillo suave» de las secciones de la portada (el amarillo al 30 %) */
  --radio-s: 8px;                         /* botones, campos y muestras pequeñas */
  --radio-m: 12px;                        /* chips, opciones y tarjetas pequeñas */
  --radio-l: 16px;                        /* cajas y paneles */

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ancho: 1224px;
  --margen: 31px;
  --seccion: clamp(72px, 9vw, 120px);
  --radio: 16px;
  --radio-grande: 24px;
  --sombra-boton: 0 4px 16px rgba(0, 0, 0, 0.12);
  --sombra-boton-hover: 0 6px 20px rgba(0, 0, 0, 0.16);
  --sombra-tarjeta: 0 1px 2px rgba(66, 40, 26, 0.06), 0 14px 32px -14px rgba(66, 40, 26, 0.22);
  --alto-cabecera: 77px;                  /* lo que ocupa la cabecera fija (main.js lo pone con el alto real) */
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 12px);   /* los enlaces a #sobre-mi, #calculadora… no quedan bajo la cabecera fija */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--crema);
  color: var(--marron);
  font: 400 16px/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p, blockquote, figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
a { color: inherit; }
button, input, textarea { font: inherit; }

:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; }

.sr-only {
  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: 16px; top: -60px; z-index: 100;
  padding: 8px 16px; border-radius: 8px;
  background: var(--oliva); color: #fff; text-decoration: none;
}
.saltar:focus { top: 16px; }

.contenedor { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; }

.titulo-grande {
  font: 400 clamp(40px, 3.9vw, 56px)/1.3 var(--serif);
  color: var(--marron);
}
.titulo-grande--centrado { text-align: center; }

/* Texto pequeño en mayúsculas sobre los títulos */
.antetitulo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  font: 600 13px/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
}
.antetitulo::before { content: ""; flex: none; width: 28px; height: 2px; border-radius: 2px; background: var(--rosa); }

/* Secciones de la portada */
.seccion { padding: var(--seccion) 0; }
.seccion__cabecera { max-width: 680px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.seccion__cabecera .antetitulo { justify-content: center; }
.seccion__titulo { font: 400 clamp(32px, 3.6vw, 48px)/1.2 var(--serif); color: var(--marron); text-wrap: balance; }
.seccion__intro { margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--texto-suave); }

/* Hueco para una imagen que todavía no se ha subido desde el panel */
.hueco-imagen {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 100%; min-height: 180px;
  padding: 24px;
  border: 1.5px dashed rgba(66, 40, 26, 0.22);
  border-radius: var(--radio-grande);
  background-color: var(--beige);
  background-image: repeating-linear-gradient(135deg, rgba(66, 40, 26, 0.035) 0 12px, transparent 12px 24px);
  color: var(--texto-suave);
  text-align: center;
}
.hueco-imagen svg { opacity: 0.7; }
.hueco-imagen__texto { max-width: 260px; font-size: 14px; line-height: 1.45; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px;
  border: 0; border-radius: 8px;
  font: 400 15px/1.3 var(--sans);
  text-align: center; text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sombra-boton);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.boton svg { flex: none; }
.boton--oliva { background: var(--oliva); color: #fff; }
.boton--oliva:hover { background: var(--tinta); color: var(--crema); box-shadow: var(--sombra-boton-hover); }
.boton--rosa { background: var(--rosa); color: var(--tinta); }
.boton--rosa:hover { background: #eea5bf; box-shadow: var(--sombra-boton-hover); }
.boton--contorno { background: transparent; color: var(--oliva); box-shadow: inset 0 0 0 1.5px var(--oliva); }
.boton--contorno:hover { background: var(--oliva); color: #fff; }
.boton--crema { background: var(--crema); color: var(--oliva); }
.boton--crema:hover { background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-boton-hover); }
.boton--grande { min-height: 56px; padding: 0 26px; font-size: 16px; font-weight: 500; border-radius: 10px; }

/* Iconos dibujados por Maruja (icono_dibujado() en includes/funciones.php): el trazo toma el color del texto
   y los brillos claros (data-luz) el de --icono-luz; en el botón verde, el del botón (se ven «huecos») */
.icono-dibujo [data-luz] { fill: var(--icono-luz, #fff); }
.icono-dibujo [data-luz][stroke] { stroke: var(--icono-luz, #fff); }
.boton--oliva { --icono-luz: var(--oliva); }
.boton--oliva:hover { --icono-luz: var(--tinta); }
.boton:disabled { opacity: 0.6; cursor: wait; }

/* ==========================================================================
   Cabecera
   ========================================================================== */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--crema); border-bottom: 1px solid var(--linea); transition: box-shadow 0.2s; }
/* Fija arriba al bajar por la página (la franja de «Modo construcción», si sale, se va con el scroll); con una sombra suave al despegarse */
.cabecera--fija { box-shadow: 0 10px 22px -16px rgba(66, 40, 26, 0.4); }
.cabecera__interior {
  width: min(var(--ancho), 100% - 2 * var(--margen));
  min-height: 76px;
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo {
  font: 700 26px/1.3 var(--serif);
  color: var(--oliva);
  text-decoration: none;
}
.menu { display: flex; align-items: center; gap: 36px; }
.menu__lista { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.menu__enlace {
  font: 500 15px/1.5 var(--sans);
  color: var(--marron);
  text-decoration: none;
  text-underline-offset: 8px;
  transition: color 0.2s;
}
.menu__enlace:hover { color: var(--oliva); }
.menu__enlace[aria-current] {
  color: var(--oliva);
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-decoration-thickness: 2px;
}
.menu__social {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--oliva);
  box-shadow: inset 0 0 0 1.5px var(--oliva);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.menu__social:hover { background: var(--oliva); color: var(--crema); }
.menu__social svg { width: 18px; height: 18px; }
.menu__social-texto { display: none; }
.menu-boton { display: none; }

/* ==========================================================================
   Portada · Hero
   ========================================================================== */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 104px); }
.hero__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__titulo { font: 400 clamp(40px, 4.9vw, 64px)/1.12 var(--serif); letter-spacing: -0.01em; color: var(--marron); text-wrap: balance; }
.hero__titulo strong { font-weight: 700; color: var(--oliva); }
.hero__subtitulo { max-width: 520px; margin-top: 24px; font-size: 18px; line-height: 1.65; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__nota { margin-top: 16px; font-size: 14px; color: var(--texto-suave); }
.hero__imagen { position: relative; }
.hero__imagen img,
.hero__imagen .hueco-imagen { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-grande); }
/* Etiqueta sobre la foto que lleva a una guía («La regla 60/30/10 →») */
.hero__etiqueta {
  position: absolute; left: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 40px); min-height: 44px; padding: 0 18px 0 16px;
  border-radius: 999px;
  background: rgba(251, 249, 247, 0.94);
  box-shadow: 0 2px 6px rgba(66, 40, 26, 0.10), 0 10px 24px -10px rgba(66, 40, 26, 0.35);
  font: 500 15px/1.25 var(--sans); color: var(--marron);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.hero__etiqueta::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #c4785b; box-shadow: 0 0 0 3px rgba(196, 120, 91, 0.22); }
.hero__etiqueta-flecha { color: var(--oliva); transition: transform 0.2s; }
.hero__etiqueta:hover { background: var(--blanco); color: var(--oliva); box-shadow: 0 2px 6px rgba(66, 40, 26, 0.12), 0 14px 28px -10px rgba(66, 40, 26, 0.4); }
.hero__etiqueta:hover .hero__etiqueta-flecha { transform: translateX(3px); }
.hero__etiqueta:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; background: var(--blanco); }

/* ==========================================================================
   Portada · Herramientas
   ========================================================================== */
.herramientas { background: var(--blanco); }
.herramientas__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.herramienta {
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  background: var(--crema);
}
.herramienta__imagen img,
.herramienta__imagen .hueco-imagen { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 0; border-radius: 0; }
.herramienta__imagen .hueco-imagen { border-bottom: 1px solid var(--linea); }
.herramienta__cuerpo { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 36px); }
.herramienta__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--rosa);
  color: var(--marron);
}
.herramienta:nth-child(2) .herramienta__icono { background: var(--amarillo); }
.herramienta__icono .icono-dibujo,
.guia-cta__icono .icono-dibujo { width: 30px; height: 30px; }
.herramienta__titulo { margin-top: 18px; font: 400 clamp(26px, 2.4vw, 32px)/1.2 var(--serif); color: var(--marron); }
.herramienta__texto { flex: 1 0 auto; max-width: 46ch; margin-top: 10px; color: var(--texto-suave); }
.herramienta__boton { margin-top: 28px; }

/* ==========================================================================
   Portada · Sobre mí
   ========================================================================== */
.sobre-mi__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.sobre-mi__imagen .hueco-imagen { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radio-grande); }
/* La ilustración (fondo transparente) se ve entera, sin recortes ni esquinas */
.sobre-mi__imagen img { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.sobre-mi__texto { max-width: 620px; }
.sobre-mi__texto p { margin-top: 18px; font-size: 17px; line-height: 1.75; }
.sobre-mi__texto .seccion__titulo + p { margin-top: 24px; }

/* ==========================================================================
   Portada · Banda de Instagram
   ========================================================================== */
.banda-instagram { padding: clamp(56px, 7vw, 88px) 0; background: var(--oliva); color: var(--crema); }
.banda-instagram__interior { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.banda-instagram__texto { max-width: 640px; }
.banda-instagram__titulo { font: 400 clamp(28px, 3vw, 40px)/1.2 var(--serif); color: var(--crema); }
.banda-instagram__texto p { margin-top: 12px; font-size: 17px; line-height: 1.65; opacity: 0.92; }
.banda-instagram :focus-visible { outline-color: var(--crema); }

/* ==========================================================================
   Portada · Color de fondo de cada sección (Panel → Portada → «Color de fondo»; index.php pone la clase)
   Textos sobre los fondos claros: todos pasan AA (el más justo, el verde de los antetítulos sobre beige: 4,9:1).
   Sobre el verde oliva (fondo--oscuro) todo se pone claro: crema sobre oliva, 5,7:1.
   ========================================================================== */
.fondo--crema { background: var(--crema); }
.fondo--blanco { background: var(--blanco); }
.fondo--beige { background: var(--beige); }
.fondo--rosa { background: var(--rosa-suave); }
.fondo--verde-suave { background: var(--oliva-claro); }
.fondo--amarillo { background: var(--amarillo-suave); }
.fondo--verde { background: var(--oliva); }
/* Dos secciones seguidas con el mismo fondo: sin el hueco doble entre las dos */
.seccion--seguida { padding-top: 0; }
/* Sobre el rosa suave, la raya rosa del antetítulo casi no se ve: un rosa algo más intenso */
.fondo--rosa .antetitulo::before { background: #e98fb0; }

/* Las tarjetas: las de las herramientas son crema sobre blanco y blancas sobre cualquier otro fondo;
   las de las guías, blancas, y crema sobre blanco (como en «Más guías») */
.herramientas:not(.fondo--blanco) .herramienta { background: var(--blanco); }
.guias-portada.fondo--blanco .guia-tarjeta { background: var(--crema); }

/* Banda de Instagram con un fondo claro: texto oscuro y el botón en verde */
.banda-instagram:not(.fondo--oscuro) { color: var(--marron); }
.banda-instagram:not(.fondo--oscuro) .banda-instagram__titulo { color: var(--marron); }
.banda-instagram:not(.fondo--oscuro) .banda-instagram__texto p { opacity: 1; }
.banda-instagram:not(.fondo--oscuro) .boton--crema { background: var(--oliva); color: #fff; }
.banda-instagram:not(.fondo--oscuro) .boton--crema:hover { background: var(--tinta); color: var(--crema); }
.banda-instagram:not(.fondo--oscuro) :focus-visible { outline-color: var(--oliva); }

/* Fondo oscuro (verde oliva): títulos, textos, antetítulo con su raya, enlaces y botones, en claro.
   Las tarjetas de dentro siguen blancas (o crema) con su texto oscuro de siempre */
.fondo--oscuro { color: var(--crema); }
.fondo--oscuro .seccion__titulo,
.fondo--oscuro .seccion__intro,
.fondo--oscuro .antetitulo,
.fondo--oscuro .enlace-flecha { color: var(--crema); }
.fondo--oscuro .antetitulo::before { background: var(--crema); }
.fondo--oscuro .enlace-flecha { text-decoration: underline; text-decoration-thickness: 1px; }
.fondo--oscuro :focus-visible { outline-color: var(--crema); }
.fondo--oscuro .guia-tarjeta:has(.guia-tarjeta__enlace:focus-visible) { outline-color: var(--crema); }
.fondo--oscuro .herramienta,
.fondo--oscuro .guia-tarjeta { color: var(--marron); }
.fondo--oscuro .herramienta :focus-visible { outline-color: var(--oliva); }
.fondo--oscuro .boton--oliva:not(.herramienta__boton) { background: var(--crema); color: var(--oliva); --icono-luz: var(--crema); }
.fondo--oscuro .boton--oliva:not(.herramienta__boton):hover { background: var(--blanco); color: var(--tinta); --icono-luz: var(--blanco); }
.fondo--oscuro .boton--contorno { color: var(--crema); box-shadow: inset 0 0 0 1.5px var(--crema); }
.fondo--oscuro .boton--contorno:hover { background: var(--crema); color: var(--oliva); }
.fondo--oscuro .hueco-imagen { color: var(--texto-suave); }

/* ==========================================================================
   Pie
   ========================================================================== */
.pie { padding-top: clamp(48px, 6vw, 72px); background: var(--beige); color: var(--marron); font-size: 15px; line-height: 1.6; }
.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px 64px;
  padding-bottom: clamp(36px, 5vw, 56px);
}
.pie__marca { font: 700 26px/1.2 var(--serif); color: var(--oliva); text-decoration: none; }
.pie__lema { max-width: 380px; margin-top: 12px; color: var(--texto-suave); }
.pie__instagram {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px;
  font-weight: 500;
  color: var(--marron);
  text-decoration: none;
}
.pie__instagram svg { color: var(--oliva); }
.pie__instagram:hover span { text-decoration: underline; text-underline-offset: 4px; }
.pie__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.pie__titulo { margin-bottom: 14px; font: 600 12px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oliva); }
.pie__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pie__lista a,
.pie__base a { color: var(--marron); text-decoration: none; text-underline-offset: 4px; }
.pie__lista a:hover,
.pie__base a:hover { color: var(--oliva); text-decoration: underline; }
.pie__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 20px 0 28px;
  border-top: 1px solid var(--linea);
  font-size: 13px;
  color: var(--texto-suave);
}

/* ==========================================================================
   Links (página del perfil de Instagram)
   ========================================================================== */
.enlaces {
  display: flex; flex-direction: column;
  width: min(520px, 100% - 2 * var(--margen));
  margin: 0 auto;
  padding: 56px 0 32px;
}
.enlaces__cabecera { text-align: center; }
.enlaces__titulo { font: 700 32px/1.2 var(--serif); }
.enlaces__titulo a { color: var(--oliva); text-decoration: none; }
.enlaces__texto { max-width: 400px; margin: 10px auto 0; font-size: 16px; line-height: 1.55; color: var(--texto-suave); }
.enlaces__lista { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.boton-enlace {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: 14px 20px 14px 24px;
  border-radius: var(--radio);
  color: var(--marron);
  text-decoration: none;
  box-shadow: var(--sombra-tarjeta);
  transition: box-shadow 0.2s, transform 0.2s;
}
.boton-enlace:hover { transform: translateY(-2px); box-shadow: var(--sombra-boton-hover); }
.boton-enlace svg { flex: none; }
.boton-enlace__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.boton-enlace__titulo { font: 600 17px/1.3 var(--sans); }
.boton-enlace__descripcion { font-size: 14px; line-height: 1.4; opacity: 0.85; }
.boton-enlace--amarillo { background: var(--amarillo); }
.boton-enlace--rosa { background: var(--rosa); }
.boton-enlace--oliva { background: var(--oliva); color: var(--crema); }
.boton-enlace--blanco { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra-tarjeta); }
.enlaces__imagen { width: auto; height: 320px; margin: 40px auto 0; }
.enlaces__legal { margin-top: 28px; font-size: 13px; text-align: center; color: var(--texto-suave); }
.enlaces__legal a { color: inherit; text-underline-offset: 3px; }
/* Con la web en construcción: el título sin enlace y el mensaje en lugar de los botones que llevan a la web */
.enlaces__titulo span { color: var(--oliva); }
.enlaces__obras {
  margin-top: 28px; padding: 18px 22px;
  border-radius: var(--radio); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea);
  font-size: 15px; line-height: 1.55; text-align: center; color: var(--texto-suave);
}
.enlaces__obras-titulo { margin-bottom: 4px; font: 400 21px/1.35 var(--serif); color: var(--marron); text-wrap: balance; }

/* ==========================================================================
   Páginas legales
   ========================================================================== */
.legal {
  width: min(760px, 100% - 2 * var(--margen));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 8vw, 112px);
  font-size: 16px; line-height: 1.7;
  color: var(--tinta);
}
.legal__titulo { margin-bottom: 28px; font: 400 clamp(32px, 3.6vw, 44px)/1.2 var(--serif); color: var(--marron); }
.legal h2 { margin: 40px 0 12px; font: 400 26px/1.3 var(--serif); color: var(--marron); }
.legal h3 { margin: 32px 0 8px; font: 600 18px/1.4 var(--sans); color: var(--oliva); }
.legal p { margin: 0 0 12px; }
.legal ul,
.legal ol { margin: 8px 0 14px; padding-left: 28px; }
.legal li + li { margin-top: 6px; }
.legal strong { font-weight: 700; }
.legal a { color: var(--oliva); text-underline-offset: 3px; }

/* ---------- Avisos (404) ---------- */
.aviso-pagina {
  width: min(640px, 100% - 2 * var(--margen));
  margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) 0 clamp(80px, 10vw, 128px);
  text-align: center;
}
.aviso-pagina .antetitulo { justify-content: center; }
.aviso-pagina p { margin-top: 20px; }
.aviso-pagina .antetitulo { margin-top: 0; }
.aviso-pagina__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
/* Maruja llevándose la mano a la cara, de pie sobre una raya rosa (su corte recto apoyado en la raya), encima de «Error 404» */
.aviso-pagina__maruja { width: 240px; max-width: 100%; margin: 0 auto 22px; border-bottom: 2px solid var(--rosa); line-height: 0; }
.aviso-pagina__ilustracion { display: block; width: 160px; height: auto; margin: 0 auto; }
.aviso-pagina .antetitulo::before { content: none; }   /* la raya rosa ya está encima */

/* ==========================================================================
   Móvil (menos de 920 px): cabecera, portada, pie, links y legales
   ========================================================================== */
@media (max-width: 919px) {
  /* Cabecera */
  /* Más baja en el móvil: va fija arriba y así deja más sitio a la página */
  :root { --alto-cabecera: 57px; }
  .cabecera__interior { min-height: 56px; }
  .logo { font-size: 24px; }
  .menu-boton {
    display: inline-flex; flex-direction: column; justify-content: space-between;
    width: 44px; height: 44px; margin-right: -10px; padding: 13px 10px;
    border: 0; background: none; cursor: pointer;
  }
  .no-js .menu-boton { display: none; }
  .menu-boton span {
    display: block; height: 2px; border-radius: 2px;
    background: var(--oliva);
    transition: transform 0.25s, opacity 0.25s;
  }
  .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .js .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px var(--margen) 24px;
    border-bottom: 1px solid var(--linea);
    background: var(--crema);
    box-shadow: 0 18px 24px -18px rgba(66, 40, 26, 0.25);
  }
  .js .menu.abierto { display: flex; }
  .js .menu__lista { flex-direction: column; gap: 0; }
  .js .menu__enlace { display: block; padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: 17px; }
  .js .menu__social { align-self: flex-start; width: auto; height: 44px; margin-top: 20px; padding: 0 18px; border-radius: 999px; }
  .js .menu__social-texto { display: inline; font: 500 15px/1 var(--sans); }
  .no-js .cabecera { position: relative; }   /* sin JavaScript el menú va abierto debajo del logo: muy alta para ir fija */
  .no-js .cabecera__interior { flex-wrap: wrap; padding: 14px 0; row-gap: 6px; }
  .no-js .menu { flex-wrap: wrap; gap: 8px 20px; }
  .no-js .menu__lista { flex-wrap: wrap; gap: 4px 20px; }

  /* Portada */
  .hero { padding: 40px 0 64px; }
  .hero__rejilla { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__titulo { font-size: clamp(34px, 9vw, 44px); }
  .hero__subtitulo { margin-top: 18px; font-size: 17px; }
  .hero__botones { margin-top: 28px; }
  .hero__imagen img,
  .hero__imagen .hueco-imagen { aspect-ratio: 4 / 3; border-radius: var(--radio); }
  .hero__etiqueta { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 0 16px 0 14px; font-size: 14px; }

  .herramientas__rejilla { grid-template-columns: minmax(0, 1fr); }
  .herramienta__cuerpo { padding: 24px 22px 28px; }

  .sobre-mi__rejilla { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sobre-mi__imagen { order: 2; }
  .sobre-mi__imagen .hueco-imagen { aspect-ratio: 1; border-radius: var(--radio); }
  .sobre-mi__imagen img { max-width: 300px; }
  .sobre-mi__texto p { font-size: 16px; }

  .banda-instagram__interior { flex-direction: column; align-items: flex-start; }

  /* Herramientas (título de sus páginas) */
  .titulo-grande { font-size: 32px; }

  /* Pie */
  .pie__rejilla { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pie__nav { gap: 24px; }
  .pie__base { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 32px; }

  /* Links */
  .enlaces { padding-top: 40px; }
  .enlaces__imagen { height: 260px; }

  /* Legales */
  .legal ul,
  .legal ol { padding-left: 22px; }
  /* 404 */
  .aviso-pagina__maruja { width: 200px; }
  .aviso-pagina__ilustracion { width: 130px; }
}

@media (max-width: 560px) {
  .hero__botones .boton { flex: 1 1 100%; }
  .banda-instagram .boton { width: 100%; }
}

@media (max-width: 380px) {
  :root { --margen: 20px; }
}

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

/* ==========================================================================
   Guías · /guias, /guias/{slug} y la franja de la portada
   Tarjeta: foto 3:2 o, si no hay foto, un bloque del color de la guía con su código
   (como una muestra de la carta). En el móvil, tarjetas en horizontal y compactas.
   ========================================================================== */
.enlace-flecha { font-weight: 500; color: var(--oliva); text-decoration: none; text-underline-offset: 4px; }
.enlace-flecha:hover { text-decoration: underline; }

/* Rejilla de tarjetas */
.guias-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.guia-tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  background: var(--blanco);
  transition: box-shadow 0.2s, transform 0.2s;
}
.guia-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-tarjeta); }
.guia-tarjeta:has(.guia-tarjeta__enlace:focus-visible) { outline: 2px solid var(--oliva); outline-offset: 3px; }
.guia-tarjeta__imagen img,
.guia-tarjeta__color { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.guia-tarjeta__color {
  display: flex; align-items: flex-end;
  padding: 14px 18px;
  background: var(--guia-color, var(--beige));
  color: var(--marron);
}
.guia-tarjeta__color--oscuro { color: var(--crema); }
.guia-tarjeta__codigo { font: 600 11.5px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.guia-tarjeta__cuerpo { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 22px 24px 24px; }
/* Tema de la guía (Pintura / Decoración), sobre el título */
.guia-tarjeta__categoria {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 8px;
  font: 600 11.5px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-suave);
}
.guia-tarjeta__categoria::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); }
.guia-tarjeta__categoria--decoracion::before { background: var(--oliva); }
.guia-tarjeta__titulo { font: 400 clamp(21px, 1.8vw, 24px)/1.25 var(--serif); color: var(--marron); text-wrap: balance; }
.guia-tarjeta__enlace { color: inherit; text-decoration: none; }
.guia-tarjeta__enlace:focus-visible { outline: none; }
/* Toda la tarjeta se puede pulsar */
.guia-tarjeta__enlace::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.guia-tarjeta__resumen { flex: 1 0 auto; margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--texto-suave); }
.guia-tarjeta__leer { margin-top: 18px; font-size: 15px; font-weight: 500; color: var(--oliva); }
.guia-tarjeta__flecha { display: inline-block; transition: transform 0.2s; }
.guia-tarjeta:hover .guia-tarjeta__flecha { transform: translateX(3px); }
.guia-tarjeta:hover .guia-tarjeta__titulo { color: var(--oliva); }

/* Portada: franja «Guías» (si «Sobre mí» tiene su mismo fondo, va pegada: ver .seccion--seguida) */
.guias-portada__todas { margin-top: clamp(28px, 3vw, 40px); text-align: center; }

/* Página /guias */
.guias { padding: 56px 0 88px; }
.guias__cabecera { max-width: 680px; margin: 0 auto; text-align: center; }
.guias__intro { margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--texto-suave); }
.guias .guias-rejilla { margin-top: clamp(36px, 5vw, 56px); }
/* Pestañas «Todas · Pintura · Decoración» (enlaces normales: funcionan sin JavaScript) */
.guias-filtro { margin-top: clamp(28px, 4vw, 40px); }
.guias-filtro__lista {
  display: flex; justify-content: center; gap: 4px;
  width: fit-content; max-width: 100%; margin: 0 auto; padding: 4px;
  border-radius: 999px; background: var(--beige); list-style: none;
}
.guias-filtro__enlace {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: 999px;
  font: 500 15px/1.2 var(--sans); color: var(--texto-suave); text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.guias-filtro__enlace:hover { color: var(--marron); }
.guias-filtro__enlace[aria-current="page"] { background: var(--blanco); color: var(--oliva); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.guias-filtro__enlace:focus-visible { outline: 2px solid var(--oliva); outline-offset: 2px; }
.guias-filtro__numero { font-size: 13px; font-weight: 600; opacity: 0.7; }
.guias-filtro + .guias-rejilla { margin-top: clamp(24px, 3vw, 36px); }
.guias__vacio { margin-top: 32px; text-align: center; }
.guias .nota-colores { margin-top: 48px; }

/* Página de una guía */
.guia-vista-previa { padding: 10px var(--margen); background: var(--amarillo); font-size: 14px; text-align: center; color: var(--tinta); }
.guia {
  width: min(680px, 100% - 2 * var(--margen));
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 7vw, 88px);
}
.migas ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--texto-suave); }
.migas li + li::before { content: "›"; margin: 0 8px; }
.migas a { color: inherit; text-underline-offset: 3px; }
.migas a:hover { color: var(--oliva); }
.guia__titulo { margin-top: 20px; font: 400 clamp(34px, 3.9vw, 50px)/1.15 var(--serif); letter-spacing: -0.01em; color: var(--marron); text-wrap: balance; }
.guia__entradilla { margin-top: 18px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; }
.guia__meta { margin-top: 14px; font-size: 14px; color: var(--texto-suave); }
/* La firma: «Por Maruja · interiorista titulada · @marujadel98» */
.guia__autora { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--texto-suave); }
.guia__autora-foto { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #f9e1e9; }
.guia__autora strong { font-weight: 600; color: var(--tinta); }
.guia__autora-enlace { color: var(--oliva); font-weight: 500; text-underline-offset: 3px; }
.guia__categoria { font-weight: 600; color: var(--oliva); text-decoration: none; text-underline-offset: 3px; }
.guia__categoria:hover { text-decoration: underline; }
.guia__imagen { margin-top: 32px; }
.guia__imagen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio-grande); }

/* El texto: medida cómoda, títulos, listas, negritas y enlaces */
.guia__cuerpo { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--linea); font-size: 17px; line-height: 1.75; }
.guia__cuerpo > :first-child { margin-top: 0; }
.guia__cuerpo p { margin: 0 0 18px; }
.guia__cuerpo h2 { margin: 44px 0 12px; font: 400 clamp(25px, 2.3vw, 30px)/1.25 var(--serif); color: var(--marron); text-wrap: balance; }
.guia__cuerpo h3 { margin: 30px 0 8px; font: 600 18px/1.4 var(--sans); color: var(--oliva); }

/* Calculadora de pintura (se pone en una guía con [calculadora-pintura]) */
.calculadora { scroll-margin-top: 12px; margin: 28px 0 36px; padding: 22px 24px 24px; border-radius: var(--radio-l); background: var(--blanco); box-shadow: var(--sombra-tarjeta); font-size: 15px; line-height: 1.4; }
.calculadora__titulo { margin: 0 0 14px; font: 400 24px/1.25 var(--serif); color: var(--marron); }
.calculadora__modo { display: flex; gap: 2px; margin-bottom: 16px; padding: 4px; border-radius: var(--radio-m); background: var(--beige); }
.calculadora__modo label { flex: 1 1 0; position: relative; cursor: pointer; }
.calculadora__modo input { position: absolute; opacity: 0; pointer-events: none; }
.calculadora__modo span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; border-radius: var(--radio-s); font-weight: 500; color: var(--texto-suave); text-align: center; }
.calculadora__modo input:checked + span { background: var(--blanco); color: var(--oliva); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.calculadora__modo input:focus-visible + span { outline: 2px solid var(--oliva); outline-offset: 2px; }
.calculadora__campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.calculadora__campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; }
.calculadora__campo[hidden], .calculadora__casilla[hidden] { display: none; }
.calculadora__campo > span { font-size: 14px; font-weight: 500; color: var(--texto-suave); }
.calculadora__campo input, .calculadora__campo select {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--borde-campo); border-radius: var(--radio-s);
  background: var(--blanco); font: 400 16px/1.3 var(--sans); color: var(--tinta);
}
.calculadora__campo input:focus, .calculadora__campo select:focus { outline: none; border-color: var(--oliva); box-shadow: 0 0 0 3px rgba(85, 107, 47, 0.18); }
.calculadora__campo small { font-size: 13px; color: var(--texto-suave); }
.calculadora__campo--ancho { grid-column: span 2; }
.calculadora__casilla { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 8px 0 0; cursor: pointer; }
.calculadora__casilla input { width: 20px; height: 20px; margin: 0; accent-color: var(--oliva); }
.calculadora__resultado { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }
.calculadora__fila { padding: 14px 16px; border-radius: var(--radio-m); background: var(--oliva-claro); }
.calculadora__fila p { margin: 0; }
.calculadora__que { font-size: 14px; color: var(--texto-suave); }
.calculadora__litros { margin-top: 2px; font: 400 26px/1.25 var(--serif); color: var(--marron); }
.calculadora .calculadora__litros strong { font-weight: 400; }   /* (no el 700 de las negritas de la guía) */
.calculadora__desglose { margin-top: 4px; font-weight: 500; color: var(--oliva); }
.calculadora .calculadora__nota, .calculadora .calculadora__aviso { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); }
.calculadora__sin-js { padding: 14px 18px; border-radius: var(--radio-m); background: var(--beige); }
@media (max-width: 560px) {
  .calculadora { padding: 18px 16px 20px; }
  .calculadora__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .calculadora--pared .calculadora__campo--ancho, .calculadora__campo--ancho { grid-column: 1 / -1; }
}
.guia__cuerpo ul,
.guia__cuerpo ol { margin: 0 0 22px; padding-left: 24px; }
.guia__cuerpo li { padding-left: 4px; }
.guia__cuerpo li + li { margin-top: 8px; }
.guia__cuerpo li::marker { color: var(--oliva); }
.guia__cuerpo ol > li::marker { font-weight: 600; }
.guia__cuerpo strong { font-weight: 700; }
.guia__cuerpo a { font-weight: 500; color: var(--oliva); text-underline-offset: 3px; }
.guia__cuerpo a:hover { text-decoration-thickness: 2px; }

/* Fotos y botones dentro del texto (se ponen desde el panel con «Foto» y «Botón») */
.guia-foto { margin: 34px 0; }
.guia-foto img { display: block; width: 100%; height: auto; border-radius: var(--radio-l); background: var(--beige); }
.guia-foto--mediana { width: min(460px, 100%); margin-inline: auto; }
.guia-foto figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--texto-suave); text-align: center; text-wrap: balance; }
.guia-foto + .guia-foto { margin-top: -10px; }
.guia__cuerpo .guia-boton { margin: 28px 0 34px; }
.guia__cuerpo .guia-boton .boton { max-width: 100%; padding-block: 12px; font-weight: 500; line-height: 1.35; text-decoration: none; }
.guia__cuerpo .guia-boton .boton--oliva { color: #fff; }
.guia__cuerpo .guia-boton .boton--oliva:hover { background: var(--tinta); color: var(--crema); }
.guia__cuerpo .guia-boton .boton--contorno { color: var(--oliva); box-shadow: inset 0 0 0 1.5px var(--oliva); }
.guia__cuerpo .guia-boton .boton--contorno:hover { color: #fff; }
.guia__cuerpo .guia-boton .boton:focus-visible { outline: 3px solid var(--oliva); outline-offset: 3px; }
@media (max-width: 599px) {
  .guia-foto { margin: 28px 0; }
  .guia-foto img { border-radius: var(--radio-m); }
  .guia__cuerpo .guia-boton .boton { display: flex; width: 100%; }
}

/* Recuadro final con la herramienta */
.guia-cta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; align-items: start;
  margin-top: 48px; padding: 28px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  background: var(--blanco);
}
.guia-cta__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--rosa);
  color: var(--marron);
}
.guia-cta--convertidor .guia-cta__icono,
.guia-cta--calculadora .guia-cta__icono,
.guia-cta--personalizado .guia-cta__icono { background: var(--amarillo); }
.guia-cta__titulo { font: 400 clamp(22px, 2vw, 26px)/1.25 var(--serif); color: var(--marron); }
.guia-cta__texto p + p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--texto-suave); }
.guia-cta__boton { grid-column: 2; justify-self: start; margin-top: 18px; }
/* El mismo recuadro, al final del simulador y del convertidor (lleva a la otra herramienta) */
.recuadro-herramienta { max-width: 860px; margin: 40px auto 0; text-align: left; }

/* «Más guías» */
.mas-guias { padding: clamp(48px, 6vw, 72px) 0; background: var(--blanco); }
.mas-guias__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.mas-guias__titulo { font: 400 clamp(26px, 2.6vw, 34px)/1.2 var(--serif); color: var(--marron); }
.mas-guias .guia-tarjeta { background: var(--crema); }
.pagina-guia .nota-colores { margin-bottom: 40px; }

/* Converter: enlace a la guía «¿NCS o RAL?» */
.convertidor__guia { margin-top: 8px; font-size: 14px; }

@media (max-width: 919px) {
  .guias { padding: 32px 0 64px; }
  .guias-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* En la portada y en «Más guías», tarjetas en horizontal (3 no caben bien en 2 columnas) */
  .guias-rejilla--portada,
  .guias-rejilla--compacta { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .guias-rejilla--portada .guia-tarjeta,
  .guias-rejilla--compacta .guia-tarjeta { flex-direction: row; border-radius: var(--radio-l); }
  .guias-rejilla--portada .guia-tarjeta__imagen,
  .guias-rejilla--compacta .guia-tarjeta__imagen { flex: none; width: 112px; }
  .guias-rejilla--portada .guia-tarjeta__imagen img,
  .guias-rejilla--portada .guia-tarjeta__color,
  .guias-rejilla--compacta .guia-tarjeta__imagen img,
  .guias-rejilla--compacta .guia-tarjeta__color { height: 100%; min-height: 104px; aspect-ratio: auto; }
  .guias-rejilla--portada .guia-tarjeta__codigo,
  .guias-rejilla--compacta .guia-tarjeta__codigo,
  .guias-rejilla--portada .guia-tarjeta__resumen,
  .guias-rejilla--compacta .guia-tarjeta__resumen { display: none; }
  .guias-rejilla--portada .guia-tarjeta__cuerpo,
  .guias-rejilla--compacta .guia-tarjeta__cuerpo { justify-content: center; padding: 14px 18px; }
  .guias-rejilla--portada .guia-tarjeta__categoria,
  .guias-rejilla--compacta .guia-tarjeta__categoria { margin-bottom: 4px; }
  .guias-rejilla--portada .guia-tarjeta__titulo,
  .guias-rejilla--compacta .guia-tarjeta__titulo { font-size: 19px; text-wrap: pretty; }
  .guias-rejilla--portada .guia-tarjeta__leer,
  .guias-rejilla--compacta .guia-tarjeta__leer { margin-top: 6px; font-size: 14px; }

  .guia__cuerpo { margin-top: 28px; padding-top: 24px; }
  .guia__cuerpo h2 { margin-top: 36px; }
  .guia__imagen { margin-top: 24px; }
  .guia__imagen img { border-radius: var(--radio); }
  .guia-cta { margin-top: 40px; padding: 22px 20px 24px; }
}

@media (max-width: 599px) {
  /* /guias en el móvil: también en horizontal, con el resumen corto */
  .guias-rejilla { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .guia-tarjeta { flex-direction: row; border-radius: var(--radio-l); }
  .guia-tarjeta__imagen { flex: none; width: 96px; }
  .guia-tarjeta__imagen img,
  .guia-tarjeta__color { height: 100%; min-height: 96px; aspect-ratio: auto; }
  .guias-rejilla--portada .guia-tarjeta__imagen,
  .guias-rejilla--compacta .guia-tarjeta__imagen { width: 96px; }
  .guia-tarjeta__codigo { display: none; }
  .guia-tarjeta__cuerpo { padding: 14px 16px; }
  .guia-tarjeta__categoria { margin-bottom: 4px; font-size: 11px; }
  .guias-filtro__enlace { gap: 6px; padding: 0 13px; font-size: 14.5px; }
  .guia-tarjeta__titulo { font-size: 19px; text-wrap: pretty; }
  .guia-tarjeta__resumen {
    display: -webkit-box; margin-top: 6px; overflow: hidden;
    font-size: 14px; line-height: 1.5;
    -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
  }
  .guia-tarjeta__leer { display: none; }
  .guias-rejilla--portada .guia-tarjeta__leer,
  .guias-rejilla--compacta .guia-tarjeta__leer { display: inline; }

  .guia__cuerpo { font-size: 16.5px; }
  .guia-cta { grid-template-columns: minmax(0, 1fr); }
  .guia-cta__icono { width: 44px; height: 44px; margin-bottom: 12px; }
  .guia-cta__boton { grid-column: 1; justify-self: stretch; }
}

/* ==========================================================================
   Herramientas de color · piezas comunes
   Dos tamaños de botón: .boton (50 px) y .boton--peq (40 px). Un solo estilo de chip: .probador__opcion.
   Avisos: uno dentro de la imagen del probador + .nota-colores al final de cada página.
   ========================================================================== */
.boton--peq { min-height: 40px; padding: 0 16px; border-radius: var(--radio-s); font-size: 14px; font-weight: 500; }
.enlace-herramienta { color: var(--oliva); font-weight: 500; text-underline-offset: 3px; }
.nota-colores { max-width: 760px; margin: 28px auto 0; font-size: 13px; line-height: 1.5; text-align: center; color: var(--texto-suave); }

/* ==========================================================================
   Convertidor de colores NCS ↔ RAL
   ========================================================================== */
.convertidor { max-width: 860px; padding: 56px 0 88px; }
.convertidor .titulo-grande { font-size: clamp(30px, 3.2vw, 44px); }

/* Campo y botón en una sola fila */
.convertidor__formulario { display: flex; gap: 8px; max-width: 560px; margin: 24px auto 0; }
.convertidor__formulario input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 18px;
  border: 1px solid var(--borde-campo); border-radius: var(--radio-m); background: var(--blanco);
  font: 400 18px/1.3 var(--sans); color: var(--tinta); text-transform: uppercase;
}
.convertidor__formulario input::placeholder { text-transform: none; color: var(--texto-suave); }
.convertidor__formulario input:focus { outline: none; border-color: var(--oliva); box-shadow: 0 0 0 3px rgba(85, 107, 47, 0.18); }
.convertidor__ir {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: var(--radio-m); background: var(--oliva); color: var(--blanco); cursor: pointer;
  box-shadow: var(--sombra-boton); transition: box-shadow 0.2s, transform 0.2s;
}
.convertidor__ir:hover { box-shadow: var(--sombra-boton-hover); transform: translateY(-1px); }

/* Colores recomendados: una tira de redondas (en el móvil se desliza de lado) */
.paleta { max-width: 760px; margin: 18px auto 0; text-align: center; }
.paleta__cabecera { font-size: 14px; color: var(--texto-suave); }
.paleta__cabecera strong { font-weight: 500; color: var(--tinta); }
.paleta__elegido { font-weight: 500; color: var(--oliva); }
.paleta__tira { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.paleta__tira li[hidden] { display: none; }
.paleta__separador { flex: none; width: 1px; height: 26px; margin: 0 4px; background: var(--linea); }
.paleta__color { position: relative; display: block; padding: 3px; border-radius: 50%; text-decoration: none; }   /* relative: el nombre oculto (sr-only) no se sale de la tira */
.paleta__muestra { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--beige); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); transition: box-shadow 0.15s; }
.paleta__color:hover .paleta__muestra { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--crema), 0 0 0 3.5px var(--borde-campo); }
.paleta__color[aria-current="true"] .paleta__muestra { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--crema), 0 0 0 4px var(--oliva); }

.convertidor__resultado { margin-top: 28px; }
.convertidor__resultado:empty { display: none; }
.convertidor__error { padding: 14px 18px; border-radius: var(--radio-m); background: #fcebea; color: #7a1a14; text-align: center; }
.convertidor__aviso { margin-top: 20px; padding: 14px 18px; border-radius: var(--radio-m); background: var(--beige); font-size: 15px; }

.muestra { display: block; flex: none; width: 48px; height: 48px; border-radius: var(--radio-m); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.muestra--grande { width: 96px; height: 96px; border-radius: var(--radio-l); }

/* El color elegido */
.color-elegido { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 20px; padding: 20px; border-radius: var(--radio-l); background: var(--blanco); }
.color-elegido__datos { min-width: 0; }
.color-elegido__sistema { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oliva); }
.color-elegido__codigo { font: 700 26px/1.2 var(--sans); color: var(--marron); }
.color-elegido__nombre { margin-top: 2px; font: 400 18px/1.3 var(--serif); color: var(--tinta); }
.color-elegido__nota { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--texto-suave); }
.color-elegido__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.color-elegido__probar { display: inline-flex; align-items: center; min-height: 40px; margin-left: auto; font: 500 15px/1.3 var(--sans); color: var(--oliva); text-underline-offset: 3px; }
/* Botones pequeños: «Copiar», «Compartir» y «Copiar» de la equivalencia más parecida */
.boton-mini {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--borde); border-radius: var(--radio-m); background: var(--blanco);
  font: 500 14px/1.2 var(--sans); color: var(--tinta); white-space: nowrap; cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.boton-mini:hover { border-color: var(--oliva); color: var(--oliva); }
.boton-mini.es-hecho { border-color: var(--oliva); background: var(--oliva-claro); color: var(--oliva); }

/* «Más claro, más oscuro, más suave, más intenso»: el mismo tono, en redondas pequeñas con su nombre debajo */
.variantes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 76px)); gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.variante {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 2px 0;
  border: 0; border-radius: var(--radio-s); background: none; font: 500 12.5px/1.2 var(--sans); color: var(--tinta); cursor: pointer; white-space: nowrap;
}
.variante .variante__muestra { width: 30px; height: 30px; border-radius: 50%; transition: box-shadow 0.15s; }
.variante:hover { color: var(--oliva); }
.variante:hover .variante__muestra { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--blanco), 0 0 0 3.5px var(--oliva); }

/* Equivalencias en pestañas, una por carta */
.equivalencias { margin-top: 20px; }
.equivalencias__pestanas { display: flex; gap: 2px; padding: 4px; border-radius: var(--radio-m); background: var(--beige); }
.equivalencias__pestana {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 6px; border: 0; border-radius: var(--radio-s); background: none;
  font: 500 15px/1.2 var(--sans); color: var(--texto-suave); cursor: pointer; white-space: nowrap;
}
.equivalencias__pestana:hover { color: var(--oliva); }
.equivalencias__pestana[aria-selected="true"] { background: var(--blanco); color: var(--oliva); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.equivalencias__panel { margin-top: 10px; }
.equivalencias__panel[hidden] { display: none; }
.equivalencias__nota { margin-bottom: 10px; font-size: 14px; line-height: 1.45; color: var(--texto-suave); }
/* La más parecida ocupa la fila; las otras dos, pequeñas y en pareja debajo */
.equivalencias__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.equivalencia { position: relative; min-width: 0; }
.equivalencia--mejor { grid-column: 1 / -1; }
.equivalencia__enlace {
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 12px;
  border-radius: var(--radio-m); background: var(--blanco); text-decoration: none; color: var(--tinta);
  transition: box-shadow 0.2s;
}
.equivalencia__enlace:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.equivalencia--mejor .equivalencia__enlace { padding: 12px 104px 12px 12px; box-shadow: inset 0 0 0 1.5px var(--oliva); }
.equivalencia--mejor .equivalencia__enlace:hover { box-shadow: inset 0 0 0 1.5px var(--oliva), 0 6px 18px rgba(0, 0, 0, 0.08); }
.equivalencia:not(.equivalencia--mejor) .muestra { width: 32px; height: 32px; border-radius: var(--radio-s); }
.equivalencia__copiar { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
.equivalencia__mejor { font: 600 11px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--oliva); }
.equivalencia__texto { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.equivalencia__codigo { font-weight: 700; line-height: 1.3; white-space: nowrap; }
.equivalencia:not(.equivalencia--mejor) .equivalencia__codigo { font-size: 14px; }
.equivalencia__linea { font-size: 14px; line-height: 1.4; }
.equivalencia:not(.equivalencia--mejor) .equivalencia__linea { font-size: 12.5px; }
.equivalencia__nivel { white-space: nowrap; }
.equivalencia__nivel--1, .equivalencia__nivel--2 { color: var(--oliva); font-weight: 700; }
.equivalencia__nivel--3 { color: var(--oliva); }
.equivalencia__nivel--4 { color: #8a6d1f; }
.equivalencia__nivel--5 { color: #a3412e; }
.equivalencia__de { color: var(--texto-suave); white-space: nowrap; }

/* Ayuda: dos enlaces discretos al final que despliegan su texto */
.convertidor__ayuda { margin-top: 28px; text-align: center; }
.convertidor__ayuda-enlaces { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; color: var(--texto-suave); }
.convertidor__ayuda-boton { min-height: 40px; padding: 0 4px; border: 0; background: none; font: 500 15px/1.3 var(--sans); color: var(--oliva); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.convertidor__ayuda-boton[aria-expanded="true"] { text-decoration-thickness: 2px; }
.convertidor__ayuda-texto { max-width: 640px; margin: 8px auto 0; padding: 18px 22px; border-radius: var(--radio-l); background: var(--blanco); font-size: 15px; line-height: 1.6; text-align: left; }
.convertidor__ayuda-texto p + p { margin-top: 10px; }
.leyenda-de__lista { margin: 8px 0 10px; padding: 0; list-style: none; }
.leyenda-de__lista li { padding: 4px 0; border-top: 1px solid var(--linea); }
.leyenda-de__lista li:first-child { border-top: 0; }

@media (max-width: 919px) {
  .convertidor { padding: 28px 0 56px; }
  .convertidor .titulo-grande { font-size: 28px; }
  .convertidor__formulario { margin-top: 18px; }
  /* La tira se desliza de lado, a todo el ancho, sin partirse en filas */
  .paleta { margin-top: 14px; text-align: left; }
  .paleta__tira {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 6px calc(-1 * var(--margen)) 0; padding: 2px var(--margen) 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 0 var(--margen);
  }
  .paleta__tira::-webkit-scrollbar { display: none; }
  .paleta__tira > li { flex: none; }
  .paleta__muestra { width: 36px; height: 36px; }
  .convertidor__resultado { margin-top: 18px; }
  .color-elegido { gap: 0 14px; padding: 16px; }
  .muestra--grande { width: 72px; height: 72px; }
  .color-elegido__codigo { font-size: 20px; white-space: nowrap; }
  .color-elegido__nombre { font-size: 16px; }
  .color-elegido__acciones { margin-top: 12px; }
  .color-elegido__probar { margin-left: 0; flex-basis: 100%; min-height: 32px; }
  .variantes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .equivalencias { margin-top: 16px; }
  .equivalencias__pestana { font-size: 14px; }
  .equivalencia__enlace { gap: 10px; padding: 10px; }
  .equivalencia--mejor .equivalencia__enlace { padding: 10px 88px 10px 10px; }
  .equivalencia--mejor .muestra { width: 44px; height: 44px; }
  .equivalencia__copiar { right: 10px; padding: 0 12px; }
  /* Las otras dos, una debajo de otra en una línea cada una (en pareja no caben los códigos) */
  .equivalencias__lista { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .equivalencia:not(.equivalencia--mejor) .equivalencia__enlace { gap: 10px; padding: 6px 10px; }
  .equivalencia:not(.equivalencia--mejor) .equivalencia__texto { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .convertidor__ayuda { margin-top: 20px; }
  .convertidor__ayuda-texto { padding: 16px 18px; }
}
@media (max-width: 370px) {
  .equivalencia__nivel { white-space: normal; }
}

/* ==========================================================================
   «Simulador de pintura» (/simulador-de-pintura) · cuestionario
   ========================================================================== */
.asesor { max-width: 900px; padding: 64px 0 96px; }
.asesor__caja { margin-top: 36px; padding: 32px; border-radius: var(--radio-l); background: var(--blanco); }
/* La frase de presentación (del panel): pequeña, arriba de la tarjeta de las preguntas y la misma en las 6 */
.asesor__intro { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texto-suave); }
/* La barra y, a su derecha, «1 de 6» */
.asesor__progreso { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.3; color: var(--texto-suave); }
.asesor__paso { flex: none; font-variant-numeric: tabular-nums; }
.asesor__barra { flex: 1; height: 6px; border-radius: 6px; background: var(--beige); overflow: hidden; }
.asesor__barra-relleno { display: block; height: 100%; border-radius: 6px; background: var(--oliva); transition: width 0.3s; }
.asesor__pregunta { margin-top: 22px; font: 400 30px/1.25 var(--serif); color: var(--marron); outline: none; }
.asesor__ayuda { margin-top: 8px; font-size: 15px; color: var(--texto-suave); }
.asesor__opciones { display: grid; grid-template-columns: repeat(var(--columnas, 3), minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.opcion-asesor {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px;
  border: 1.5px solid var(--borde); border-radius: var(--radio-m); background: var(--crema);
  font: 500 16px/1.3 var(--sans); color: var(--tinta); cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.opcion-asesor:hover { border-color: var(--oliva); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07); }
.opcion-asesor[aria-pressed="true"] { border-color: var(--oliva); background: var(--oliva-claro); box-shadow: inset 0 0 0 1.5px var(--oliva); }
.opcion-asesor__muestra { width: 100%; height: 56px; border-radius: var(--radio-s); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.opcion-asesor__letra {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border: 1.5px solid var(--oliva); border-radius: 50%; font: 700 20px/1 var(--serif); color: var(--oliva);
}
.asesor__grupo-suelo { margin-top: 22px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.asesor__grupo-suelo + .asesor__opciones { margin-top: 10px; }
.asesor__opciones--suelos { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.asesor__opciones--suelos .opcion-asesor__muestra { height: 46px; }
.opcion-asesor__icono { width: 40px; height: 40px; fill: none; stroke: var(--oliva); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* Suelos y puertas: círculos con el nombre debajo, como en el probador */
.asesor__opciones--circulos .opcion-asesor { gap: 8px; padding: 6px 2px; border: 0; background: none; font-size: 14px; box-shadow: none; }
.asesor__opciones--circulos .opcion-asesor:hover { transform: none; box-shadow: none; color: var(--oliva); }
.asesor__opciones--circulos .opcion-asesor[aria-pressed="true"] { background: none; box-shadow: none; color: var(--oliva); font-weight: 700; }
.asesor__opciones--circulos .opcion-asesor__muestra { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.asesor__opciones--circulos .opcion-asesor:hover .opcion-asesor__muestra { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 3px var(--blanco), 0 0 0 4.5px var(--borde); }
.asesor__opciones--circulos .opcion-asesor[aria-pressed="true"] .opcion-asesor__muestra { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 3px var(--blanco), 0 0 0 5px var(--oliva); }
.asesor__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 22px; }
.asesor__atras { min-height: 40px; padding: 0 2px; border: 0; background: none; font: 500 15px var(--sans); color: var(--oliva); cursor: pointer; }
.asesor__atras:hover { text-decoration: underline; text-underline-offset: 3px; }
/* «Saltar preguntas»: botón secundario bien visible */
.asesor__directo { margin-left: auto; }

@media (max-width: 919px) {
  .asesor { padding: 32px 0 64px; }
  .asesor__caja { padding: 20px 16px; }
  .asesor__pregunta { font-size: 24px; }
  /* Por defecto, de dos en dos (estancia: 3 filas de 2; sensación: 2 de 2) */
  .asesor__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Luz: las tres en una fila */
  .asesor__opciones--luz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .asesor__opciones--luz .opcion-asesor { padding: 12px 8px; }
  /* Orientación (5): «No lo sé» ocupa toda la fila en vez de quedarse sola a un lado */
  .asesor__opciones--orientacion > :last-child { grid-column: 1 / -1; }
  /* Suelos y puertas: fichas más bajas para que quepan sin tanto scroll */
  .asesor__opciones--suelos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .asesor__opciones--suelos .opcion-asesor { gap: 6px; padding: 8px 6px; font-size: 14px; }
  .asesor__opciones--suelos .opcion-asesor__muestra { height: 34px; }
  .asesor__opciones--circulos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
  .asesor__opciones--circulos .opcion-asesor { padding: 4px 0; font-size: 13px; }
  .asesor__opciones--circulos .opcion-asesor__muestra { width: 48px; height: 48px; }
  .opcion-asesor__icono { width: 34px; height: 34px; }
  .asesor__grupo-suelo { margin-top: 18px; }
}

/* ==========================================================================
   «Simulador de pintura» · el dibujo se monta mientras contestas
   Misma rejilla que el resultado (.probador__rejilla, más abajo): el dibujo a la izquierda, del mismo tamaño y en el mismo sitio,
   y la pregunta a la derecha, en una columna tan ancha como la de los controles. Así, al terminar, el dibujo no salta.
   Las opciones van como en el móvil (la columna es estrecha). En el móvil: el dibujo arriba, fijo bajo la cabecera y del mismo tamaño que en el resultado
   ========================================================================== */
.asesor--cuestionario { max-width: 1180px; }
.asesor--cuestionario .asesor__caja { margin-top: 28px; padding: 0; background: none; }
.asesor__dibujo { position: sticky; top: calc(var(--alto-cabecera) + 16px); z-index: 2; min-width: 0; padding-bottom: 6px; background: var(--crema); }
.asesor__tarjeta-pregunta { min-width: 0; padding: 24px; border-radius: var(--radio-l); background: var(--blanco); }
.asesor__tarjeta-pregunta .asesor__intro { margin-bottom: 10px; }
/* El título reserva dos líneas (y se apoya abajo, junto a las opciones): así las opciones empiezan a la misma altura en todas las preguntas */
.asesor__tarjeta-pregunta .asesor__pregunta { display: flex; align-items: flex-end; min-height: 2.5em; margin-top: 12px; font-size: 24px; text-wrap: balance; }
.asesor__tarjeta-pregunta .asesor__ayuda { margin-top: 12px; font-size: 14px; line-height: 1.45; }
.asesor__cuestionario .asesor__opciones { gap: 8px; margin-top: 16px; }
/* Estancia: de 3 en 3 (dos filas), con su icono */
.asesor__cuestionario .asesor__opciones--estancia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.asesor__cuestionario .asesor__opciones--estancia .opcion-asesor { gap: 6px; padding: 10px 2px; font-size: 14px; }
.asesor__cuestionario .asesor__opciones--estancia .opcion-asesor__icono { width: 30px; height: 30px; }
/* Orientación: de 2 en 2, y «No lo sé» ocupa toda la fila en vez de quedarse sola a un lado */
.asesor__cuestionario .asesor__opciones--orientacion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asesor__cuestionario .asesor__opciones--orientacion > :last-child { grid-column: 1 / -1; }
.asesor__cuestionario .asesor__opciones--orientacion .opcion-asesor { flex-direction: row; justify-content: center; padding: 8px; }
.asesor__cuestionario .asesor__opciones--orientacion .opcion-asesor__letra { width: 40px; height: 40px; font-size: 17px; }
/* Luz: las tres en una fila */
.asesor__cuestionario .asesor__opciones--luz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.asesor__cuestionario .asesor__opciones--luz .opcion-asesor { gap: 8px; padding: 10px 6px; }
.asesor__cuestionario .asesor__opciones--luz .opcion-asesor__muestra { height: 40px; }
/* Sensación: 2 × 2, el icono junto al nombre */
.asesor__cuestionario .asesor__opciones--sensacion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asesor__cuestionario .asesor__opciones--sensacion .opcion-asesor { flex-direction: row; justify-content: center; padding: 10px 6px; text-align: center; }
.asesor__cuestionario .asesor__opciones--sensacion .opcion-asesor__icono { width: 28px; height: 28px; }
/* Suelos y puertas: círculos de 4 en 4 */
.asesor__cuestionario .asesor__opciones--circulos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
.asesor__cuestionario .asesor__opciones--circulos .opcion-asesor { padding: 4px 0; font-size: 13px; }
.asesor__cuestionario .asesor__opciones--circulos .opcion-asesor__muestra { width: 44px; height: 44px; }
.asesor__cuestionario .asesor__grupo-suelo { margin-top: 14px; }
.asesor__cuestionario .asesor__grupo-suelo + .asesor__opciones { margin-top: 8px; }
.asesor__cuestionario .asesor__pie { margin-top: 18px; }

@media (max-width: 919px) {
  .asesor--cuestionario { padding-top: 24px; }
  .asesor--cuestionario .titulo-grande { font-size: 28px; }
  .asesor--cuestionario .asesor__caja { margin-top: 12px; }
  /* Sin el hueco de arriba de la rejilla del resultado (aquí no va «Tus respuestas» encima) y la pregunta pegada al dibujo */
  .asesor--cuestionario .asesor__cuestionario { gap: 4px; margin-top: 0; }
  /* El dibujo fijo arriba (bajo la cabecera) mientras bajas por las opciones, igual que en el resultado */
  .asesor__dibujo { top: var(--alto-cabecera); z-index: 5; padding: 8px 0 6px; }
  @media (max-height: 780px) {
    .asesor__dibujo { padding-top: 6px; }
    .asesor__dibujo-marco { width: 92%; margin-inline: auto; }
  }
  .asesor__tarjeta-pregunta { padding: 16px; }
  .asesor__tarjeta-pregunta .asesor__intro { margin-bottom: 8px; font-size: 13px; }
  .asesor__tarjeta-pregunta .asesor__pregunta { margin-top: 10px; font-size: 22px; }
  .asesor__cuestionario .asesor__grupo-suelo { margin-top: 12px; }
  .asesor__cuestionario .asesor__pie { margin-top: 16px; }
}

/* ==========================================================================
   «Simulador de pintura» · resultado: la habitación (probador) y la tarjeta «Tu blanco»
   ========================================================================== */
.asesor--resultado { max-width: 1180px; }
.asesor--resultado .asesor__caja { margin-top: 28px; padding: 0; background: none; }
.asesor__resumen { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 20px; border-radius: var(--radio-m); background: var(--blanco); }
.asesor__resumen-texto { flex: 1; min-width: 0; font-size: 14px; color: var(--texto-suave); }
.asesor__cambiar { flex: none; min-height: 40px; padding: 0 2px; border: 0; background: none; font: 500 14px var(--sans); color: var(--oliva); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.asesor__recomiendame { flex: none; }
/* «Tus respuestas» en la columna de la derecha (ordenador) */
.asesor__resumen--lado { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px; border-radius: var(--radio-l); }
.asesor__resumen--lado .asesor__resumen-texto { font-size: 14px; line-height: 1.6; }
.asesor__resumen--lado .asesor__recomiendame { align-self: stretch; }

/* La misma rejilla para el resultado y para el cuestionario (el dibujo no cambia de tamaño ni de sitio al terminar) */
.probador__rejilla, .asesor__cuestionario { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1fr); gap: 28px; align-items: start; margin-top: 18px; }
.probador__columna { display: flex; flex-direction: column; gap: 16px; align-self: stretch; min-width: 0; }
.probador__escena { position: sticky; top: calc(var(--alto-cabecera) + 16px); z-index: 2; padding-bottom: 6px; background: var(--crema); }
/* En ordenador, con la tarjeta «Tu blanco» abierta (va debajo del dibujo), el dibujo ya no se queda fijo: si no, la tarjeta pasaría por debajo de él.
   Con la tarjeta cerrada, el dibujo se queda fijo arriba */
@media (min-width: 920px) {
  .probador__columna:has(> .resultado-blanco:not([hidden])) > .probador__escena { position: relative; top: 0; }
}
.probador__lienzo { overflow: hidden; border-radius: var(--radio-l); background: #e9e4dd; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
.probador__lienzo svg { display: block; width: 100%; height: auto; }
.probador__etiqueta-fila { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; }
.probador__pared-actual { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45; }
.probador__pared-actual a { color: var(--oliva); white-space: nowrap; text-underline-offset: 3px; }
.probador__tu-blanco { color: var(--oliva); }
.probador__codigo { white-space: nowrap; }
.probador__aviso { margin-top: 10px; padding: 12px 16px; border-radius: var(--radio-m); background: var(--beige); font-size: 14px; line-height: 1.5; }
/* El mismo consejo, en el móvil: justo debajo de la zona fija del dibujo (ver el bloque del móvil) */
.asesor__consejo-movil { display: none; }

/* «Saber más ▾» / «Ocultar ▴»: un botón de texto discreto que abre y cierra la tarjeta. Mide 40 px de alto para el dedo,
   pero con el margen negativo solo ocupa una línea de texto (no alarga la fila de debajo del dibujo) */
.probador__mas {
  flex: none; order: 2; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin: -9px 0; padding: 0 2px 0 8px;
  border: 0; background: none; font: 500 14px/1.2 var(--sans); color: var(--oliva); white-space: nowrap; cursor: pointer;
}
.probador__mas-flecha { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.probador__mas[aria-expanded="true"] .probador__mas-flecha { transform: rotate(180deg); }
.probador__mas:hover .probador__mas-texto { text-decoration: underline; text-underline-offset: 3px; }

/* Tarjeta «Tu blanco» */
.resultado-blanco { padding: 20px; border-radius: var(--radio-l); background: var(--blanco); }
.resultado-blanco[hidden] { display: none; }
.resultado-blanco--nuevo { animation: resultado-resaltar 1.4s ease-out; }
@keyframes resultado-resaltar { from { box-shadow: 0 0 0 3px var(--oliva); } to { box-shadow: 0 0 0 3px rgba(85, 107, 47, 0); } }
.propuesta__tipo { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oliva); }
.propuesta__codigo { margin-top: 4px; font-size: 14px; font-weight: 700; }
.propuesta__codigo a { color: var(--oliva); }
.propuesta__texto { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.propuesta__mini { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 50%; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.blanco-base__uso { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--oliva); }
.resultado-blanco__cabecera { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.resultado-blanco__muestra { position: relative; flex: none; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); cursor: pointer; transition: box-shadow 0.15s; }
/* Tu blanco y «También le va»: la redonda se pulsa para ponerlo en la pared; la que está puesta lleva aro verde y tick */
button.resultado-blanco__muestra:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 2px var(--blanco), 0 0 0 3.5px var(--borde-campo); }
button.resultado-blanco__muestra[aria-pressed="true"] { cursor: default; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--blanco), 0 0 0 4px var(--oliva); }
button.resultado-blanco__muestra[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 16px; margin: -10px 0 0 -5px;
  border: solid var(--oliva); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.resultado-blanco__nombre { font: 400 28px/1.2 var(--serif); color: var(--marron); outline: none; }
/* Cabecera de la tarjeta: «Te recomiendo» y tu blanco */
.resultado-blanco__intro { margin: 0; }
.resultado-blanco__intro--libre { font-size: 14px; line-height: 1.4; color: var(--texto-suave); }
.resultado-blanco__presenta .resultado-blanco__cabecera { gap: 10px; margin-top: 6px; }
.resultado-blanco__presenta .resultado-blanco__muestra { width: 44px; height: 44px; }
.resultado-blanco__nota { margin-top: 12px; padding: 8px 12px; border-radius: var(--radio-s); background: var(--oliva-claro); font-size: 14px; }
/* «Sensación: Calidez» y los cuatro iconos (calma, calidez, natural, con personalidad): cambiarla recalcula tu blanco al momento */
.resultado-blanco__sensacion { margin-top: 14px; }
.resultado-blanco__sensacion-titulo { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--texto-suave); }
.resultado-blanco__sensacion-elegida { font-weight: 700; color: var(--oliva); }
.resultado-blanco__pista { font-size: 13px; font-weight: 400; }
.resultado-blanco__sensaciones { display: flex; gap: 8px; margin-top: 8px; }
.resultado-blanco__chip {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 44px; padding: 0;
  border: 1.5px solid var(--borde); border-radius: var(--radio-m); background: var(--crema);
  font: 600 15px/1 var(--sans); color: var(--oliva); cursor: pointer;
}
.resultado-blanco__chip:hover { border-color: var(--oliva); }
.resultado-blanco__chip[aria-pressed="true"] { border-color: var(--oliva); background: var(--oliva-claro); box-shadow: inset 0 0 0 1px var(--oliva); }
.resultado-blanco__chip-icono { width: 26px; height: 26px; fill: none; stroke: var(--oliva); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Abajo del bloque principal: «Úsalo como base…» y Maruja con el rodillo, con su corte recto sobre la raya gris */
.resultado-blanco__pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 4px; border-bottom: 1px solid var(--linea); }
.resultado-blanco__pie-texto { flex: 1 1 auto; min-width: 0; padding-bottom: 16px; }
/* Insignia verde con el rodillo abajo a la derecha de la redonda: «púlsame para ponerlo en la pared» (desaparece cuando ya está) */
.resultado-blanco__insignia {
  position: absolute; right: -4px; bottom: -4px; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--oliva); color: var(--blanco); --icono-luz: var(--oliva);
  box-shadow: 0 0 0 2px var(--blanco); transition: transform 0.15s;
}
.resultado-blanco__insignia svg { width: 13px; height: 13px; }
.resultado-blanco__muestra:hover .resultado-blanco__insignia,
.resultado-blanco__otra:hover .resultado-blanco__insignia { transform: scale(1.12); }
.resultado-blanco__pintora { flex: none; display: block; width: auto; height: 104px; margin-right: 4px; }
/* «También le va»: la redonda se pulsa para ponerlo en la pared; si ya está, lleva un tick encima */
.resultado-blanco__otra {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 6px 8px 6px 4px;
  border: 0; border-radius: var(--radio-m); background: none; text-align: left; cursor: pointer;
  font: 400 14px/1.4 var(--sans); color: var(--tinta);
}
.resultado-blanco__otra:hover { background: var(--crema); }
.resultado-blanco__otra-muestra {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); transition: box-shadow 0.15s;
}
.resultado-blanco__otra:hover .resultado-blanco__otra-muestra { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--blanco), 0 0 0 3.5px var(--borde-campo); }
.resultado-blanco__otra[aria-pressed="true"] { cursor: default; }
.resultado-blanco__otra[aria-pressed="true"]:hover { background: none; }
.resultado-blanco__otra[aria-pressed="true"] .resultado-blanco__otra-muestra { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--blanco), 0 0 0 4px var(--oliva); }
.resultado-blanco__otra[aria-pressed="true"] .resultado-blanco__otra-muestra::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 16px; margin: -10px 0 0 -5px;
  border: solid var(--oliva); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.resultado-blanco__otra-texto { display: flex; flex-direction: column; min-width: 0; }
.resultado-blanco__otra-etiqueta { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
.resultado-blanco__otra-nombre { color: var(--tinta); }
.resultado-blanco__puesto { font-weight: 500; color: var(--oliva); }
.asesor__explicacion { margin-top: 20px; }
.asesor__explicacion-titulo { padding: 8px 0; font-weight: 700; color: var(--oliva); cursor: pointer; }
.asesor__motivos { margin: 6px 0 0; padding-left: 22px; font-size: 15px; }
.asesor__motivos li + li { margin-top: 6px; }
.resultado-blanco .asesor__otra-vez { margin-top: 18px; }
.boton-texto { min-height: 40px; padding: 0; border: 0; background: none; font: 500 14px var(--sans); color: var(--oliva); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.resultado-blanco__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 18px; }
.resultado-blanco__acciones .asesor__otra-vez { margin-top: 0; }

/* Compartir: botón encima del dibujo (arriba a la derecha) y hoja «Guardar y compartir» */
.probador__marco { position: relative; }
.probador__compartir {
  position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; min-height: 40px; padding: 0 14px 0 11px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  font: 500 14px/1 var(--sans); color: var(--oliva); cursor: pointer;
}
.probador__compartir:hover { background: var(--blanco); color: var(--marron); }
.probador__compartir-icono,
.compartir__accion-icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.compartir-abierta { overflow: hidden; }
.compartir {
  position: fixed; inset: 0; z-index: 100; width: min(440px, calc(100% - 32px)); max-width: none; height: fit-content; max-height: calc(100% - 32px);
  margin: auto; padding: 18px 20px 22px; overflow: auto; border: 0; border-radius: var(--radio-l);
  background: var(--crema); color: var(--tinta); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.compartir::backdrop { background: rgba(29, 30, 32, 0.45); }
.compartir__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.compartir__titulo { margin: 0; font: 400 22px/1.25 var(--serif); color: var(--marron); }
.compartir__cerrar { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--beige); font: 400 24px/1 var(--sans); color: var(--marron); cursor: pointer; }
.compartir__acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.compartir__accion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 44px; padding: 14px;
  border: 1.5px solid var(--borde); border-radius: var(--radio-m); background: var(--blanco);
  font: inherit; text-align: left; color: var(--oliva); cursor: pointer;
}
.compartir__accion:hover { border-color: var(--oliva); }
.compartir__accion-icono { width: 24px; height: 24px; stroke-width: 1.7; }
.compartir__accion-texto { display: flex; flex-direction: column; gap: 2px; }
.compartir__accion-nombre { font: 600 15px/1.3 var(--sans); color: var(--oliva); }
.compartir__accion-detalle { font-size: 13px; line-height: 1.35; color: var(--texto-suave); }
.compartir__subtitulo { margin: 20px 0 0; font: 500 13px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
.compartir__lista {
  margin-top: 8px; padding: 12px 14px; border-radius: var(--radio-m); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde);
  font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: break-word;
}
.compartir__codigo { white-space: nowrap; }
.compartir__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* «Descargar sin aviso (solo tú)»: solo para Maruja con el panel abierto (asesor.js, si la página trae duena: true) */
.compartir__duena { margin-top: 18px; padding: 2px 14px 14px; border: 1.5px dashed var(--borde-campo); border-radius: var(--radio-m); }
.compartir__duena .compartir__subtitulo { margin-top: 12px; color: var(--oliva); }
.compartir__duena-nota { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--texto-suave); }
.compartir__duena .compartir__botones { margin-top: 10px; }
@media (max-width: 919px) {
  /* En el móvil: solo el icono sobre el dibujo y la hoja sale desde abajo */
  .probador__compartir { top: 8px; right: 8px; padding: 0; }
  .probador__compartir-texto { display: none; }
  .compartir { width: 100%; max-height: 88%; margin: auto 0 0; border-radius: var(--radio-l) var(--radio-l) 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* Panel de controles */
.asesor__lado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.probador__controles { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 20px; border-radius: var(--radio-l); background: var(--blanco); }
.probador__grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.probador__titulo-grupo { padding: 0; margin-bottom: 10px; font: 400 19px/1.3 var(--serif); color: var(--marron); }
.probador__subgrupo { margin: 12px 0 6px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.probador__titulo-grupo + .probador__subgrupo { margin-top: 0; }

/* Pestañas (Pared, Habitación, Luz): solo se ven los grupos de la pestaña elegida */
.probador__pestanas { display: flex; gap: 2px; padding: 4px; border-radius: var(--radio-m); background: var(--beige); }
.probador__pestanas--fija { margin-top: 8px; }
.probador__pestana {
  flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 2px;
  border: 0; border-radius: var(--radio-s); background: none;
  font: 500 14px/1.2 var(--sans); color: var(--texto-suave); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.probador__pestana:hover { color: var(--oliva); }
.probador__pestana:focus-visible { outline-offset: -2px; }
.probador__pestana[aria-selected="true"] { background: var(--blanco); color: var(--oliva); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.probador__controles[data-pestana] .probador__grupo[data-pestana] { display: none; }
.probador__controles[data-pestana="pared"] .probador__grupo[data-pestana="pared"],
.probador__controles[data-pestana="habitacion"] .probador__grupo[data-pestana="habitacion"],
.probador__controles[data-pestana="luz"] .probador__grupo[data-pestana="luz"]:not([hidden]) { display: block; }

/* Pestaña Habitación: tipo de habitación con icono y círculos de suelo y puertas */
.probador__elegido { font: 400 14px var(--sans); color: var(--texto-suave); }
/* «Blancos · Blanco perla», «Color · Verde salvia»: el nombre, sin mayúsculas, junto al título del grupo de redondas */
.probador__subgrupo .probador__elegido { font-size: 13px; letter-spacing: 0; text-transform: none; }
/* «Cambiar de habitación» (tarjeta) trae aquí: un aviso suave alrededor de las seis */
.probador__grupo--aviso .probador__estancias { border-radius: var(--radio-m); animation: resultado-resaltar 1.4s ease-out; }
.probador__estancias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.probador__estancia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px;
  border: 1.5px solid var(--borde); border-radius: var(--radio-m); background: var(--crema);
  font: 500 13px/1.2 var(--sans); color: var(--tinta); cursor: pointer;
}
.probador__estancia svg { width: 28px; height: 28px; fill: none; stroke: var(--oliva); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.probador__estancia:hover { border-color: var(--oliva); }
.probador__estancia[aria-pressed="true"] { border-color: var(--oliva); background: var(--oliva-claro); box-shadow: inset 0 0 0 1px var(--oliva); }
.probador__muestras { display: grid; grid-template-columns: repeat(7, minmax(0, 38px)); gap: 8px; }
.probador__circulo {
  width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.probador__circulo:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--blanco), 0 0 0 3.5px var(--borde); }
.probador__circulo[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--blanco), 0 0 0 4px var(--oliva); }

/* Opciones (chips) */
.probador__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.probador__opciones--fila { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.probador__opcion, .probador__blanco {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 12px 6px 8px;
  border: 1.5px solid var(--borde); border-radius: var(--radio-m); background: var(--crema);
  font: 500 14px/1.2 var(--sans); color: var(--tinta); cursor: pointer;
}
.probador__opciones--fila .probador__opcion { justify-content: center; gap: 6px; padding: 6px; text-align: center; }
.probador__opciones--fila .probador__muestra { width: 20px; }
.probador__detalle { display: block; font-size: 12px; font-weight: 400; color: var(--texto-suave); }
.probador__opcion:hover, .probador__blanco:hover { border-color: var(--oliva); }
.probador__opcion[aria-pressed="true"], .probador__blanco[aria-pressed="true"] { border-color: var(--oliva); background: var(--oliva-claro); box-shadow: inset 0 0 0 1px var(--oliva); }
.probador__muestra { flex: none; width: 26px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.probador__blancos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
.probador__blanco { position: relative; text-align: left; }
.probador__muestra-blanco { flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
/* «Para ti»: el blanco que te recomienda el cuestionario */
.probador__tuyo {
  position: absolute; top: -9px; right: 8px; padding: 0 7px; border-radius: 999px;
  background: var(--oliva); font: 600 10.5px/16px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blanco);
}

/* Cualquier código */
.probador__otro { margin-top: 14px; }
.probador__otro-etiqueta { display: block; margin-bottom: 6px; font-size: 14px; color: var(--texto-suave); }
.probador__otro-fila { display: flex; gap: 8px; }
.probador__otro-fila input {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--borde-campo); border-radius: var(--radio-s); background: var(--blanco);
  font: 400 16px var(--sans); color: var(--tinta); text-transform: uppercase;
}
.probador__otro-fila input::placeholder { text-transform: none; color: var(--texto-suave); }
.probador__otro-fila input:focus { outline: none; border-color: var(--oliva); box-shadow: 0 0 0 3px rgba(85, 107, 47, 0.18); }
.probador__error { margin-top: 6px; font-size: 14px; color: var(--error); }
.probador__error:empty { display: none; }

/* Pared de acento */
.probador__acento { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--linea); }
.probador__acento > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font: 500 15px/1.3 var(--sans); color: var(--oliva); cursor: pointer; list-style: none; }
.probador__acento > summary::-webkit-details-marker { display: none; }
.probador__acento > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--oliva); border-radius: 50%; font-size: 16px; line-height: 1; }
.probador__acento[open] > summary::before { content: "\2212"; }
.probador__acento > .probador__subgrupo:first-of-type { margin-top: 6px; }
.probador__idea { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 8px; padding: 8px 10px; border-radius: var(--radio-m); background: var(--crema); }
.probador__idea-muestra { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.probador__idea-tipo { font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oliva); }
.probador__idea-nombre { font-size: 14px; font-weight: 700; line-height: 1.3; }
.probador__idea-boton { min-width: 84px; background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--oliva); }
.probador__idea-boton[aria-pressed="true"] { background: var(--oliva); color: var(--blanco); }
.probador__idea + .probador__subgrupo { margin-top: 16px; }
.probador__colores { display: flex; flex-wrap: wrap; gap: 8px; }
.probador__color { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); cursor: pointer; }
.probador__color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--oliva); }
.probador__otro-codigo { margin-top: 10px; }
.probador__otro-codigo > summary { padding: 9px 0; font: 500 14px/1.4 var(--sans); color: var(--oliva); cursor: pointer; }
.probador__otro-codigo .probador__otro { margin-top: 2px; }
.probador__quitar { min-height: 40px; margin-top: 4px; padding: 0; border: 0; background: none; font: 500 14px var(--sans); color: var(--error); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.probador__quitar[hidden] { display: none; }

@media (max-width: 919px) {
  /* Resultado más compacto: sin la frase de presentación y, en vez de «Tus respuestas: …» (no cabe), solo «Cambiar respuestas» */
  .asesor--resultado { padding-top: 24px; }
  .asesor--resultado .titulo-grande { font-size: 26px; }
  .asesor--resultado .asesor__caja { margin-top: 14px; }
  .asesor__resumen { padding: 4px 6px 4px 14px; }
  .asesor__resumen:not(.asesor__resumen--libre) { justify-content: flex-start; padding: 0; background: none; }
  .asesor__resumen:not(.asesor__resumen--libre) .asesor__resumen-texto { display: none; }
  .asesor__cambiar { padding: 0 8px; }
  .asesor__resumen:not(.asesor__resumen--libre) .asesor__cambiar { padding: 0 2px; }
  /* En el móvil, «Cambiar respuestas» va al final, debajo de los controles */
  .asesor__lado > .asesor__resumen:not(.asesor__resumen--libre) { margin-top: 4px; }
  .asesor__resumen--libre { padding: 6px; }
  .asesor__resumen--libre .asesor__resumen-texto { display: none; }
  .asesor__recomiendame { flex: 1; }

  /* El dibujo se queda fijo arriba, con la línea del color y las pestañas pegadas debajo */
  .probador__rejilla, .asesor__cuestionario { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 12px; }
  .probador__columna { display: contents; }
  .probador__escena { top: var(--alto-cabecera); z-index: 5; padding: 8px 0 6px; }
  .probador__escena .probador__aviso { display: none; }
  /* Pantallas bajas (p. ej. 360×740): con la cabecera fija encima, el dibujo un poco más pequeño para que quede sitio debajo */
  @media (max-height: 780px) {
    .probador__escena { padding-top: 6px; }
    .probador__escena .probador__marco { width: 92%; margin-inline: auto; }
  }
  .probador__lienzo { border-radius: var(--radio-m); }
  /* «Saber más» flota a la derecha: la línea del color lo rodea y lo de debajo (acento, techo) usa todo el ancho.
     Con el margen negativo ocupa una línea de 20 px (aunque se pueda tocar en 40 px de alto) */
  .probador__etiqueta-fila { display: flow-root; margin-top: 6px; }
  .probador__etiqueta-fila .probador__mas { float: right; margin: -10px 0 -10px 8px; }
  /* La línea del color y «Saber más», a 13 px: así «Acento: …» y «Techo: …» caben en una línea cada uno (esta zona se queda fija) */
  .probador__pared-actual { font-size: 13px; line-height: 20px; }
  /* En el móvil sin «Tu blanco:» delante (ya lo dicen «Para ti» y la tarjeta): así el nombre, el código y «RAL →» caben en una línea junto a «Saber más» */
  .probador__pared-actual .probador__tu-blanco { display: none; }
  .probador__mas { font-size: 13px; }
  .probador__pestana { font-size: 13px; }
  .probador__controles { padding: 16px; }
  .resultado-blanco { padding: 16px; }
  .resultado-blanco__nombre { font-size: 24px; }
  .resultado-blanco__pintora { height: 88px; margin-right: 0; }
  .resultado-blanco__presenta .resultado-blanco__muestra { width: 36px; height: 36px; }
  .resultado-blanco__presenta .resultado-blanco__insignia { right: -5px; bottom: -5px; width: 18px; height: 18px; }
  .resultado-blanco__presenta .resultado-blanco__insignia svg { width: 11px; height: 11px; }
  /* El consejo de probar una muestra, compacto y siempre a la vista (aunque la tarjeta esté cerrada) */
  .asesor__consejo-movil { display: block; margin-top: 0; padding: 8px 12px; border-radius: var(--radio-s); font-size: 13px; line-height: 1.45; }

  /* Zonas táctiles de 40 px como mínimo */
  .probador__opcion, .probador__blanco { min-height: 40px; }
  .probador__color { width: 36px; height: 36px; }
}

@media (max-width: 420px) {
  /* Que el nombre de cada blanco quepa en una línea */
  .probador__blanco { gap: 6px; padding: 6px 8px; font-size: 13.5px; white-space: nowrap; }
  .probador__muestra-blanco { width: 24px; height: 24px; }
}

/* ==========================================================================
   Web en construcción (Panel → Web en construcción · includes/construccion.php)
   ========================================================================== */
/* Franja fina que solo ve Maruja: «Modo construcción: solo tú ves la web» */
.franja-construccion { padding: 8px var(--margen); background: var(--amarillo); color: var(--tinta); font-size: 14px; line-height: 1.45; text-align: center; }
.franja-construccion strong { font-weight: 700; }
.franja-construccion a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.franja-construccion a:hover { color: var(--oliva); }

/* La página que ven las visitas */
.construccion__cabecera { padding: 28px var(--margen) 0; text-align: center; }
.construccion__logo { font: 700 28px/1.3 var(--serif); color: var(--oliva); }
.construccion {
  display: grid; grid-template-columns: auto minmax(0, 520px);
  align-items: center; align-content: center; justify-content: center; gap: clamp(40px, 6vw, 96px);
  width: min(1040px, 100% - 2 * var(--margen));
  margin: 0 auto; padding: clamp(32px, 6vh, 72px) 0;
}
.construccion__arco {
  width: clamp(240px, 25vw, 330px); aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px var(--radio-grande) var(--radio-grande);
  background: var(--rosa);
  box-shadow: var(--sombra-tarjeta);
}
.construccion__imagen { width: 86%; height: auto; margin: 13% auto 0; }
.construccion__titulo { font: 400 clamp(38px, 4.2vw, 58px)/1.15 var(--serif); color: var(--marron); text-wrap: balance; }
.construccion__mensaje { margin-top: 18px; font-size: 18px; line-height: 1.65; color: var(--texto-suave); }
.construccion__boton { margin-top: 32px; }
.construccion__usuario { margin-top: 10px; font-size: 14px; color: var(--texto-suave); }
.construccion__muestras { display: flex; gap: 8px; margin: 36px 0 0; padding: 0; list-style: none; }
.construccion__muestras li { width: 30px; height: 30px; border-radius: 6px; background: var(--oliva); box-shadow: inset 0 0 0 1px rgba(66, 40, 26, 0.08); }
.construccion__muestras li:nth-child(2) { background: var(--rosa); }
.construccion__muestras li:nth-child(3) { background: var(--amarillo); }
.construccion__muestras li:nth-child(4) { background: var(--beige); }
.construccion__pie { padding: 20px var(--margen) 28px; font-size: 13px; text-align: center; color: var(--texto-suave); }

@media (max-width: 760px) {
  .franja-construccion { font-size: 13.5px; }
  .construccion__cabecera { padding-top: 22px; }
  .construccion__logo { font-size: 24px; }
  .construccion { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; padding: 28px 0 32px; text-align: center; }
  .construccion__arco { width: min(200px, 56vw); }
  .construccion .antetitulo { justify-content: center; }
  .construccion__mensaje { font-size: 17px; }
  .construccion__boton { margin-top: 26px; }
  .construccion__muestras { justify-content: center; margin-top: 28px; }
}
@media (max-width: 380px) {
  .franja-construccion__enlaces { display: block; }
  .franja-construccion__enlaces > span:first-child { display: none; }
}