/* ============================================================
   MADERA BRAVA — Estilos de todo el sitio
   ------------------------------------------------------------
   Este archivo controla el diseño de TODAS las páginas.
   Si cambias un color acá, cambia en las siete páginas.

   Las fotos NO se ponen acá: van escritas dentro de cada
   página, junto a cada producto, así:

     <div class="prod__media"
          style="background-image: url('img/mesa-tulum.jpg'), url('img/ph-mesa.svg')">

   La primera es tu foto real. La segunda es el dibujo de
   respaldo que se ve mientras la foto no exista. Cuando
   copies la foto real a la carpeta img/ con ese nombre, se
   ve sola: no hay que tocar nada.
   ============================================================ */

:root {
  /* --- Color --- */
  --ink:        #2a2521;   /* texto principal, café muy oscuro */
  --ink-soft:   #5a524a;   /* texto secundario */
  --ink-mute:   #8c8377;   /* texto tenue, etiquetas */
  --line:       #e5ddd0;   /* líneas y bordes */
  --bg:         #faf7f2;   /* fondo base, crema */
  --bg-alt:     #efe8de;   /* fondo de las secciones alternas */
  --bg-deep:    #241f1b;   /* fondo oscuro (pie de página) */
  --white:      #ffffff;
  --accent:     #8a6a3b;   /* madera: acentos y enlaces */
  --accent-dk:  #6d5330;
  --wa:         #25d366;   /* verde de WhatsApp */

  /* Los colores de los recuadros. Si quieres otro tono, cambia nada
     más el número de aquí y se cambia en toda la página. */
  --marca:      #2b2724;   /* el cafe de la portada, el mismo del logotipo */
  --marino:     #1e2b45;   /* azul marino: el recuadro de las telas */
  --marino-dk:  #16203a;   /* el mismo, más oscuro, para el borde */

  /* Un color por cada línea de muebles. */
  --sala:       #33424f;   /* azul grisáceo profundo: Salas */
  --sala-dk:    #27333d;
  --recamara:   #414b3b;   /* verde salvia profundo: Recámaras */
  --recamara-dk:#333c2f;
  --arte:       #2f3a33;   /* verde profundo: Arte exclusivo */
  --arte-dk:    #232c26;

  --beige:      #ece0cc;   /* las letras que van encima de esos colores */
  --beige-mute: #c3b49b;   /* las letras chicas de arriba */
  --dorado:     #dcc28f;   /* lo que va resaltado dentro del recuadro */

  /* --- Tipografía --- */
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Medidas --- */
  --wrap: 1180px;
  --pad: 24px;
  --nav-h: 76px;
  --r: 3px;                /* redondeo de esquinas */
  --shadow: 0 18px 50px rgba(28, 26, 23, .10);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;          /* que el celular no agrande el texto solo */
  -webkit-tap-highlight-color: rgba(138, 106, 59, .18);
  overflow-x: hidden;
  overflow-wrap: break-word;               /* una palabra larga no rompe el ancho */
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;              /* Fraunces 600: el peso que pediste */
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0;
}

/* Fraunces tiene la letra mas grande que la anterior, asi que los
   titulos se ven mas gruesos con menos puntos. Si los quieres mas
   grandes, sube el ultimo numero de cada renglon. */
h1 { font-size: clamp(2.05rem, 4.7vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
h3 { font-size: 1.28rem; letter-spacing: -.005em; }

p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.eyebrow {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 1.1rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 12px 18px;
  z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }

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

/* ---------------- Botones ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.btn:hover { transform: translateY(-2px); }

.btn--solid { background: var(--ink); color: var(--white); }
.btn--solid:hover { background: var(--accent-dk); }

.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); }

.btn--light { border-color: rgba(255,255,255,.7); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--ink); }

.btn--ghost { border-color: currentColor; }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.btn--sm { padding: 11px 20px; font-size: .74rem; }
.btn--full { width: 100%; }

/* Botón verde de WhatsApp, el que va en cada producto */
.btn--wa {
  background: var(--wa);
  color: #06381a;
  border-color: var(--wa);
}
.btn--wa:hover { background: #1fbb59; border-color: #1fbb59; color: #06381a; }
.btn--wa svg { width: 17px; height: 17px; fill: currentColor; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: gap .25s, border-color .25s;
}
.link:hover { gap: 14px; border-color: var(--accent); }

/* ---------------- Barra de navegación ---------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  z-index: 100;
  transition: background .35s, box-shadow .35s, height .35s;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Sobre el hero (foto oscura) el texto va blanco */
.nav--over { color: var(--white); }

/* Al bajar, o en las páginas interiores, la barra va sólida */
.nav--solid {
  background: rgba(250, 247, 242, .95);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}

.logo { display: flex; align-items: center; gap: 12px; }
.logo__mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: .95rem;
  letter-spacing: .04em;
  flex: none;
}
.logo__text {
  font-family: var(--serif);
  font-size: 1.28rem;
  letter-spacing: .06em;
}

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a { font-size: .82rem; letter-spacing: .06em; }
.nav__links a:not(.btn):hover { color: var(--accent); }

.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: inherit;
}
.nav__toggle span {
  display: block;
  width: 24px; height: 1px;
  margin: 5px auto;
  background: currentColor;
  transition: transform .3s, opacity .3s;
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.nav__mobile {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 10px var(--pad) 24px;
  display: grid;
  gap: 2px;
  color: var(--ink);
}
.nav__mobile a {
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.nav__mobile a:last-child { border-bottom: 0; }

/* IMPORTANTE: el menú arranca cerrado (lleva "hidden" en el HTML) y esta
   regla es la que lo mantiene cerrado. Sin ella, el "display: grid" de
   arriba le gana y la lista queda flotando encima de la página. */
.nav__mobile[hidden] { display: none; }

/* En pantalla grande no existe: la barra de arriba ya muestra todo.
   Esto es un seguro por si el menú quedara abierto al agrandar la ventana. */
@media (min-width: 721px) {
  .nav__mobile { display: none; }
}

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;   /* en celular descuenta la barra del navegador */
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(60px, 11vh, 130px);
  overflow: hidden;
}
/* Aqui iban la foto de fondo de la portada ("hero__media") y la
   sombra que la oscurecia ("hero__veil"). La portada ya no es una
   foto sino el logotipo, asi que se quitaron: la foto img/hero.jpg
   ya no se usa y por eso el archivo publicado pesa menos. */
.hero__content { position: relative; color: var(--white); max-width: 780px; }
.hero__content .eyebrow { color: #e6d4be; }
.hero h1 em { font-style: italic; color: #edd9be; }
.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,.9);
  max-width: 60ch;
  margin-top: 1.5rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.3rem; }

/* ---------------- Barra de confianza ---------------- */

.strip {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
  padding: 34px 0;
}
.strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.strip__item { display: grid; gap: 2px; }
.strip__item strong {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
}
.strip__item span {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------------- Franja de envíos ----------------
   La banda café que va debajo de la barra de confianza.
   Solo está en la página de inicio. */

.ship {
  background: var(--accent);
  color: var(--white);
  padding: clamp(26px, 3.4vw, 38px) 0;
}
.ship__inner {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
}
.ship__icon {
  flex: none;
  width: 58px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.9);
}
.ship__icon svg { width: 100%; height: auto; }

.ship__text { flex: 1; }
.ship__text h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 6px;
}
.ship__text p {
  margin: 0;
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  max-width: 62ch;
}
.ship__btn { flex: none; }

/* ---------------- Secciones ---------------- */

.section { padding: clamp(70px, 10vw, 120px) 0; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: clamp(50px, 7vw, 80px); }

.section__head { max-width: 660px; margin-bottom: clamp(40px, 5vw, 62px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__sub { color: var(--ink-soft); margin-top: 1.1rem; }

/* ---------------- Tarjetas del catálogo (inicio) ---------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s, box-shadow .35s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/* La foto va COMPLETA, sin recortar: "contain" la mete entera dentro
   del recuadro. Si la foto no tiene la misma forma que el recuadro,
   quedan dos franjas color crema arriba y abajo, y está bien así.
   (Con "cover" se veía más llena, pero le cortaba los lados.) */
.card__img {
  aspect-ratio: 3 / 2;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bg-alt);
  transition: transform .6s;
}
.card:hover .card__img { transform: scale(1.03); }

.card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__body p { color: var(--ink-soft); font-size: .95rem; flex: 1; }
.card__count {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------------- Proceso ---------------- */

/* Los pasos de "Cómo trabajamos". Son CUATRO: si algún día quitas o
   agregas uno, cambia el 4 de aquí abajo por los que queden. */
.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 38px);
}
.step { border-top: 1px solid var(--line); padding-top: 26px; }
.step__num {
  font-family: var(--serif);
  font-size: 2.1rem;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------------- Contacto ---------------- */

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.contact__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2px; }
.contact__list li {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: .96rem;
}
.contact__list li > span {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 5px;
}
.contact__list a:hover { color: var(--accent); }

/* Panel verde grande de WhatsApp */
.wa-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(30px, 4vw, 44px);
  box-shadow: var(--shadow);
  text-align: center;
}
.wa-panel__icon {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wa);
}
.wa-panel__icon svg { width: 34px; height: 34px; fill: #06381a; }
.wa-panel h3 { font-size: 1.75rem; margin-bottom: 12px; }
.wa-panel p { color: var(--ink-soft); font-size: .96rem; }
.wa-panel .btn { margin-top: 10px; }
.wa-panel__note {
  font-size: .78rem;
  color: var(--ink-mute);
  margin: 16px 0 0;
}

/* ---------------- Encabezado de las páginas de producto ---------------- */

.page-head {
  padding: calc(var(--nav-h) + clamp(48px, 7vw, 86px)) 0 clamp(34px, 5vw, 54px);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.page-head__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 26px;
  transition: gap .25s, color .25s;
}
.page-head__back:hover { gap: 14px; color: var(--accent); }
/* EL PARRAFO DE ENTRADA DE CADA APARTADO
   El renglon del "font-size" manda que tan grande se ve. Son tres
   numeros: el primero es el tamano en celular, el ultimo el tamano
   maximo en computadora, y el de en medio lo va acomodando solito
   entre uno y otro. Subelos los tres para letra mas grande. */
.page-head p.lead {
  color: var(--ink-soft);
  margin-top: 1.3rem;
  max-width: 62ch;
  font-size: clamp(.94rem, 1.25vw, 1.06rem);
  line-height: 1.66;
}

/* Índice de tipos (página de salas) */
.typenav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2.2rem;
}
.typenav a {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--white);
  font-size: .8rem;
  letter-spacing: .04em;
  transition: background .25s, color .25s, border-color .25s;
}
.typenav a:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Título de cada tipo dentro de una página */
.type-head {
  border-top: 1px solid var(--line);
  padding-top: 30px;
  margin-bottom: clamp(30px, 4vw, 46px);
  max-width: 720px;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.type-head h2 { margin-bottom: 10px; }
.type-head p { color: var(--ink-soft); margin: 0; }

/* ---------------- Producto ---------------- */

.prod-list { display: grid; gap: clamp(54px, 7vw, 96px); }

/* Al llegar desde un enlace (#islandia, #oslo...), que el mueble no
   quede escondido debajo de la barra de arriba. */
.prod { scroll-margin-top: calc(var(--nav-h) + 20px); }

.prod {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}
/* Los pares van al revés, para que la página no sea monótona.
   Se nombran las dos: .prod__foto es la celda que arma script.js
   (el riel más el precio); .prod__media es la foto sola, por si
   el navegador no alcanzó a correr el script. */
.prod:nth-child(even) .prod__foto,
.prod:nth-child(even) .prod__media { order: 2; }

/* Igual que las tarjetas: la foto del producto se ve ENTERA.
   El recuadro es 3:2 (más ancho que alto) porque casi todas las fotos
   de muebles son apaisadas: así sobra menos crema arriba y abajo. */
.prod__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--r);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bg-alt);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.prod__name { margin-bottom: 6px; font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.prod__tag {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}
.prod__desc { color: var(--ink-soft); font-size: .98rem; }

/* Ficha técnica */
.specs {
  margin: 24px 0 26px;
  border-top: 1px solid var(--line);
}
.specs div {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.specs dt {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 4px;
}
.specs dd { margin: 0; font-size: .94rem; color: var(--ink); }

.prod__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.prod__price {
  font-size: .82rem;
  color: var(--ink-mute);
}

/* ---------------- Franja de cierre ---------------- */

.cta {
  background: var(--bg-deep);
  color: var(--white);
  text-align: center;
  padding: clamp(64px, 8vw, 104px) 0;
}
.cta h2 { margin-bottom: 16px; }
.cta p { color: rgba(255,255,255,.72); max-width: 56ch; margin-inline: auto; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 2.2rem; }

/* ---------------- Pie de página ---------------- */

.footer {
  background: var(--bg-deep);
  color: rgba(255,255,255,.62);
  padding: 56px 0 40px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: start;
}
.footer .logo__mark { color: rgba(255,255,255,.8); margin-bottom: 14px; }
.footer__tag { font-size: .9rem; margin: 0; }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__links a { font-size: .85rem; }
.footer__links a:hover { color: var(--white); }
.footer__copy {
  grid-column: 1 / -1;
  margin: 26px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .78rem;
}

/* ---------------- Botón flotante de WhatsApp ---------------- */

.wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  border-radius: 100px;
  background: var(--wa);
  color: #06381a;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .04em;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  transition: transform .25s, box-shadow .25s;
}
.wa:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0,0,0,.28); }
.wa svg { width: 25px; height: 25px; fill: currentColor; }

