/* ==========================================================================
   ARREGLAMIHOGAR — Layout
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.head {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--wine-800);
  border-bottom: 1px solid oklch(0.885 0.044 82 / 0.16);
}

.head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--head-h);
  padding-block: var(--s-2);
}

/* --- Marca --- */

.logo {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 0.35rem + 0.6vw, 0.85rem);
  min-width: 0;
}

.logo > span { min-width: 0; }

/* El sello lleva la "Ah" calada: lo que se ve dentro de las letras es el
   burdeos del fondo, igual que en el logotipo original. */
.logo__mk {
  height: clamp(38px, 32px + 1.6vw, 46px);
  width: auto;
  aspect-ratio: 928 / 745;
  flex: none;
  object-fit: contain;
  transition: opacity var(--t-mid) var(--out-quart);
}

.logo:hover .logo__mk { opacity: 0.86; }

/* La marca se escribe en caja mixta, como en el logotipo. */
.logo__wd {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.92rem + 0.87vw, 1.625rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--stone-50);
  white-space: nowrap;
}

.logo__tag {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 0.42em;
  font-size: clamp(0.5rem, 0.43rem + 0.29vw, 0.625rem);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--brass-400);
  white-space: nowrap;
}

.logo__tag::before, .logo__tag::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* --- Acciones --- */

.head__acts {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.05rem + 0.7vw, 0.8rem);
  flex: none;
}

.burger { width: 46px; height: 46px; display: grid; place-items: center; color: var(--stone-100); }
.burger__box { position: relative; width: 26px; height: 15px; }

.burger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-mid) var(--out-expo), opacity 120ms linear;
}

.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger__bar:nth-child(3) { bottom: 0; }

.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Navegación
   -------------------------------------------------------------------------- */

.nav { display: none; }

/* Ocho entradas en una línea. «Calcular mi reforma» es la más larga y la
   que fija el ancho mínimo: por debajo de 1240px no caben junto al logo y
   se pasa al cajón lateral. */
.nav__list { display: flex; align-items: center; gap: clamp(0.75rem, -0.1rem + 1.5vw, 1.2rem); }

.nav__a {
  position: relative;
  display: block;
  padding-block: 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--stone-200);
  transition: color var(--t-fast) var(--out-quart);
}

.nav__a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--out-expo);
}

.nav__a:hover { color: var(--stone-50); }
.nav__a:hover::after { transform: scaleX(1); }
.nav__a[aria-current="page"] { color: var(--brass-300); }
.nav__a[aria-current="page"]::after { transform: scaleX(1); }

/* --- Panel móvil --- */

.drawer {
  position: fixed;
  inset: var(--head-h) 0 0 0;
  z-index: 199;
  background: var(--wine-800);
  padding: var(--s-6) var(--edge) var(--s-9);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-mid) var(--out-quart),
              transform var(--t-mid) var(--out-expo),
              visibility var(--t-mid);
}

.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

.drawer__item { border-bottom: 1px solid oklch(0.885 0.044 82 / 0.16); }

.drawer__a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--stone-100);
  transition: color var(--t-fast) var(--out-quart), transform var(--t-mid) var(--out-expo);
}

.drawer__a:hover { color: var(--brass-300); transform: translateX(0.4rem); }
.drawer__a:active { transform: translateX(0.4rem) scale(0.99); }
.drawer__a[aria-current="page"] { color: var(--brass-300); }

.drawer__n {
  font-family: var(--font-text);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--brass-600);
}

.drawer__foot { margin-top: var(--s-7); display: grid; gap: var(--s-4); }

.drawer__lines { display: grid; gap: 0.3rem; font-size: var(--t-sm); color: var(--stone-300); }
.drawer__lines a { color: var(--brass-300); }

body[data-locked="true"] { overflow: hidden; }

@media (min-width: 1240px) {
  .nav { display: block; flex: 0 1 auto; min-width: 0; }
  .burger, .drawer { display: none; }
  .head__in { gap: var(--s-5); }
  .logo { flex: none; }
}

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

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(600px, 84svh, 860px);
  padding-block: var(--s-9) var(--s-7);
  background: var(--wine-900);
  overflow: hidden;
}

.hero__pic { position: absolute; inset: 0; z-index: -2; }