/* ---------------- Aparición suave al bajar ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* (la portada ya no lleva foto de fondo con movimiento) */
  .btn:hover, .card:hover, .card:active, .wa:hover { transform: none; }
}

/* ============================================================
   PANTALLAS CHICAS
   ============================================================ */

@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .contact__inner { grid-template-columns: 1fr; }
  .prod { grid-template-columns: 1fr; }
  .prod:nth-child(even) .prod__foto,
  .prod:nth-child(even) .prod__media { order: 0; }
}

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .grid { grid-template-columns: 1fr; }
  .strip__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .footer__inner { grid-template-columns: 1fr; }

  /* El botón flotante se reduce al círculo para no tapar el texto */
  .wa { padding: 15px; right: 16px; bottom: 16px; }
  .wa span { display: none; }
  .footer { padding-bottom: 96px; }

  .specs div { grid-template-columns: 108px 1fr; gap: 12px; }
  .contact__list li { grid-template-columns: 1fr; gap: 2px; }
  .contact__list li > span { padding-top: 0; }
  .btn { padding: 14px 24px; }
  .prod__actions .btn { width: 100%; }

  /* La franja de envíos se acomoda en columna */
  .ship__inner { flex-direction: column; text-align: center; gap: 16px; }
  .ship__text p { margin-inline: auto; }
  .ship__btn { width: 100%; max-width: 340px; }

  /* Si el menú lleva muchos enlaces, que se pueda deslizar
     en vez de salirse de la pantalla */
  .nav__mobile {
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
  }
}

/* ---- CELULAR ---- */
@media (max-width: 560px) {
  :root {
    --pad: 18px;         /* menos margen: el texto aprovecha más el ancho */
    --nav-h: 66px;       /* barra de arriba más baja, se ve más foto */
  }

  /* Los titulos en celular. Fraunces es mas grande de cuerpo que
     la letra anterior, por eso llevan menos puntos que antes. */
  h1 { font-size: clamp(1.82rem, 8.6vw, 2.45rem); }
  h2 { font-size: clamp(1.45rem, 5.9vw, 1.95rem); }
  h3 { font-size: 1.15rem; }

  /* El hero ya no ocupa la pantalla entera: así se alcanza a ver
     que la página sigue hacia abajo. */
  .hero {
    min-height: 88svh;
    padding-top: calc(var(--nav-h) + 40px);
    padding-bottom: 54px;
  }
  .lead { margin-top: 1.1rem; }
  .hero__actions { margin-top: 1.7rem; gap: 10px; }
  .hero__actions .btn { width: 100%; }

  .section { padding: 58px 0; }
  .section--tight { padding-block: 44px; }
  .section__head { margin-bottom: 32px; }

  /* Cuatro datos en dos filas, sin que se corten las palabras */
  .strip { padding: 26px 0; }
  .strip__grid { gap: 22px 14px; }

  .card__body { padding: 20px 20px 24px; }
  .prod-list { gap: 46px; }
  .specs div { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .specs dt { padding-top: 0; }
  .prod__actions { gap: 10px; }
  .prod__price { width: 100%; text-align: center; }

  .typenav { gap: 8px; margin-top: 1.6rem; }
  .typenav a { padding: 9px 14px; font-size: .78rem; }

  .footer__links { gap: 0; flex-direction: column; }
  .footer__links a { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08); }

  .contact__list li { padding: 13px 0; }
  .wa-panel { padding: 26px 20px 30px; }
}

/* Celular acostado: si la pantalla es muy baja, el hero se
   ajusta al contenido en vez de forzar la altura. */
@media (max-height: 520px) and (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 40px);
    padding-bottom: 48px;
  }
}

/* ---------------- Miniaturas de color ----------------
   La fila de fotos chicas que va debajo de la foto grande
   de cada mueble: los otros colores y las otras vistas.
   Se escriben en la pagina asi:

     <div class="thumbs">
       <img class="thumb" src="IMG/FOTO-CHICA.JPG" alt="..." loading="lazy" />
     </div>
*/

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 20px;
}
.thumb {
  width: 108px;
  height: 81px;
  object-fit: contain;      /* entera, sin recortar */
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-alt);
}

@media (max-width: 560px) {
  .thumb { width: 92px; height: 69px; }
}

/* ---------------- Ver la foto en grande ----------------
   Al dar clic (o tocar) cualquier foto del sitio, se abre
   encima de todo, a pantalla completa y entera. Se cierra
   tocando fuera, con la X, o con la tecla Esc.

   El recuadro y la X los pone solos el archivo script.js:
   no hay que escribir nada en las páginas.
*/

/* El dedito de "esto se puede ampliar" */
.zoomable { cursor: zoom-in; }

.lupa {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 16, 13, .94);
  overscroll-behavior: contain;
  animation: lupaEntra .18s ease-out;
}

/* IMPORTANTE: sin esta línea el "display: flex" de arriba le gana al
   "hidden" del HTML y la foto grande queda tapando la página entera.
   Es el mismo problema que tuvo el menú de celular. NO LA BORRES. */
.lupa[hidden] { display: none; }

@keyframes lupaEntra { from { opacity: 0 } to { opacity: 1 } }

.lupa__img {
  max-width: 100%;
  max-height: calc(100vh - 110px);
  max-height: calc(100svh - 110px);
  width: auto;
  height: auto;
  border-radius: var(--r);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  background: var(--bg-alt);
}

.lupa__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: .85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .78);
}

.lupa__x {
  position: absolute;
  top: 12px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-family: var(--sans);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
}
.lupa__x:hover { background: rgba(255, 255, 255, .3); }

@media (max-width: 560px) {
  .lupa { padding: 10px; }
  .lupa__img { max-height: calc(100svh - 130px); }
}

@media (prefers-reduced-motion: reduce) {
  .lupa { animation: none; }
}

/* ================================================================
   GIRAR EL MUEBLE 360 GRADOS
   ----------------------------------------------------------------
   El recuadro donde el mueble da la vuelta. Se maneja arrastrando
   con el dedo o con el mouse. Lo arma script.js (seccion 8).
   ================================================================ */
.giro {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: grab;

  /* Sin esto, en el celular el dedo mueve la pagina hacia los lados
     en lugar de girar el mueble. */
  touch-action: pan-y;

  /* que no se seleccione ni aparezca el menu de "guardar imagen"
     mientras se arrastra */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.giro--girando { cursor: grabbing; }

.giro__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* El letrero de "arrastra para girarlo". Se queda hasta que la
   persona gira el mueble por primera vez; despues estorba. */
.giro__pista {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: rgba(28, 24, 20, .78);
  color: #fff;
  font-size: .82rem;
  letter-spacing: .02em;
  padding: 7px 15px;
  border-radius: 999px;
  pointer-events: none;
  transition: opacity .4s;
  white-space: nowrap;
}

.giro--usado .giro__pista { opacity: 0; }

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

@media (max-width: 560px) {
  .giro { aspect-ratio: 1 / 1; }
  .giro__pista { font-size: .76rem; padding: 6px 12px; bottom: 10px; }
}

/* ================================================================
   TRES LÍNEAS DE MUEBLES (agosto 2026)
   ----------------------------------------------------------------
   El inicio quedó con nada más el eslogan, tres botones grandes
   —Salas, Recámaras, Arte exclusivo— y la línea de entrega.
   ================================================================ */

/* Los tres botones de las líneas de muebles. */
.hero__lines {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2.4rem;
}

.btn--linea {
  min-width: 190px;
  justify-content: center;
  font-size: 1.02rem;
  padding: 17px 30px;
}

/* La línea de entrega, pegada abajo del eslogan. */
.hero__promise {
  margin-top: 2rem;
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  color: #fff;
  letter-spacing: .01em;
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.hero__promise strong { font-weight: 500; }

/* La barra de confianza quedó con una sola frase, así que ya no
   son cuatro columnas: es una sola, centrada. */
.strip__grid--solo { grid-template-columns: 1fr; }

/* Cuadrícula de dos tarjetas (la de arte exclusivo). Sin esto las
   dos tarjetas se irían a la izquierda y quedaría un hueco. */
.grid--dos { grid-template-columns: repeat(2, 1fr); }

/* En el menú de celular, las opciones que cuelgan de una línea
   van un poco metidas y más chicas, para que se note que son
   parte de la de arriba. */
.nav__sub {
  padding-left: 20px !important;
  font-size: .92rem;
  opacity: .82;
}

@media (max-width: 720px) {
  .grid--dos { grid-template-columns: 1fr; }
}

/* En celular los tres botones van EN FILA, no uno debajo de otro.
   Apilados a todo lo ancho se comían casi media pantalla y tapaban
   la foto del fondo. En fila ocupan un solo renglón y se alcanza a
   ver la sala. Se reparten el ancho en partes iguales con flex: 1. */
@media (max-width: 720px) {
  .hero__lines {
    gap: 7px;
    margin-top: 1.7rem;
    flex-wrap: nowrap;
  }

  .hero__lines .btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 13px 6px;
    font-size: .66rem;
    letter-spacing: .04em;
    text-align: center;
    line-height: 1.25;
  }
}

@media (max-width: 560px) {
  .hero__lines { margin-top: 1.4rem; }
  .hero__promise { margin-top: 1.3rem; padding-left: 13px; }
}

/* ================================================================
   TARJETAS QUE SE TOCAN COMPLETAS
   ----------------------------------------------------------------
   Antes solo funcionaba el renglón chico de abajo ("Ver salas →").
   En celular eso es un blanco muy pequeño para el dedo. Ahora se
   puede tocar el recuadro entero: la foto, el título, el texto,
   donde sea.

   El truco: al enlace de adentro se le estira una capa invisible
   que cubre toda la tarjeta. No hay que cambiar el HTML ni meter
   un enlace dentro de otro (eso está prohibido y lo lee mal el
   celular de una persona que no ve).
   ================================================================ */
.card { position: relative; }

.card .link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Que se note que se hundió al tocarla. */
.card:active { transform: scale(.988); }
.card:active .card__img { transform: none; }

/* Cuando se llega con el tabulador, se marca la tarjeta entera y
   no nada más el renglón de abajo. */
.card:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.card .link:focus-visible { outline: none; }

/* La flecha se recorre sola al pasar el mouse por CUALQUIER parte
   de la tarjeta, no solo por encima del renglón. */
.card:hover .link { gap: 14px; border-color: var(--accent); }

/* ---------------------------------------------------------------
   EN CELULAR: las tarjetas se vuelven renglones de menú
   ---------------------------------------------------------------
   Una tarjeta alta por opción obliga a bajar mucho para ver las
   seis salas. Puestas de lado —foto chica a la izquierda, nombre
   a la derecha y una flecha al final— se ven varias de un vistazo
   y se parece a un menú de aplicación.
   --------------------------------------------------------------- */
@media (max-width: 720px) {
  .card {
    flex-direction: row;
    align-items: stretch;
    min-height: 96px;
  }

  .card__img {
    width: 104px;
    flex: none;
    aspect-ratio: auto;
    align-self: stretch;
  }

  .card__body {
    padding: 13px 40px 13px 16px;
    gap: 4px;
    justify-content: center;
  }

  .card__body h3 { font-size: 1.22rem; }

  /* La descripción se corta a dos renglones para que todos los
     renglones del menú midan más o menos lo mismo. */
  .card__body p {
    font-size: .85rem;
    line-height: 1.45;
    flex: none;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card__count { font-size: .64rem; letter-spacing: .13em; }

  /* El renglón "Ver salas →" se convierte en la flechita de la
     derecha. El texto sigue ahí para quien usa lector de pantalla:
     se achica a cero, no se borra.

     OJO: el enlace NO puede llevar "position: absolute". La capa
     invisible que hace que se toque toda la tarjeta se mide contra
     el primer padre posicionado; si el enlace se posiciona, la capa
     se encoge al tamaño de la flechita y deja de funcionar el resto
     de la tarjeta. Por eso el que se mueve es el <span>, no el <a>. */
  .card .link {
    position: static;
    font-size: 0;
    gap: 0;
    padding: 0;
    border: 0;
    height: 0;
    color: var(--ink-mute);
  }
  .card .link span {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.45rem;
    line-height: 1;
  }
  .card:hover .link { gap: 0; border-color: transparent; }

  /* Al tocar, el renglón se pinta: es la señal de que sí registró. */
  .card:active { transform: none; background: var(--bg-alt); }

  .grid { gap: 12px; }
}

/* ================================================================
   VIDEO
   ================================================================ */

/* El video dentro de la ficha del mueble. */
.prod__video { margin: 0 0 20px; }

.prod__video video {
  width: 100%;
  display: block;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #000;
  box-shadow: var(--shadow);
}

.prod__video figcaption {
  margin-top: 8px;
  font-size: .82rem;
  color: var(--ink-mute);
}

/* ---------------- Precios ----------------
   El precio va en el mismo renglón del botón de WhatsApp, en
   letra chica y del mismo color gris de las etiquetas. La idea
   es que el número se lea de inmediato para quien lo anda
   buscando, pero que no grite: nada de rojo, nada de recuadro,
   nada de "OFERTA". A quien nada más está viendo fotos, no le
   estorba.

   PARA CAMBIAR UN PRECIO: ábrelo en la página del mueble (por
   ejemplo recamaras.html), busca el número y cámbialo. Se ve
   así, y lo único que se toca es lo que está entre <b> y </b>:

     <span class="prod__price"><b>$17,538</b> · recámara completa</span>
*/

.prod__price b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: .01em;
}

/* La nota de pagos y tiempos de entrega va una sola vez arriba
   de cada catálogo, para no repetirla debajo de cada mueble.
   Lleva dos renglones: el del anticipo y el de la disponibilidad. */
.page-head__nota {
  margin-top: 1.6rem;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  max-width: 70ch;
  font-size: .76rem;
  line-height: 1.75;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.page-head__nota strong { color: var(--accent); font-weight: 500; }

/* En celular el precio se pone ARRIBA del botón de WhatsApp.
   Se lee primero cuánto cuesta y luego el botón para cotizar,
   que es el orden en que uno decide. */
@media (max-width: 720px) {
  .prod__price { order: -1; margin-bottom: 4px; }
}

/* ---------------- El riel de fotos ----------------
   Las fotos de cada mueble van una junto a otra y se pasan
   jalando con el dedo hacia la izquierda. Debajo quedan unos
   puntitos que dicen en cuál vas; en computadora salen además
   dos flechas al pasar el ratón encima.

   El riel lo arma solo el archivo script.js con la foto grande
   y las fotitas que ya están escritas en cada página. Aquí nada
   más está cómo se ve.
*/

.prod__foto { min-width: 0; }

.riel {
  position: relative;
  border-radius: var(--r);
}

/* La tira que se desliza. El "scroll-snap" es lo que hace que
   se detenga justo en cada foto en vez de quedar a medias. */
.riel__pista {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;   /* que no se vaya para atrás en el navegador */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* sin barrita gris */
  -ms-overflow-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--bg-alt);
  box-shadow: var(--shadow);
}
.riel__pista::-webkit-scrollbar { display: none; }
.riel__pista.jalando { scroll-snap-type: none; cursor: grabbing; }

/* Cada foto ocupa el ancho completo del riel. La forma (--forma)
   la pone script.js con la medida real de la foto principal, para
   que a todas les toque el mismo alto y el riel no brinque. */
.riel__foto {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  aspect-ratio: var(--forma, 3 / 2);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Los puntitos */
.riel__puntos {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}
.riel__punto {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background .2s, width .2s;
}
.riel__punto:hover { background: var(--ink-mute); }
.riel__punto.es { background: var(--accent); width: 20px; border-radius: 4px; }
.riel__punto:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Las flechas. En celular no van: ahí se jala con el dedo. */
.riel__flecha {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s, background .2s;
}
.riel__flecha--izq { left: 12px; }
.riel__flecha--der { right: 12px; }
.riel:hover .riel__flecha { opacity: 1; }
.riel__flecha:hover { background: var(--white); }
.riel__flecha:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.riel__flecha[disabled] { opacity: 0 !important; pointer-events: none; }

@media (hover: hover) and (min-width: 721px) {
  .riel__flecha { display: flex; }
}

/* ---------------- El precio, debajo de las fotos ----------------
   Va en la letra clásica (la misma de los títulos) y en un tamaño
   más chico que el nombre del mueble, para que se lea de inmediato
   sin gritar.

   El precio se sigue escribiendo dentro de la página, en el mismo
   renglón del botón verde:

     <span class="prod__price"><b>$17,538</b> · recámara completa</span>

   script.js lo cambia de lugar al abrir la página. Si se cambia el
   número ahí, aquí se ve solo.
*/
.prod__precio {
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.prod__precio b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.2vw, 1.85rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: .015em;
}
.prod__precio span {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 720px) {
  .prod__precio { margin-top: 16px; }
}

/* ---------------- El nombre arriba de las fotos ----------------
   El nombre del mueble y su etiqueta se pasan hasta arriba de la
   ficha, cruzando de lado a lado. Antes iban en la columna del
   texto, o sea que en el celular se veía primero la foto y había
   que bajar para saber de qué mueble era.

   Quien lo cambia de lugar es script.js. Aquí solo se le dice que
   ocupe el renglón completo y que vaya siempre primero. */
.prod__cab {
  order: -1;                 /* siempre arriba, aunque la foto vaya a la derecha */
  grid-column: 1 / -1;       /* de lado a lado */
}
.prod__cab .prod__name { margin-bottom: 0; }
.prod__cab .prod__tag { margin-bottom: 8px; }

/* Los renglones de la ficha se juntan un poco: el nombre no
   necesita el mismo aire que hay entre la foto y el texto. */
.prod {
  column-gap: clamp(28px, 4vw, 58px);
  row-gap: clamp(14px, 1.8vw, 22px);
}

/* ---------------- Franja de las telas ----------------
   Va pegada debajo de la portada, después de la línea de "entrega
   asegurada". Se puso en la letra clásica y grande porque es lo
   primero que se lee al bajar: es el argumento de por qué la sala
   cuesta lo que cuesta. Solo está en la página de inicio. */

.telas {
  background: var(--bg);
  padding: clamp(46px, 6vw, 78px) 0;
}
/* El recuadro azul marino con las letras beige. */
.telas__caja {
  max-width: 70ch;
  margin-inline: auto;
  padding: clamp(30px, 4vw, 50px) clamp(22px, 4vw, 52px);
  background: var(--marino);
  border-radius: var(--r);
  text-align: center;
}
.telas__caja .eyebrow { color: var(--beige-mute); }
.telas__texto {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: clamp(1.14rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: var(--beige);
}
.telas__texto strong {
  font-weight: 500;
  color: var(--dorado);
}

@media (max-width: 720px) {
  .telas { padding: 40px 0; }
}

/* ================================================================
   LOS RECUADROS DE COLOR DEL CATÁLOGO
   ================================================================
   Cada línea de muebles tiene su color, y el letrero de abajo de su
   tarjeta va pintado de ese color con las letras en beige:

     card--sala      azul grisáceo
     card--recamara  verde salvia
     card--arte      terracota

   Para cambiarle el color a una tarjeta, en index.html se cambia esa
   palabra por otra de las tres. Los tonos exactos están hasta arriba
   de este archivo, donde dice "--sala".
   ================================================================ */

.card--sala     { border-color: var(--sala-dk); }
.card--recamara { border-color: var(--recamara-dk); }
.card--arte     { border-color: var(--arte-dk); }

.card--sala     .card__body { background: var(--sala); }
.card--recamara .card__body { background: var(--recamara); }
.card--arte     .card__body { background: var(--arte); }

.card--sala     .card__body,
.card--recamara .card__body,
.card--arte     .card__body { color: var(--beige); }

/* La frase de abajo va un poco más tenue que el nombre, para que
   el nombre siga siendo lo primero que se ve. */
.card--sala     .card__body p,
.card--recamara .card__body p,
.card--arte     .card__body p { color: var(--beige); opacity: .82; }

.card--sala     .card__count,
.card--recamara .card__count,
.card--arte     .card__count { color: var(--beige-mute); }

.card--sala     .link,
.card--recamara .link,
.card--arte     .link { color: var(--dorado); }

.card--sala:hover     .link,
.card--recamara:hover .link,
.card--arte:hover     .link { border-color: var(--dorado); }

@media (max-width: 720px) {
  /* Al tocar el renglón se oscurece: es la señal de que sí registró.
     (El gris de las tarjetas normales aquí ya no se vería.) */
  .card--sala:active     .card__body { background: var(--sala-dk); }
  .card--recamara:active .card__body { background: var(--recamara-dk); }
  .card--arte:active     .card__body { background: var(--arte-dk); }
}

/* ================================================================
   TEXTO JUSTIFICADO
   ================================================================
   Los párrafos van parejos de los dos lados, como en un catálogo
   impreso, en lugar de quedar picudos a la derecha.

   "hyphens: auto" deja que el navegador parta las palabras largas
   con guion. Sin eso, en la pantalla angosta del celular quedan
   huecos grandotes entre palabra y palabra. La página está marcada
   como español (lang="es" hasta arriba de cada archivo), así que
   parte las palabras con las reglas del español.

   Si algún día quieres regresar todo a la izquierda, borra este
   bloque completo y ya.
   ================================================================ */

.lead,
.prod__desc,
.telas__texto,
.section__sub,
.card__body p,
.step p,
.ship__text p,
.contact__text p:not(.eyebrow),
.hero__promise,
.footer__tag,
.footer__copy {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media (max-width: 720px) {
  /* Única excepción: en el celular la frase de las tarjetas del
     catálogo va cortada a dos renglones. Justificada, el renglón
     cortado se estiraría de lado a lado y los puntos suspensivos
     quedarían volando. Esa se queda a la izquierda. */
  .card__body p { text-align: left; }
}

/* Los párrafos que van en un bloque centrado —la franja oscura del
   final, el recuadro de WhatsApp, el pie de foto de la lupa y la
   franja de envíos en el celular— también van parejos de los dos
   lados, pero el ÚLTIMO renglón se queda centrado. Si no, ese
   renglón se pegaría a la izquierda y rompería el centrado de todo
   lo demás (el título y los botones sí van centrados). */
.cta p,
.wa-panel p,
.lupa__pie {
  text-align: justify;
  text-align-last: center;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media (max-width: 720px) {
  .ship__text p { text-align: justify; text-align-last: center; }
}

/* ================================================================
   EL CARRETE DE LA PORTADA
   ================================================================
   La tira de fotos que se desliza sola hacia la izquierda, entre
   el nombre de arriba y el eslogan.

   Va con "position: absolute" adentro del hero: eso quiere decir
   que flota encima de la foto de fondo y NO ocupa lugar. Nada de
   lo que está abajo se mueve por su culpa.

   "pointer-events: none" en la tira hace que el dedo y el mouse la
   atraviesen: los huecos entre foto y foto y la banda vacía no
   estorban para tocar lo que esté debajo. Las fotos SÍ se tocan
   —cada una lleva a la página de su mueble— porque abajo se les
   regresa con "pointer-events: auto".

   Las medidas de cada foto están en "--foto-ancho" y "--foto-alto".
   ================================================================ */

.carrete {
  --foto-ancho: clamp(178px, 26vw, 312px);
  --foto-alto:  clamp(116px, 17vh, 198px);

  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--nav-h) + clamp(18px, 4.5vh, 46px));
  overflow: hidden;
  pointer-events: none;

  /* Las orillas se desvanecen: así las fotos entran y salen de la
     pantalla en vez de cortarse de golpe contra el borde. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.carrete__pista {
  display: flex;
  gap: clamp(10px, 1.3vw, 18px);
  width: max-content;
}

/* Cada mueble del carrete: la foto y, debajo, su nombre y su precio. */
.carrete__pieza {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: var(--foto-ancho);
  text-align: center;
  color: var(--beige);

  /* esto es lo que hace que sí se pueda tocar aunque la tira
     completa esté puesta para que el dedo la atraviese */
  pointer-events: auto;
  cursor: pointer;
  transition: transform .3s;
}

.carrete__foto {
  display: block;
  width: 100%;
  height: var(--foto-alto);
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, .06);
  border-radius: var(--r);

  /* la sombra de afuera y la rayita blanca de adentro, en una sola
     línea, para dejar libre el "outline" y usarlo al navegar con
     el tabulador */
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .38),
    inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: box-shadow .3s;
}

/* El nombre y el precio, juntos en una caja. */
.carrete__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}

/* El nombre y el precio van sobre la foto de fondo del hero, que
   cambia de claro a oscuro. La sombra negra detrás de la letra es
   lo que los deja legibles pase lo que pase. */
.carrete__nombre {
  font-family: var(--serif);
  font-size: clamp(.98rem, 1.35vw, 1.16rem);
  line-height: 1.15;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
}

.carrete__precio {
  font-size: clamp(.66rem, .85vw, .74rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dorado);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}

.carrete__pieza:hover { transform: translateY(-4px); }
.carrete__pieza:hover .carrete__foto {
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .4);
}