/* --------------------------------------------------------------------------
   El banner: las fotos se funden, no se desplazan

   Un pase de diapositivas que corre de lado detras de un titular marea y
   arrastra la vista fuera del texto. Aqui la foto que entra se funde sobre la
   que sale y, mientras esta puesta, se acerca muy despacio. Al no tener
   direccion ni golpe no compite con el titular: parece que la imagen respira.

   El acercamiento dura mas que el fundido a proposito, para que no haya
   ningun instante quieto entre una foto y la siguiente, que es lo que delata
   el corte.

   Cada foto lleva su object-position en el propio HTML: el hero recorta una
   banda y cada una tiene el motivo a distinta altura.
   -------------------------------------------------------------------------- */

.hero__foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms var(--out-quart);
}

.hero__foto.es { opacity: 1; }

.hero__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__foto.es img {
  animation: hero-acerca 4100ms var(--out-quart) both;
}

@keyframes hero-acerca {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

/* En vertical la foto de la tienda se recorta muchisimo mas: de 1600 px de
   ancho solo se ven unos 390, o sea el 31 %. Con el 68 % de escritorio, el
   rotulo quedaba partido justo detras del titular y parecia un descuido. Al
   34 % entra entero. Solo le afecta a ella; las otras son verticales y su
   encuadre ya viene bien de serie. */
@media (max-width: 619px) {
  .hero__foto:first-child img { object-position: 34% center !important; }
}

/* Con el sistema pidiendo menos movimiento no hay ni fundido ni
   acercamiento. El carrusel tampoco arranca: lo decide main.js. */
@media (prefers-reduced-motion: reduce) {
  .hero__foto { transition: none; }
  .hero__foto.es img { animation: none; }
}

/* Dos velos: uno lateral que sostiene el texto, otro al pie que asienta.
   Calibrados para que la fotografía siga leyéndose a la derecha. */
.hero__pic::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Recalibrado al poner el banner. El velo anterior estaba hecho para una
     sola foto, la de la exposición, que es una pared burdeos oscura. Con
     mármol blanco detrás, el titular caía a 1,61 de contraste: ilegible.

     Medido el peor punto bajo el titular, la entradilla y el antetítulo,
     recomponiendo en un canvas la foto recortada más los dos degradados.
     Probadas cuatro calibraciones; esta es la más suave de las que pasan,
     para no apagar la foto más de lo necesario:

         exposición 8,99   ·   Golden Ice 5,66   ·   Arena 8,73
         Calacatta  9,50   ·   Ámbar      5,37

     Todas por encima de 4,5, que es el mínimo para texto normal; la
     entradilla y el antetítulo lo son. */
  background:
    linear-gradient(to bottom,
      oklch(0.185 0.055 18 / 0.45) 0%,
      oklch(0.185 0.055 18 / 0.12) 34%,
      oklch(0.185 0.055 18 / 0.62) 100%),
    linear-gradient(101deg,
      oklch(0.185 0.055 18 / 0.92) 0%,
      oklch(0.185 0.055 18 / 0.74) 55%,
      oklch(0.185 0.055 18 / 0.34) 88%,
      oklch(0.185 0.055 18 / 0.22) 100%);
}

/* En movil el rotulo de la tienda cae justo detras del titular, asi que el
   velo necesita unos puntos mas: sin ellos el «Arregla mi hogar» pequeno del
   logo se cruza con «integral de bano» y se leen los dos a la vez. El halo
   sigue viendose, que es lo que interesa.

   Va aqui, despues de la regla general, y no arriba con el resto de lo
   movil: dos reglas con la misma especificidad las decide el orden, y puesto
   antes no pintaba nada. */
@media (max-width: 619px) {
  .hero__pic::after {
    background:
      linear-gradient(to bottom,
        oklch(0.185 0.055 18 / 0.50) 0%,
        oklch(0.185 0.055 18 / 0.30) 34%,
        oklch(0.185 0.055 18 / 0.62) 100%),
      linear-gradient(101deg,
        oklch(0.185 0.055 18 / 0.80) 0%,
        oklch(0.185 0.055 18 / 0.52) 46%,
        oklch(0.185 0.055 18 / 0.30) 80%);
  }
}

.hero__in { width: 100%; }
.hero__body { max-width: 46rem; color: var(--stone-100); }