.carrete__pieza:focus-visible {
  outline: 2px solid var(--beige);
  outline-offset: 4px;
  border-radius: var(--r);
}

/* ---- Cuando el hueco es chiquito ----
   Antes, si no alcanzaba el lugar, el nombre y el precio se metían
   ENCIMA de la foto. Ya no: van siempre debajo, y lo que se achica
   es la foto. De eso se encarga script.js. */

/* La tira se detiene mientras el mouse está encima o mientras se
   llega con el tabulador: si no, habría que perseguir la foto para
   poder darle clic. */
.carrete.anda .carrete__pista:hover,
.carrete.anda .carrete__pista:focus-within {
  animation-play-state: paused;
}

/* La clase "anda" se la pone script.js cuando ya midió la tira y
   ya hizo las copias. Sin JavaScript el carrete se queda quieto
   con sus tres fotos, que también se ve bien. */
.carrete.anda .carrete__pista {
  animation: carreteVa var(--tiempo, 30s) linear infinite;
}

@keyframes carreteVa {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--paso, 0px))); }
}

/* Si en el celular está activado "reducir movimiento", se detiene. */
@media (prefers-reduced-motion: reduce) {
  .carrete.anda .carrete__pista { animation: none; }
}

/* El tamaño del carrete lo calcula script.js midiendo el hueco real
   que queda entre la barra de arriba y el eslogan, y si de plano no
   cabe le pone la clase "sinlugar". Así se ve en cualquier pantalla,
   no nada más en las altas.

   OJO: aquí había una regla que lo escondía en toda pantalla de menos
   de 620 px de alto. En el celular la pantalla útil casi siempre es
   más baja que eso —el navegador se come una parte arriba y otra
   abajo—, así que el carrete no aparecía nunca. */
.carrete.sinlugar { display: none; }

/* Si el JavaScript no corre, el carrete se queda con el tamaño de
   arriba. Solo en una pantalla verdaderamente bajita —un celular
   acostado— se quita, porque ahí sí se encimaría con el eslogan. */
@media (max-height: 430px) {
  .carrete { display: none; }
}

/* ================================================================
   LOS TIPOS DE MUEBLE, EN CARRETE
   ================================================================
   En "Salas" y en "Arte exclusivo", las tarjetas de cada tipo ya no
   van en cuadrícula: van en una tira que se jala de lado, igual que
   las fotos de cada mueble. Al soltar, la tarjeta se acomoda sola
   (eso es el "scroll-snap"). Cada tarjeta lleva directo a los
   modelos de ese tipo.

   Se prende poniéndole "grid--riel" al <div class="grid"> de la
   página. Quitando esa palabra, regresa a la cuadrícula de antes.
   ================================================================ */

.grid--riel {
  display: flex;
  grid-template-columns: none;      /* apaga la cuadrícula */
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  /* la barra de deslizar se esconde: la tira se jala con el dedo */
  scrollbar-width: none;

  /* aire abajo para que no se corte la sombra al levantar la
     tarjeta, y a los lados para que la primera y la última no
     queden pegadas al borde de la pantalla */
  padding-bottom: 10px;
  scroll-padding-inline: 2px;
}
.grid--riel::-webkit-scrollbar { display: none; }

.grid--riel > .card {
  flex: 0 0 clamp(250px, 31%, 340px);
  scroll-snap-align: start;
}

/* Mientras se está jalando con el mouse, el acomodo automático se
   apaga: si no, la tira pelea contra la mano. */
.grid--riel.jalando {
  scroll-snap-type: none;
  cursor: grabbing;
}
.grid--riel.jalando > .card { pointer-events: none; }

@media (max-width: 720px) {
  /* En el celular las tarjetas normales son renglones de menú
     (foto chica a la izquierda). Dentro del carrete vuelven a ser
     tarjetas de verdad, con la foto arriba, porque así se ven
     varias de lado y se entiende que la tira se jala. */
  .grid--riel { gap: 12px; }

  .grid--riel > .card {
    flex: 0 0 76%;
    flex-direction: column;
    min-height: 0;
  }
  .grid--riel > .card .card__img {
    width: auto;
    aspect-ratio: 3 / 2;
    align-self: auto;
  }
  .grid--riel > .card .card__body {
    padding: 16px 18px 20px;
    gap: 8px;
  }
  .grid--riel > .card .card__body p { -webkit-line-clamp: 3; }

  /* El renglón "Ver sofás →" regresa: aquí ya no hay flechita
     pegada a la derecha porque la tarjeta ya no es un renglón. */
  .grid--riel > .card .link {
    font-size: .72rem;
    gap: 8px;
    height: auto;
    color: var(--accent);
  }
  .grid--riel > .card .link span {
    position: static;
    transform: none;
    font-size: 1rem;
  }
}

/* =====================================================================
   ELEGIR LA TELA
   =====================================================================
   Debajo de las fotos de cada mueble sale una fila de circulitos, uno
   por cada tela en la que lo tenemos. Al darle clic a uno, la foto de
   arriba cambia a ese color.

   ---- COMO SE LE AGREGA UNA TELA A UN MUEBLE ----
   1) Sube la foto del mueble en esa tela a la carpeta "img".
   2) En la pagina del mueble, en el renglon de esa foto, escribe
      antes de loading="lazy" esto:   data-color="Azul marino"
      (con el nombre de la tela tal como quieres que se lea).
   3) Listo. El circulito aparece solo.

   ---- COMO SE VE EL CIRCULITO ----
   Cada tela tiene aqui abajo su renglon. Puede llevar dos cosas:
     background-color  = el color liso, por si todavia no hay foto
     background-image  = la FOTO DE LA TELA, si ya existe
   La foto de la tela va en la carpeta   img/telas
   y se llama igual que la tela, en minusculas, sin acentos y con
   guiones en vez de espacios:  "Azul marino"  ->  azul-marino.jpg
   Mientras esa foto no exista, se ve el color liso y no se rompe nada.
   ===================================================================== */

.telas-pick {
  margin: 16px 0 0;
}