/* El selector lleva .hero delante para ganar a `h1.display` de base.css,
   que si no impone su propio tamaño. */
.hero .hero__title {
  margin-top: var(--s-5);
  font-size: var(--t-4xl);
  line-height: 1.16;
  color: var(--stone-50);
}

.hero__lede {
  max-width: 34ch;
  margin-top: var(--s-5);
  font-size: var(--t-md);
  font-weight: 350;
  line-height: 1.55;
  color: var(--stone-200);
}

.hero__marks { margin-top: var(--s-6); max-width: 32rem; }

/* Banda de cierre del hero: precio, llamada y refuerzo en una sola línea */
.hero__ledger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-7);
}

/* --- Hero de página interior --- */

.crown {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 2.2rem + 5.2vw, 7rem);
  background: var(--wine-800);
  color: var(--stone-100);
  overflow: hidden;
}

.crown__pic { position: absolute; inset: 0; z-index: -2; }
.crown__pic img { width: 100%; height: 100%; object-fit: cover; }

.crown__pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    oklch(0.185 0.055 18 / 0.92) 0%,
    oklch(0.185 0.055 18 / 0.72) 55%,
    oklch(0.185 0.055 18 / 0.48) 100%);
}

/* Variante para fotos claras: el velo de serie esta calibrado para
   imagenes oscuras y sobre un bano de marmol blanco lo convierte en una
   mancha plana. Aqui se levanta, y el contraste del titulo se mide. */
.crown--claro .crown__pic::after {
  background: linear-gradient(105deg,
    oklch(0.185 0.055 18 / 0.80) 0%,
    oklch(0.185 0.055 18 / 0.52) 55%,
    oklch(0.185 0.055 18 / 0.24) 100%);
}

.crown__title { margin-top: var(--s-4); color: var(--stone-50); }
.crown__lede { margin-top: var(--s-4); max-width: 52ch; color: var(--stone-300); font-weight: 350; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass-400);
}

.crumbs li + li::before { content: "/"; margin-right: 0.5em; opacity: 0.55; }
.crumbs a { transition: color var(--t-fast) var(--out-quart); }
.crumbs a:hover { color: var(--stone-100); }
.crumbs [aria-current="page"] { color: var(--stone-300); }

/* --------------------------------------------------------------------------
   Bloque partido: texto e imagen
   -------------------------------------------------------------------------- */

.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }

@media (min-width: 920px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 0.5rem + 5.5vw, 6rem); }
  .duo--flip .duo__pic { order: -1; }
  /* Rejilla desequilibrada a propósito: la imagen pesa más */
  .duo--heavy { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.duo__pic { position: relative; }

.duo__pic img { width: 100%; border-radius: var(--r-sm); box-shadow: var(--lift-3); }

/* Segunda imagen montada sobre la esquina */
.duo__inset {
  position: absolute;
  right: calc(var(--s-5) * -1);
  bottom: calc(var(--s-6) * -1);
  width: 46%;
  max-width: 15rem;
  border: 6px solid var(--bg);
  border-radius: var(--r-sm);
  box-shadow: var(--lift-2);
}

@media (max-width: 619px) { .duo__inset { display: none; } }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.foot {
  background: var(--wine-900);
  color: var(--stone-300);
  padding-block: var(--s-9) var(--s-6);
}

.foot a { transition: color var(--t-fast) var(--out-quart); }
.foot a:hover { color: var(--brass-300); }

.foot__grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; }

@media (min-width: 700px)  { .foot__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); } }
/* A cuatro columnas la primera se queda en 258px justo a 1024, y la marca
   pide 272: el logotipo y su lema van en nowrap y se salian de la columna.
   La cuarta columna entra cuando de verdad hay sitio. */
@media (min-width: 1120px) { .foot__grid { grid-template-columns: 1.7fr 1fr 1fr 1.15fr; gap: var(--s-8); } }

.foot__h {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--brass-400);
  margin-bottom: var(--s-4);
}

.foot__list { display: grid; gap: 0.55rem; font-size: var(--t-sm); }
.foot__txt { font-size: var(--t-sm); line-height: 1.7; color: oklch(0.898 0.017 66 / 0.72); }
.foot__brand .logo { margin-bottom: var(--s-4); }

.social { display: flex; gap: 0.5rem; margin-top: var(--s-5); }

.social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid oklch(0.885 0.044 82 / 0.3);
  border-radius: 50%;
  color: var(--stone-200);
  transition: border-color var(--t-mid) var(--out-quart), background-color var(--t-mid) var(--out-quart), color var(--t-mid) var(--out-quart);
}

.social a:hover { border-color: var(--brass-300); background: var(--brass-300); color: var(--wine-900); }
.social svg { width: 17px; height: 17px; }

.foot__end {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid oklch(0.885 0.044 82 / 0.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-xs);
  color: oklch(0.898 0.017 66 / 0.62);
}

.foot__end ul { display: flex; flex-wrap: wrap; gap: var(--s-4); }

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

/* Antes era un círculo verde de aplicación de mensajería pegado encima de la
   web. Ahora es de la casa: burdeos, filete de latón y el símbolo en latón
   claro, que sigue siendo inconfundible. No aparece hasta que el hero se ha
   ido: sobre el hero solo estorbaba a su propio botón. */

.wa-dot {
  position: fixed;
  right: clamp(1rem, 2.6vw, 1.75rem);
  bottom: clamp(1rem, 2.6vw, 1.75rem);
  z-index: 190;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  background: var(--wine-800);
  color: var(--brass-300);
  border: 1px solid oklch(0.885 0.044 82 / 0.34);
  border-radius: 50%;
  box-shadow: var(--lift-2);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.86) translateY(10px);
  transition: opacity var(--t-mid) var(--out-quart),
              transform var(--t-mid) var(--out-expo),
              visibility var(--t-mid),
              background-color var(--t-fast) var(--out-quart),
              border-color var(--t-fast) var(--out-quart),
              box-shadow var(--t-fast) var(--out-quart);
}

.wa-dot[data-on="true"] { opacity: 1; visibility: visible; transform: none; }

.wa-dot svg { width: 27px; height: 27px; }

/* Un solo anillo, dos veces, justo al aparecer. Un pulso permanente se
   convierte en ruido a los diez segundos. */
.wa-dot::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--brass-400);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.wa-dot[data-on="true"]::before {
  animation: waRing 2.4s var(--out-expo) 520ms 2;
}

@keyframes waRing {
  from { transform: scale(1);   opacity: 0.5; }
  to   { transform: scale(1.7); opacity: 0; }
}

.wa-dot__say {
  position: absolute;
  right: calc(100% + 0.55rem);
  padding: 0.5em 0.85em;
  background: var(--wine-800);
  border: 1px solid oklch(0.885 0.044 82 / 0.26);
  border-radius: 999px;
  color: var(--stone-100);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--out-quart), transform var(--t-mid) var(--out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .wa-dot:hover {
    background: var(--wine-700);
    border-color: var(--brass-400);
    box-shadow: var(--lift-3);
  }
  .wa-dot:hover .wa-dot__say { opacity: 1; transform: none; }
}

.wa-dot:focus-visible .wa-dot__say { opacity: 1; transform: none; }
.wa-dot:active { transform: scale(0.94); }

/* En pantallas estrechas el rótulo no cabe, y con el menú abierto sobra. */
@media (max-width: 560px) { .wa-dot__say { display: none; } }

body[data-locked="true"] .wa-dot { opacity: 0; visibility: hidden; transform: scale(0.9); }

@media (prefers-reduced-motion: reduce) {
  .wa-dot[data-on="true"]::before { animation: none; }
}

/* --------------------------------------------------------------------------
   Cabecera al desplazar
   -------------------------------------------------------------------------- */

.head { transition: box-shadow var(--t-mid) var(--out-quart); }
.head[data-stuck="true"] { box-shadow: 0 10px 30px oklch(0.185 0.055 18 / 0.28); }

/* --------------------------------------------------------------------------
   Aparición al desplazar
   -------------------------------------------------------------------------- */

[data-rise] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-rise) var(--out-quart), transform var(--t-rise) var(--out-expo);
}

[data-rise].seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; transform: none; }
}

/* Al imprimir no hay scroll que dispare la aparición */
@media print {
  [data-rise] { opacity: 1 !important; transform: none !important; }
  .wa-dot, .head__acts, .drawer { display: none !important; }
  .head { position: static; }
}