.telas-pick__eyebrow {
  margin: 0 0 10px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.telas-pick__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.tela {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 74px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tela__muestra {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #cfc6b8;          /* el color de una tela que no esta en la lista */
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(28, 26, 23, .18);
  transition: box-shadow .2s ease, transform .2s ease;
}

.tela__nombre {
  font-size: .69rem;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-mute);
  transition: color .2s ease;
}

.tela:hover .tela__muestra { transform: scale(1.07); }

/* La tela que se esta viendo ahorita: anillo cafe alrededor. */
.tela.es .tela__muestra {
  box-shadow: inset 0 0 0 1px rgba(28, 26, 23, .18),
              0 0 0 2px var(--bg),
              0 0 0 4px var(--accent);
}
.tela.es .tela__nombre { color: var(--ink); }

.tela:focus-visible .tela__muestra {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

@media (max-width: 560px) {
  .tela { width: 66px; }
  .tela__muestra { width: 38px; height: 38px; }
}

/* ---- LA LISTA DE TELAS ----
   Un renglon por tela. Cambia el numero de color si no le atinamos,
   o sube la foto a img/telas para que se vea la tela de verdad. */

.tela--hueso .tela__muestra             { background-color: #efe7da; background-image: url('img/telas/hueso.jpg'); }
.tela--beige .tela__muestra             { background-color: #ded0b8; background-image: url('img/telas/beige.jpg'); }
.tela--crema .tela__muestra             { background-color: #f0e6d4; background-image: url('img/telas/crema.jpg'); }
.tela--camel .tela__muestra             { background-color: #b98b5e; background-image: url('img/telas/camel.jpg'); }
.tela--arena .tela__muestra             { background-color: #d6c7ae; background-image: url('img/telas/arena.jpg'); }
.tela--gris-claro .tela__muestra        { background-color: #b9b6b1; background-image: url('img/telas/gris-claro.jpg'); }
.tela--gris .tela__muestra              { background-color: #8d8d8d; background-image: url('img/telas/gris.jpg'); }
.tela--gris-oscuro .tela__muestra       { background-color: #4a4a4c; background-image: url('img/telas/gris-oscuro.jpg'); }
.tela--negro .tela__muestra             { background-color: #232323; background-image: url('img/telas/negro.jpg'); }
.tela--negro-texturizado .tela__muestra { background-color: #2f2f2f; background-image: url('img/telas/negro-texturizado.jpg'); }
.tela--azul-marino .tela__muestra       { background-color: #23304d; background-image: url('img/telas/azul-marino.jpg'); }
.tela--azul-acero .tela__muestra        { background-color: #4d6478; background-image: url('img/telas/azul-acero.jpg'); }
.tela--azul-cielo .tela__muestra        { background-color: #8fa9c2; background-image: url('img/telas/azul-cielo.jpg'); }
.tela--verde-limon .tela__muestra       { background-color: #93b04b; background-image: url('img/telas/verde-limon.jpg'); }
.tela--verde-salvia .tela__muestra      { background-color: #7d8a6e; background-image: url('img/telas/verde-salvia.jpg'); }
.tela--amarillo-mostaza .tela__muestra  { background-color: #cfa22b; background-image: url('img/telas/amarillo-mostaza.jpg'); }
.tela--terracota .tela__muestra         { background-color: #a9563a; background-image: url('img/telas/terracota.jpg'); }
.tela--vino .tela__muestra              { background-color: #6d2733; background-image: url('img/telas/vino.jpg'); }
.tela--rosa .tela__muestra              { background-color: #e0b7bd; background-image: url('img/telas/rosa.jpg'); }
.tela--chocolate .tela__muestra         { background-color: #4a3527; background-image: url('img/telas/chocolate.jpg'); }
.tela--nogal .tela__muestra             { background-color: #6b4426; background-image: url('img/telas/nogal.jpg'); }
.tela--blanco .tela__muestra            { background-color: #f4f2ee; background-image: url('img/telas/blanco.jpg'); }

/* =====================================================================
   MENOS AIRE ENTRE LA INTRODUCCION Y LAS FOTOS
   =====================================================================
   Antes, entre el titulo de la familia y la primera foto habia como
   180 pixeles de nada: el final del encabezado mas el principio de la
   seccion. En el celular eso era media pantalla vacia. Aqui se recorta.
   ===================================================================== */

.page-head { padding-bottom: clamp(22px, 3vw, 32px); }

main > .section:first-child,
main > .modelos:first-child { padding-top: clamp(26px, 3.4vw, 40px); }

.section__head { margin-bottom: clamp(26px, 3.2vw, 40px); }
.type-head { padding-top: 26px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.prod-list { gap: clamp(46px, 5.5vw, 78px); }

@media (max-width: 560px) {
  .section__head { margin-bottom: 24px; }
  .prod-list { gap: 42px; }
}

/* =====================================================================
   EL RIEL DE MODELOS
   =====================================================================
   Arriba de cada catalogo va una tira de recuadros grandes: uno por
   modelo, con su foto de portada, su nombre y su precio. Se jala hacia
   la izquierda con el dedo o con el mouse, y al darle clic a uno baja
   a la ficha de ese mueble.

   ---- COMO SE LE AGREGA UN MODELO ----
   Se copian los siete renglones de un modelo y se cambian cuatro cosas:
     href="#oslo"        -> el nombre de la ficha a la que baja
     url('img/....jpg')  -> la foto de portada
     el nombre
     el precio

   El ANCHO de cada recuadro no se escribe: lo calcula script.js con la
   forma real de la foto, para que ninguna salga estirada ni recortada
   de mas. Todos miden lo mismo de alto.
   ===================================================================== */

.modelos {
  padding: clamp(26px, 3.4vw, 40px) 0 clamp(6px, 1.4vw, 16px);
}

.modelos__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.modelos__cab .eyebrow { margin: 0; }

.modelos__pista-txt {
  margin: 0;
  font-size: .74rem;
  color: var(--ink-mute);
  letter-spacing: .04em;
  white-space: nowrap;
}

.modelos__riel {
  --alto: clamp(186px, 22vw, 272px);
  display: flex;
  gap: clamp(12px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 8px;
  scroll-padding-inline: 2px;
}
.modelos__riel::-webkit-scrollbar { display: none; }
.modelos__riel.jalando { scroll-snap-type: none; cursor: grabbing; }
.modelos__riel.jalando .modelo { pointer-events: none; }

.modelo {
  flex: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: calc(var(--alto) * var(--forma, 1.45));
  max-width: 84vw;
  border-radius: var(--r);
}

.modelo__foto {
  display: block;
  height: var(--alto);
  border-radius: var(--r);
  background-size: cover;
  background-position: center;
  background-color: var(--bg-alt);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .35s ease, box-shadow .35s ease;
}

.modelo__pie {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 6px;
}

.modelo__nombre {
  font-family: var(--serif);
  font-size: clamp(1.14rem, 1.7vw, 1.4rem);
  line-height: 1.15;
  color: var(--ink);
}

.modelo__precio {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--accent);
  letter-spacing: .01em;
}

.modelo:hover .modelo__foto {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(28, 26, 23, .20);
}
.modelo:active .modelo__foto { transform: translateY(-1px); }
.modelo:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

@media (max-width: 560px) {
  .modelos__pista-txt { display: none; }
  .modelos__riel { --alto: clamp(168px, 46vw, 214px); }
}

@media (prefers-reduced-motion: reduce) {
  .modelo__foto, .modelo:hover .modelo__foto { transform: none; transition: none; }
}

/* =====================================================================
   LA LUPA, AHORA CON TODAS LAS FOTOS DEL MUEBLE
   =====================================================================
   Antes, al darle clic a una foto se abria SOLA. Ahora se abre esa y
   las demas del mismo mueble quedan a un lado: se pasa con las flechas,
   con el dedo o con las teclas de izquierda y derecha.
   ===================================================================== */

.lupa__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-family: var(--sans);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.lupa__flecha:hover { background: rgba(255, 255, 255, .32); }
.lupa__flecha--izq { left: 14px; }
.lupa__flecha--der { right: 14px; }
.lupa__flecha[hidden] { display: none; }
.lupa__flecha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lupa__cuenta {
  display: block;
  margin-top: 3px;
  font-size: .76rem;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 560px) {
  .lupa__flecha { width: 44px; height: 44px; font-size: 1.6rem; }
  .lupa__flecha--izq { left: 6px; }
  .lupa__flecha--der { right: 6px; }
}

/* Los recuadros del riel entran uno tras otro, no todos de golpe. */
.modelos__riel .modelo { animation: modeloEntra .5s ease-out both; }
.modelos__riel .modelo:nth-child(1) { animation-delay: .05s; }
.modelos__riel .modelo:nth-child(2) { animation-delay: .12s; }
.modelos__riel .modelo:nth-child(3) { animation-delay: .19s; }
.modelos__riel .modelo:nth-child(4) { animation-delay: .26s; }
.modelos__riel .modelo:nth-child(5) { animation-delay: .33s; }
.modelos__riel .modelo:nth-child(6) { animation-delay: .40s; }
.modelos__riel .modelo:nth-child(7) { animation-delay: .47s; }
.modelos__riel .modelo:nth-child(8) { animation-delay: .54s; }

@keyframes modeloEntra {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modelos__riel .modelo { animation: none; }
}

/* =====================================================================
   TEXTOS MAS JUNTOS
   =====================================================================
   Dos huecos que quedaban muy grandes:

     1) Entre el TITULO y su DESCRIPCION.
     2) Entre la DESCRIPCION y las FOTOS que van debajo.

   Aqui se aprietan los dos. Si algun dia quieres MAS aire, sube los
   numeros de este bloque; para menos aire, bajalos. Cada renglon dice
   a que parte de la pagina le toca.
   ===================================================================== */

/* ---- 1. Del titulo a la descripcion ---- */

.hero .lead            { margin-top: .9rem; }    /* eslogan del inicio */
.page-head p.lead      { margin-top: .75rem; }   /* titulo de cada familia */
.section__sub          { margin-top: .65rem; }   /* subtitulo de una seccion */
.type-head h2          { margin-bottom: 5px; }   /* titulo de un tipo de mueble */
.prod__cab .prod__tag  { margin-bottom: 5px; }   /* etiqueta arriba del nombre */
.cta h2                { margin-bottom: 10px; }  /* franja oscura de cierre */
.wa-panel h3           { margin-bottom: 8px; }
.step h3               { margin-bottom: 5px; }

/* ---- 2. De la descripcion a las fotos ---- */

.page-head { padding-bottom: clamp(14px, 2vw, 22px); }

main > .section:first-child,
main > .modelos:first-child { padding-top: clamp(16px, 2.2vw, 26px); }

.section__head    { margin-bottom: clamp(18px, 2.2vw, 28px); }
.type-head        { padding-top: 20px; margin-bottom: clamp(12px, 1.6vw, 18px); }
.typenav          { margin-top: 1.3rem; }
.modelos__cab     { margin-bottom: 10px; }
.page-head__nota  { margin-top: 1rem; padding-top: 12px; }

/* El nombre del mueble y la foto que va debajo */
.prod { row-gap: clamp(10px, 1.3vw, 16px); }

/* La descripcion del mueble y su ficha tecnica */
.specs { margin: 18px 0 22px; }

@media (max-width: 560px) {
  .lead          { margin-top: .7rem; }
  .section__head { margin-bottom: 18px; }
  .typenav       { margin-top: 1.1rem; }
}

/* Un apretón más: el rengloncito de arriba pegado a su título, y la
   introducción pegada al riel de fotos. */
.eyebrow { margin-bottom: .7rem; }

.page-head { padding-bottom: clamp(10px, 1.6vw, 18px); }

main > .section:first-child,
main > .modelos:first-child { padding-top: clamp(12px, 1.8vw, 20px); }

.modelos__cab { margin-bottom: 8px; }

/* ================================================================
   LAS LETRAS NUEVAS: FRAUNCES Y INTER
   ----------------------------------------------------------------
   Los titulos van en Fraunces 600 y todo lo demas en Inter.
   Fraunces ocupa mas espacio que la letra anterior, asi que aqui
   se acomodan los tamaños de las piezas sueltas que tambien van
   en Fraunces (el logotipo, los precios, los nombres del riel).

   Cada renglon dice a que parte de la pagina le toca.
   Para agrandar algo, sube su numero; para achicarlo, bajalo.
   ================================================================ */

.logo__text      { font-size: 1.14rem; font-weight: 600; letter-spacing: -.01em; }
.logo__mark      { font-weight: 600; }

.step__num       { font-size: 1.8rem;  font-weight: 600; }   /* el 01, 02, 03 de "Como trabajamos" */
.strip__item strong { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; }  /* la franja de datos */

.prod__price b   { font-size: 1.2rem;  font-weight: 600; }   /* precio chico */
.prod__precio b  { font-size: clamp(1.35rem, 1.9vw, 1.6rem); font-weight: 600; }   /* precio grande de la ficha */

.carrete__nombre { font-size: clamp(.92rem, 1.25vw, 1.06rem); font-weight: 600; }  /* el riel de la portada */
.modelo__nombre  { font-size: clamp(1.02rem, 1.5vw, 1.24rem); font-weight: 600; }  /* nombre en el riel de modelos */
.modelo__precio  { font-size: clamp(.92rem, 1.2vw, 1rem);     font-weight: 600; }

/* El parrafo grande del recuadro azul de las telas: ahi Fraunces se
   deja delgada, porque son varios renglones seguidos. */
.telas__texto        { font-size: clamp(1.02rem, 1.6vw, 1.28rem); font-weight: 400; }
.telas__texto strong { font-weight: 600; }

/* Inter 500 para los botones y las etiquetas (antes iban en 500 tambien,
   se deja escrito aqui para que no queden en un peso que no existe). */
.btn, .link, .eyebrow, .wa { font-weight: 500; }

/* El titulo mas grande, el de la portada, con un pelo mas de aire
   entre renglon y renglon porque Fraunces es mas alta. */
.hero h1 { line-height: 1.1; }

/* ================================================================
   LOS ENCABEZADOS DE COLOR
   ----------------------------------------------------------------
   Cada linea de muebles lleva su franja de arriba en su color:

     Salas .............. azul grisaceo   (--sala)
     Recamaras .......... verde salvia    (--recamara)
     Arte exclusivo ..... verde profundo  (--arte)

   Los tres colores estan arriba, en la lista de :root. Si quieres
   cambiar un tono, se cambia alla y cambia en todas sus paginas.

   Para prender el color en una pagina se le ponen DOS palabras al
   encabezado: "page-head--color" (que va de color) y el nombre de
   la linea (de que color):

     <section class="page-head page-head--color tema-sala">

   Si algun dia quieres una pagina sin color, le quitas esas dos
   palabras y vuelve al crema de antes.
   ================================================================ */

/* ---- 1. De que color va cada linea ---- */
.page-head.tema-sala     { --tono: var(--sala);     --tono-dk: var(--sala-dk); }
.page-head.tema-recamara { --tono: var(--recamara); --tono-dk: var(--recamara-dk); }
.page-head.tema-arte     { --tono: var(--arte);     --tono-dk: var(--arte-dk); }

/* ---- 2. Como se ve un encabezado de color (igual para los tres) ---- */
.page-head--color {
  background: var(--tono);
  border-bottom-color: var(--tono-dk);
}
.page-head--color h1       { color: var(--beige); }
.page-head--color .eyebrow { color: var(--dorado); }
.page-head--color p.lead   { color: rgba(236, 224, 204, .84); }

.page-head--color .page-head__back        { color: rgba(236, 224, 204, .74); }
.page-head--color .page-head__back:hover  { color: var(--dorado); }

.page-head--color .page-head__nota        { color: rgba(236, 224, 204, .74);
                                            border-top-color: rgba(236, 224, 204, .22); }
.page-head--color .page-head__nota strong { color: var(--dorado); }

/* Las pastillas del indice, encima del color */
.page-head--color .typenav a {
  background: transparent;
  border-color: rgba(236, 224, 204, .34);
  color: var(--beige);
}
.page-head--color .typenav a:hover {
  background: var(--beige);
  border-color: var(--beige);
  color: var(--tono);
}

/* Cualquier otro enlace dentro de la franja */
.page-head--color a:hover { color: var(--dorado); }

/* ================================================================
   LO QUE SE AGREGO EL 26 DE AGOSTO (TARDE)
   ================================================================ */

/* ---- 1. El logotipo dentro del circulo ----
   Antes decia "MB". Ahora lleva el logo dibujado: el triangulo con
   el cubo adentro. Va dibujado con lineas, no con una foto, asi que
   toma el color de donde este: blanco encima de la foto de la
   portada, oscuro sobre el crema y crema sobre las franjas de color.
   Para hacerlo mas grande o mas chico se cambia este numero. */
.logo__mark svg { width: 24px; height: auto; display: block; }

/* ---- 2. La barra de confianza, ahora con dos frases ---- */
.strip__grid--dos { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) {
  .strip__grid--dos { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- 3. Las fotos completas (recamaras) ----
   Las hojas de recamara traen el mueble, los detalles y la tabla de
   medidas, todo en la misma foto. Con "cover" el recuadro las
   recortaba; con "contain" se ve la hoja entera aunque queden
   franjas a los lados. Se prende poniendo class="fotos-completas"
   en el <main> de la pagina. */
.fotos-completas .prod__media {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bg-alt);
}

/* ================================================================
   LO QUE SE AGREGO EL 27 DE AGOSTO
   ================================================================ */

/* ---- 1. El eslogan debajo de "Madera Brava" ----------------------
   En la barra de arriba, el nombre y el eslogan van uno encima del
   otro. Si quieres el eslogan mas grande o mas chico, cambia el
   "font-size" de .logo__slogan. Si no lo quieres, borra el renglon
   del eslogan en el HTML de cada pagina (esta junto a "Madera
   Brava", en la barra de arriba). */
.logo__nombre { display: grid; gap: 3px; }
.logo__text   { line-height: 1.04; }
.logo__slogan {
  font-family: var(--sans);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  opacity: .74;
  white-space: nowrap;
  line-height: 1;
}
/* El eslogan se esconde donde no cabe: en pantallas muy angostas,
   y en la franja de 721 a 1100 px, donde el menu completo de arriba
   ya no le deja lugar. */
@media (max-width: 384px) { .logo__slogan { display: none; } }
/* En celular el eslogan va un poco mas chico, para que no llegue
   hasta el boton del menu. */
@media (max-width: 560px) { .logo__slogan { font-size: .52rem; letter-spacing: .14em; } }
@media (min-width: 721px) and (max-width: 1100px) { .logo__slogan { display: none; } }

/* ---- 2. La barra de confianza, ahora con tres frases ---- */
.strip__grid--tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .strip__grid--tres { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- 3. Los puntos de la franja de envios ------------------------
   La lista de renglones con bolita que va debajo del titulo de
   "Envios". Cada renglon es un <li> en index.html. */
.ship__puntos {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 76ch;
}
.ship__puntos li {
  position: relative;
  padding-left: 19px;
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
}
.ship__puntos li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}
.ship__puntos strong { font-weight: 500; color: var(--white); }

/* En celular la franja se centra: la lista se queda alineada a la
   izquierda para que las bolitas no queden en zigzag. */
@media (max-width: 860px) {
  .ship__puntos { text-align: left; margin-inline: auto; }
}

/* ================================================================
   LA PORTADA CON EL CARRETE EN SU LUGAR (27 de agosto, tarde)
   ----------------------------------------------------------------
   Antes el carrete iba flotando encima de la foto de portada, y en
   pantallas bajitas el nombre se le montaba a la foto. Ahora va en
   fila, justo debajo del eslogan, y el nombre y el precio van
   SIEMPRE debajo de la foto.

   La portada quedo en dos grupos, uno arriba y otro abajo:

     .hero__arriba  = el eslogan y el carrete
     .hero__abajo   = los tres botones y la linea del anticipo

   En medio se ve la foto sola. Si algun dia quieres los dos grupos
   juntos abajo, cambia "space-between" por "flex-end".
   ================================================================ */
.hero {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding-top: calc(var(--nav-h) + clamp(16px, 3.4vh, 44px));
  padding-bottom: clamp(38px, 7vh, 96px);
}
.hero__arriba { position: relative; width: 100%; }
.hero__abajo  { position: relative; }

/* Los botones ya no llevan el aire de antes: ahora son lo primero
   del grupo de abajo. */
.hero__abajo .hero__lines { margin-top: 0; }

/* El carrete deja de ir encimado y pasa a la fila. */
.carrete {
  position: static;
  inset: auto;
  width: 100%;
  margin-top: clamp(20px, 3.2vh, 42px);
}

@media (max-width: 560px) {
  .hero { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 44px; }
  .carrete { margin-top: 18px; }
}

/* En una pantalla muy bajita —el celular acostado— la portada se
   aprieta un poco para que el carrete siga cabiendo. */
@media (max-height: 560px) {
  .hero { padding-top: calc(var(--nav-h) + 10px); padding-bottom: 24px; }
  .hero__lines { gap: 10px; }
  .hero__promise { margin-top: 1rem; }
  .carrete { margin-top: 14px; }
}

/* ================================================================
   LAS DESCRIPCIONES, MAS CHICAS (27 de agosto, noche)
   ----------------------------------------------------------------
   El texto de abajo de cada tarjeta y el de al lado de cada mueble
   se achicaron para que la foto pese mas a la vista. Son dos
   renglones: si los quieres mas grandes, subele el numero; si los
   quieres mas chicos, bajalo.

     .card__body p  = lo que dice cada tarjeta del catalogo
     .prod__desc    = lo que dice cada mueble en su ficha
   ================================================================ */
.card__body p { font-size: .86rem; line-height: 1.62; }
.prod__desc   { font-size: .9rem;  line-height: 1.68; }

/* En celular la tarjeta es un renglon de menu y el texto se corta.
   Como los textos nuevos son mas largos, se le dio un renglon mas
   para que alcance a decir la primera idea completa. */
@media (max-width: 720px) {
  .card__body p { font-size: .8rem; line-height: 1.42; -webkit-line-clamp: 3; }
}

/* ================================================================
   LA PORTADA DE MARCA (28 de agosto)
   ----------------------------------------------------------------
   La portada dejo de ser una foto de sala: ahora es el logotipo
   grande sobre el mismo cafe del logotipo, y debajo el carrete.

   Para cambiar la imagen se cambia el archivo
   img/portada-marca.png. Si la imagen nueva trae otro color de
   fondo, cambialo tambien arriba, en ":root", donde dice "--marca".
   ================================================================ */
.hero--marca {
  background: var(--marca);
  justify-content: center;
  gap: clamp(20px, 3.4vh, 46px);
  padding-top: calc(var(--nav-h) + clamp(18px, 3vh, 40px));
  padding-bottom: clamp(34px, 6vh, 80px);
}

/* El logotipo. Que tan grande se ve se cambia en estos dos
   renglones: "max-width" manda en computadora y "max-height" en
   pantallas bajitas. */
.hero__marca { margin: 0; }
.hero__marca img {
  display: block;
  width: 100%;
  max-width: 1000px;
  max-height: min(250px, 26vh);
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}

/* Los tres botones: sobre el cafe, el negro de siempre no se veria,
   asi que van en dorado con la letra oscura. */
.hero--marca .btn--solid {
  background: var(--dorado);
  border-color: var(--dorado);
  color: #241f1b;
}
.hero--marca .btn--solid:hover {
  background: var(--beige);
  border-color: var(--beige);
  color: #241f1b;
}

/* La rayita de la izquierda de la linea de entrega, en dorado. */
.hero--marca .hero__promise { border-left-color: var(--dorado); }

@media (max-width: 560px) {
  .hero__marca img { max-height: min(190px, 22vh); }
}

/* ================================================================
   LO QUE SE ACOMODO EL 28 DE AGOSTO (TARDE)
   ================================================================ */

/* ---- 1. (Aqui vivia el segundo parrafo de la entrada de cada
   apartado, el de la explicacion practica. Se quito el 30 de agosto:
   ahora la entrada es un solo parrafo. Lo que decia quedo guardado
   en NOTAS.md por si algun dia se quiere de vuelta.) */

/* ---- 2. Las tarjetas del catalogo, ya sin descripcion ----------
   El renglon de "Ver salas" se va hasta abajo, para que las tres
   tarjetas se vean parejas. */
.card__body .link { margin-top: auto; }

/* ---- 3. La portada en celular, mas apretada --------------------
   Para que el carrete alcance a verse sin tener que bajar. */
@media (max-width: 560px) {
  .hero--marca {
    padding-top: calc(var(--nav-h) + 14px);
    padding-bottom: 26px;
    gap: 16px;
  }
  .carrete { margin-top: 14px; }
}

/* ================================================================
   EL MENU DE MODELOS, EN CUADRICULA DE DOS (30 de agosto)
   ----------------------------------------------------------------
   Antes los modelos iban en una tira que se jalaba de lado y se
   veian dos y medio. Ahora van de DOS EN DOS, en renglones, como
   los aparadores de las tiendas: la foto de portada completa y,
   debajo, el nombre y el precio.

   ---- QUE SE PUEDE CAMBIAR AQUI ----
   * Cuantos recuadros por renglon: el "2" de "repeat(2, 1fr)".
   * Que tan grandes se ven en computadora: el "max-width: 900px".
   * La forma del recuadro de la foto: el "aspect-ratio: 1 / 1"
     (1 / 1 es cuadrado; 4 / 3 mas apaisado; 3 / 4 mas parado).
   ================================================================ */

.modelos__cuadro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  padding: 4px 0 10px;
  max-width: 900px;
}

/* En la tira, el ancho de cada recuadro lo calculaba script.js con
   la forma de la foto. En la cuadricula todos miden lo mismo: el
   ancho lo reparte la columna. */
.modelos__cuadro .modelo {
  width: auto;
  max-width: none;
  gap: 9px;
}

/* La foto va COMPLETA, sin recortar ("contain"), igual que en las
   tarjetas del inicio. Si la foto no es cuadrada quedan dos franjas
   color crema, y esta bien asi: se ve el mueble entero. */
.modelos__cuadro .modelo__foto {
  height: auto;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Los recuadros entran uno tras otro, no todos de golpe. */
.modelos__cuadro .modelo { animation: modeloEntra .5s ease-out both; }
.modelos__cuadro .modelo:nth-child(1) { animation-delay: .05s; }
.modelos__cuadro .modelo:nth-child(2) { animation-delay: .10s; }
.modelos__cuadro .modelo:nth-child(3) { animation-delay: .15s; }
.modelos__cuadro .modelo:nth-child(4) { animation-delay: .20s; }
.modelos__cuadro .modelo:nth-child(5) { animation-delay: .25s; }
.modelos__cuadro .modelo:nth-child(6) { animation-delay: .30s; }
.modelos__cuadro .modelo:nth-child(7) { animation-delay: .35s; }
.modelos__cuadro .modelo:nth-child(8) { animation-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .modelos__cuadro .modelo { animation: none; }
}

@media (max-width: 560px) {
  .modelos__cuadro { gap: 12px 10px; }
  .modelos__cuadro .modelo { gap: 7px; }
  .modelos__cuadro .modelo__nombre { font-size: .96rem; line-height: 1.2; }
  .modelos__cuadro .modelo__precio { font-size: .88rem; }
}

/* ================================================================
   LAS TARJETAS DE SALAS Y DE ARTE EXCLUSIVO, TAMBIEN DE DOS EN DOS
   ----------------------------------------------------------------
   Es la misma idea, pero para las tarjetas de tipo de mueble (las
   seis de "Salas" y las dos de "Arte exclusivo"): dos por renglon
   en TODAS las pantallas, foto arriba, nombre y precio debajo.
   ================================================================ */

.grid--dos-fijo {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2.2vw, 28px);
  max-width: 900px;
}

.grid--dos-fijo .card__img { aspect-ratio: 1 / 1; }

/* El precio de la tarjeta, debajo del nombre. */
.card__precio {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .01em;
}

@media (max-width: 720px) {
  /* En el celular las tarjetas sueltas son renglones de menu (foto
     chica a la izquierda). Dentro de esta cuadricula vuelven a ser
     tarjetas de verdad, con la foto arriba. */
  .grid--dos-fijo { gap: 12px 10px; }

  .grid--dos-fijo > .card {
    flex-direction: column;
    min-height: 0;
  }
  .grid--dos-fijo > .card .card__img {
    width: auto;
    aspect-ratio: 1 / 1;
    align-self: auto;
  }
  .grid--dos-fijo > .card .card__body {
    padding: 13px 14px 16px;
    gap: 5px;
  }
  .grid--dos-fijo > .card .card__body h3 { font-size: 1.04rem; line-height: 1.2; }
  .grid--dos-fijo > .card .card__body p { -webkit-line-clamp: 2; }
  .grid--dos-fijo > .card .card__precio { font-size: 1rem; }

  /* El renglon "Ver salas ->" regresa: aqui ya no hay flechita
     pegada a la derecha, porque la tarjeta ya no es un renglon. */
  .grid--dos-fijo > .card .link {
    position: static;
    font-size: .64rem;
    letter-spacing: .09em;
    white-space: nowrap;
    gap: 6px;
    height: auto;
    padding: 0;
    border: 0;
    color: var(--accent);
  }
  .grid--dos-fijo > .card .link span {
    position: static;
    transform: none;
    font-size: 1rem;
  }
}

@media (max-width: 560px) {
  /* En el celular la descripcion sobra: se queda la
     foto, el nombre y el precio. */
  .grid--dos-fijo > .card .card__body p { display: none; }
}

/* ================================================================
   EL CARRETE DE LA PORTADA: FOTOS DE ESTUDIO (30 de agosto)
   ----------------------------------------------------------------
   Las cuatro fotos del carrete dejaron de ser tomas de cuarto
   ambientado y pasaron a ser las de estudio, de tres cuartos
   (las "ANGULAR"), donde se ve el mueble solo.

   Dos de ellas no tienen la misma forma que el recuadro:
     * la sala en L es muy alargada
     * el espejo es muy parado
   Si se recortaran para llenar el recuadro se les cortarian las
   puntas, asi que a esas dos se les pone "carrete__foto--completa":
   la foto entra ENTERA y lo que sobra se rellena con el color de
   fondo de la misma foto (va escrito en el HTML, en
   "background-color", por si algun dia cambias la foto).
   ================================================================ */

.carrete__foto--completa {
  background-size: contain;
  background-repeat: no-repeat;
}

/* ================================================================
   FRANJA DE FIESTAS PATRIAS (septiembre)
   ----------------------------------------------------------------
   La bandera que va hasta arriba de la portada, de lado a lado,
   encima del logotipo.

   NO es una foto: esta hecha con los tres colores oficiales de la
   bandera —verde #006847, blanco y rojo #ce1126—. Por eso no pesa
   nada, se ve nitida en cualquier pantalla y nunca se despinta.

   Para QUITARLA se borran los renglones de index.html (ahi dice
   como). Estas reglas se pueden quedar aqui: solas no se ven.

   Lo que puedes mover:

     --franja   que tan anchas son las orillas de color. Si le
                subes se ve mas bandera; si le bajas queda mas
                discreta. En pantallas chicas se encoge sola para
                que el texto quepa en el blanco de en medio.
     --verde
     --rojo     los dos colores, por si algun dia los quieres
                mas claros o mas oscuros.
   ================================================================ */

.patrias {
  --franja: clamp(26px, 13%, 200px);
  --verde: #006847;
  --rojo: #ce1126;

  /* De lado a lado, aunque el lugar donde va tenga margenes. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: 0 clamp(16px, 2.6vh, 30px);

  padding: clamp(8px, 1.4vh, 13px) 14px;
  text-align: center;
  line-height: 1.18;

  background: linear-gradient(
    90deg,
    var(--verde) 0 var(--franja),
    #ffffff var(--franja) calc(100% - var(--franja)),
    var(--rojo) calc(100% - var(--franja)) 100%
  );

  /* Dos rayitas finas arriba y abajo para que la franja no quede
     "pegada" al cafe de la portada. */
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .16);
}

.patrias__texto {
  display: block;
  font-family: var(--serif);
  font-size: clamp(.98rem, 2.5vw, 1.55rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: #075138;
}

.patrias__viva {
  display: block;
  margin-top: 2px;
  font-size: clamp(.56rem, 1.1vw, .72rem);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #9c1220;
}

/* ================================================================
   DOS RENGLONES SUELTOS DE LA PORTADA
   ----------------------------------------------------------------
   Los dos van abajo del menu de las tres lineas de muebles:

   1) "nota-catalogo" = el rengloncito de "Actualizamos modelos
      periodicamente".
   2) "nota-envios"   = el recuadro gris de los envios, debajo del
      anterior.

   El texto de los dos se cambia en index.html, no aqui. Aqui nada
   mas esta que tan grandes y de que color se ven.
   ================================================================ */

.nota-envios {
  width: calc(100% - 32px);     /* que no quede pegado a las orillas en el celular */
  max-width: 44rem;
  margin: clamp(14px, 2vw, 22px) auto 0;
  padding: clamp(10px, 1.5vw, 15px) clamp(16px, 2.6vw, 30px);
  background: #dedede;          /* el gris del recuadro */
  color: #111111;               /* las letras, en negro */
  border-radius: var(--r);

  /* Texto parejo de los dos lados, con guiones para que no queden
     huecos grandes entre palabras. */
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;

  font-style: italic;                       /* la cursiva */
  font-size: clamp(.7rem, .82vw, .78rem);   /* si la quieres mas grande, sube estos numeros */
  line-height: 1.6;
}

.nota-catalogo {
  margin: clamp(20px, 2.8vw, 34px) 0 0;
  text-align: center;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

/* ================================================================
   EL RECUADRO GRIS DEL MUESTRARIO
   ----------------------------------------------------------------
   Va debajo del recuadro azul de las telas, en la portada. Letra
   chica, fondo gris y letras negras.

   El texto se cambia en index.html, no aqui.
   ================================================================ */

.telas__aviso {
  max-width: 44rem;             /* el mismo ancho que el recuadro azul de arriba */
  margin: clamp(12px, 1.6vw, 18px) auto 0;
  padding: clamp(12px, 1.7vw, 18px) clamp(18px, 3vw, 34px);
  background: #dedede;          /* el gris del recuadro */
  color: #111111;               /* las letras, en negro */
  border-radius: var(--r);
  font-size: clamp(.78rem, .95vw, .88rem);   /* letra chica */
  line-height: 1.55;
  text-align: center;
}

/* ================================================================
   EL MENU DE RECAMARAS
   ----------------------------------------------------------------
   Las fotos de recamara son mas anchas que altas, y cada una de un
   tamano distinto. En un recuadro cuadrado se veian chiquitas, con
   mucho hueco arriba y abajo. Con esta regla el recuadro se hace
   apaisado (3 de ancho por 2 de alto) y la foto entra completa,
   sin recortarse.

   Si algun dia quieres los recuadros cuadrados otra vez, borra
   este bloque y ya.
   ================================================================ */

.modelos__cuadro--recamara .modelo__foto {
  aspect-ratio: 3 / 2;
}