/* ==========================================================================
   Casa Monasterio — sistema visual
   Paleta y tipografías tomadas de la referencia aprobada: arenas cálidas,
   cremas y tinta parda; Elsie para los títulos y Poppins para el texto.
   ========================================================================== */

:root{
  /* ---- Color ---- */
  --arena:#c1a78c;
  --arena-osc:#9d7e5e;
  --arena-mas-osc:#7b6047;
  --arena-clara:#d4cbc2;
  --crema:#e9e4de;
  --hueso:#f7f4f0;
  --blanco:#ffffff;

  --tinta:#27282c;
  --tinta-2:#5b5852;
  --tinta-3:#8a857d;
  --linea:#e2dcd4;
  --linea-fuerte:#cfc6bb;

  --verde:#5c7a5e;      /* disponibilidad, confirmaciones */
  --rojo:#9f2124;       /* ofertas y avisos */

  /* ---- Tipografía ---- */
  --display:'Elsie',Georgia,'Times New Roman',serif;
  --texto:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- Medidas ---- */
  --ancho:1240px;
  --ancho-angosto:820px;
  --gutter:clamp(18px,4vw,40px);
  --radio:4px;
  --radio-lg:14px;
  --sombra:0 1px 2px rgba(39,40,44,.04),0 8px 28px rgba(39,40,44,.06);
  --sombra-alta:0 18px 48px rgba(39,40,44,.14);
  --transicion:.28s cubic-bezier(.22,.61,.36,1);
  --cabecera:88px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--blanco);color:var(--tinta);
  font-family:var(--texto);font-size:16px;font-weight:300;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--transicion)}
a:hover{color:var(--arena-osc)}
button{font:inherit;color:inherit}
::selection{background:var(--arena);color:var(--blanco)}
:focus-visible{outline:2px solid var(--arena-osc);outline-offset:3px}

h1,h2,h3,h4,h5{
  font-family:var(--display);font-weight:400;line-height:1.16;
  letter-spacing:-.01em;margin:0 0 .5em;color:var(--tinta);
}
h1{font-size:clamp(2.4rem,5.2vw,4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
h4{font-size:1.1rem}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}

/* Antetítulo en versalitas: aparece sobre casi todos los títulos de sección. */
.antetitulo{
  font-family:var(--texto);font-size:.72rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--arena-osc);
  display:inline-flex;align-items:center;gap:.7em;margin-bottom:1em;
}
.antetitulo::before,.antetitulo::after{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
.antetitulo--izq::before{display:none}

.plomo{font-size:1.05rem;color:var(--tinta-2);max-width:62ch}
.silencio{color:var(--tinta-3)}

/* ==========================================================================
   Estructura
   ========================================================================== */
.envoltura{width:min(100% - var(--gutter)*2,var(--ancho));margin-inline:auto}
.envoltura--angosta{width:min(100% - var(--gutter)*2,var(--ancho-angosto))}
.seccion{padding-block:clamp(56px,8vw,110px)}
.seccion--crema{background:var(--hueso)}
.seccion--arena{background:var(--crema)}
.seccion--compacta{padding-block:clamp(38px,5vw,64px)}

.cabecera-seccion{max-width:64ch;margin-bottom:clamp(30px,4vw,52px)}
.cabecera-seccion--centro{margin-inline:auto;text-align:center}

.rejilla{display:grid;gap:clamp(18px,2.4vw,32px)}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}

/* Máscaras orgánicas: el arco es la forma que define la referencia. */

.marco{overflow:hidden;border-radius:var(--radio-lg)}
/* Máscaras orgánicas: el arco es la forma que define la referencia.
   Va después de `.marco` porque comparten especificidad. */
.arco,.marco.arco{border-radius:50vw 50vw 10px 10px;overflow:hidden}
.arco--suave,.marco.arco--suave{border-radius:50vw}
.marco img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.marco:hover img{transform:scale(1.045)}

/* ==========================================================================
   Botones
   ========================================================================== */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:.95em 1.9em;border:1px solid var(--arena-osc);border-radius:50px;
  background:var(--arena-osc);color:var(--blanco);
  font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:background var(--transicion),color var(--transicion),border-color var(--transicion),transform var(--transicion);
}
.boton:hover{background:var(--arena-mas-osc);border-color:var(--arena-mas-osc);color:var(--blanco);transform:translateY(-1px)}
.boton:active{transform:none}
.boton--linea{background:transparent;color:var(--tinta);border-color:var(--linea-fuerte)}
.boton--linea:hover{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}
.boton--claro{background:var(--blanco);color:var(--tinta);border-color:var(--blanco)}
.boton--claro:hover{background:var(--crema);border-color:var(--crema);color:var(--tinta)}
.boton--sm{padding:.7em 1.3em;font-size:.72rem}
.boton--bloque{width:100%}
.boton .flecha{width:16px;height:16px;transition:transform var(--transicion)}
.boton:hover .flecha{transform:translateX(4px)}

/* Enlace subrayado que crece al pasar el cursor. */
.enlace-linea{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:.35em;border-bottom:1px solid var(--linea-fuerte);
  transition:border-color var(--transicion),color var(--transicion);
}
.enlace-linea:hover{border-color:var(--arena-osc);color:var(--arena-osc)}

/* ==========================================================================
   Cabecera
   ========================================================================== */
.cabecera{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--linea);
  transition:box-shadow var(--transicion);
}
.cabecera.fija{box-shadow:0 2px 20px rgba(39,40,44,.07)}
.cabecera__interior{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(16px,3vw,44px);min-height:var(--cabecera);
}
.marca{display:flex;align-items:center;gap:.7em;flex:none;justify-self:start}
.navegacion{justify-self:center}
.marca__texto{font-family:var(--display);font-size:1.35rem;line-height:1.1;letter-spacing:.01em}
.marca__texto small{display:block;font-family:var(--texto);font-size:.6rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--arena-osc)}

.menu{display:flex;align-items:center;gap:clamp(14px,2vw,30px);list-style:none;margin:0;padding:0}
.menu a{
  position:relative;font-size:.82rem;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;padding-block:.4em;white-space:nowrap;
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--arena-osc);transition:width var(--transicion);
}
.menu a:hover::after,.menu .current-menu-item>a::after{width:100%}
.menu .current-menu-item>a{color:var(--arena-osc)}

/* Submenú */
.menu li{position:relative}
.menu .sub-menu{
  position:absolute;top:100%;left:-14px;min-width:220px;list-style:none;margin:0;padding:10px 0;
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-lg);
  box-shadow:var(--sombra);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--transicion),transform var(--transicion),visibility var(--transicion);
}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.menu .sub-menu a{display:block;padding:.55em 18px;text-transform:none;letter-spacing:.02em;font-size:.88rem}
.menu .sub-menu a::after{display:none}
.menu .sub-menu a:hover{background:var(--hueso)}

.cabecera__acciones{justify-self:end;display:flex;align-items:center;gap:6px}
.icono-boton{
  position:relative;display:grid;place-items:center;width:42px;height:42px;
  border:0;background:none;border-radius:50%;cursor:pointer;color:var(--tinta);
  transition:background var(--transicion),color var(--transicion);
}
.icono-boton:hover{background:var(--hueso);color:var(--arena-osc)}
.icono-boton svg{width:20px;height:20px;stroke-width:1.4}
.contador{
  position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:9px;background:var(--arena-osc);
  color:var(--blanco);font-size:.62rem;font-weight:600;line-height:1;
}
.menu-movil-boton{display:none}

/* ==========================================================================
   Navegación en móvil
   ========================================================================== */
.panel-movil{
  position:fixed;inset:0 0 0 auto;width:min(88vw,360px);z-index:80;
  background:var(--blanco);padding:26px 24px 40px;overflow-y:auto;
  transform:translateX(100%);transition:transform var(--transicion);
  box-shadow:var(--sombra-alta);display:flex;flex-direction:column;gap:22px;
}
.panel-movil.abierto{transform:none}
.panel-movil__cab{display:flex;align-items:center;justify-content:space-between}
.panel-movil .menu{flex-direction:column;align-items:stretch;gap:0}
.panel-movil .menu li{border-bottom:1px solid var(--linea)}
.panel-movil .menu a{display:block;padding:.95em 0;font-size:.9rem}
.panel-movil .sub-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:0 0 8px 14px}
.velo{
  position:fixed;inset:0;z-index:70;background:rgba(39,40,44,.42);
  opacity:0;visibility:hidden;transition:opacity var(--transicion),visibility var(--transicion);
}
.velo.visible{opacity:1;visibility:visible}

/* ==========================================================================
   Portada
   ========================================================================== */
.hero{position:relative;background:var(--crema);overflow:hidden;padding-block:clamp(48px,7vw,96px)}
.hero__interior{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero__texto h1{margin-bottom:.35em}
.hero__texto h1 em{font-style:italic;color:var(--arena-mas-osc)}
.hero__acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
.hero__medios{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,minmax(140px,1fr));gap:16px}
.hero__medios .marco:nth-child(1){grid-row:span 2;border-radius:50vw 50vw 14px 14px}
.hero__medios .marco:nth-child(3){border-radius:14px 14px 50vw 50vw}
.hero__sello{
  position:absolute;right:-40px;top:-40px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(193,167,140,.34),transparent 68%);pointer-events:none;
}

/* Fila de categorías con icono */
.categorias{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,34px)}
.categoria{text-align:center;display:block;padding:8px}
.categoria__icono{
  width:64px;height:64px;margin:0 auto 14px;display:grid;place-items:center;
  border-radius:50%;background:var(--hueso);color:var(--arena-osc);
  transition:background var(--transicion),transform var(--transicion);
}
.categoria:hover .categoria__icono{background:var(--crema);transform:translateY(-4px)}
.categoria__icono svg{width:30px;height:30px;stroke-width:1.2}
.categoria h3{font-size:1.15rem;margin-bottom:.3em}
.categoria p{font-size:.85rem;color:var(--tinta-2);margin:0}

/* Banda de texto en movimiento */
.cinta{background:var(--arena-osc);color:var(--blanco);padding-block:14px;overflow:hidden}
.cinta__pista{display:flex;gap:0;width:max-content;animation:cm-desplaza 38s linear infinite}
.cinta__grupo{display:flex;gap:44px;padding-right:44px;align-items:center}
.cinta span{font-family:var(--display);font-size:1.05rem;letter-spacing:.04em;white-space:nowrap}
.cinta i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6;flex:none}
@keyframes cm-desplaza{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cinta__pista{animation:none}}

/* Bloque de dos columnas texto + imagen */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,76px);align-items:center}
.duo--invertido .duo__medios{order:-1}
.duo__medios{position:relative}
.duo__medios .marco{aspect-ratio:4/5}

/* Testimonios */
.cita{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-lg);padding:clamp(22px,3vw,34px)}
.cita p{font-family:var(--display);font-size:1.12rem;line-height:1.6;color:var(--tinta)}
.cita__autor{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:.85rem}
.cita__autor b{font-weight:500}
.cita__autor span{color:var(--tinta-3)}

/* Boletín */
.boletin{display:grid;grid-template-columns:1.1fr 1fr;background:var(--crema);border-radius:var(--radio-lg);overflow:hidden}
.boletin__texto{padding:clamp(28px,4vw,54px)}
.boletin__medios{min-height:260px}
.boletin__medios img{width:100%;height:100%;object-fit:cover}
.boletin form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.boletin input[type=email]{
  flex:1;min-width:200px;padding:.85em 1.1em;border:1px solid var(--linea-fuerte);
  border-radius:50px;background:var(--blanco);font:inherit;font-size:.9rem;
}
.boletin input[type=email]:focus{outline:none;border-color:var(--arena-osc)}

/* ==========================================================================
   Formularios
   ========================================================================== */
label{display:block;font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:.5em}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],input[type=url],textarea,select{
  width:100%;padding:.8em 1em;border:1px solid var(--linea-fuerte);border-radius:var(--radio);
  background:var(--blanco);font:inherit;font-size:.95rem;color:var(--tinta);
  transition:border-color var(--transicion),box-shadow var(--transicion);
}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--arena-osc);box-shadow:0 0 0 3px rgba(157,126,94,.13)}
::placeholder{color:var(--tinta-3)}

/* ==========================================================================
   Pie
   ========================================================================== */
.pie{background:var(--tinta);color:var(--arena-clara);padding-block:clamp(48px,6vw,80px) 0;margin-top:auto}
.pie a{color:var(--arena-clara)}
.pie a:hover{color:var(--blanco)}
.pie__rejilla{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,4vw,54px)}
.pie h3,.pie .widget__titulo{
  font-family:var(--texto);font-size:.76rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blanco);margin-bottom:1.3em;
}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7em}
.pie p,.pie li{font-size:.9rem;line-height:1.75}
.pie .marca__texto{color:var(--blanco)}
.pie__legal{
  margin-top:clamp(34px,5vw,58px);padding-block:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;font-size:.8rem;color:var(--tinta-3);
}
.pie__legal ul{flex-direction:row;gap:20px;margin-left:auto}
.redes{display:flex;gap:10px;margin-top:18px}
.redes a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);transition:background var(--transicion),border-color var(--transicion);
}
.redes a:hover{background:var(--arena-osc);border-color:var(--arena-osc)}
.redes svg{width:17px;height:17px}

/* ==========================================================================
   Interior de páginas
   ========================================================================== */
.encabezado-pagina{background:var(--crema);padding-block:clamp(44px,6vw,86px);text-align:center;position:relative;overflow:hidden}
.encabezado-pagina h1{margin-bottom:.2em}
.miga{display:flex;justify-content:center;gap:.6em;flex-wrap:wrap;font-size:.82rem;color:var(--tinta-2)}
.miga a{padding-block:3px}  /* objetivo táctil de al menos 24 px (WCAG 2.5.8), 12-10-2026 */
.miga a:hover{color:var(--arena-osc)}
.miga__sep{opacity:.5}

.entrada__cuerpo{font-size:1.02rem}
.entrada__cuerpo h2,.entrada__cuerpo h3{margin-top:1.6em}
.entrada__cuerpo img{border-radius:var(--radio-lg);margin-block:1.6em}
.entrada__cuerpo blockquote{
  margin:1.8em 0;padding:1.2em 1.6em;border-left:2px solid var(--arena);
  background:var(--hueso);font-family:var(--display);font-size:1.1rem;
}
.entrada__cuerpo ul,.entrada__cuerpo ol{padding-left:1.3em}
.entrada__cuerpo li{margin-bottom:.5em}

/* ==========================================================================
   Utilidades y accesibilidad
   ========================================================================== */
.solo-lectores{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.saltar{
  position:absolute;left:-9999px;z-index:100;padding:12px 20px;
  background:var(--tinta);color:var(--blanco);border-radius:0 0 var(--radio) 0;
}
.saltar:focus{left:0;top:0;color:var(--blanco)}
.centrar{text-align:center}
.sin-margen{margin:0}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}

/* ==========================================================================
   Adaptable
   ========================================================================== */
@media (max-width:1080px){
  .pie__rejilla{grid-template-columns:1fr 1fr}
  .rejilla--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--cabecera:70px}
  /* Sin menú visible la rejilla de tres columnas sobra: el <nav> se oculta
     entero para que no deje su hueco ni los dos huecos del gap. */
  .cabecera__interior{grid-template-columns:auto 1fr}
  .navegacion{display:none}
  .menu--principal{display:none}
  .menu-movil-boton{display:grid}
  .hero__interior{grid-template-columns:1fr;gap:34px}
  .hero__medios{grid-template-rows:repeat(2,minmax(120px,1fr))}
  .duo,.boletin{grid-template-columns:1fr}
  .duo--invertido .duo__medios{order:0}
  .categorias{grid-template-columns:repeat(2,1fr)}
  .rejilla--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  body{font-size:15px}
  .rejilla--2,.rejilla--3,.rejilla--4{grid-template-columns:1fr}
  .pie__rejilla{grid-template-columns:1fr}
  .pie__legal{flex-direction:column;align-items:flex-start}
  .pie__legal ul{margin-left:0}
  .marca__texto{font-size:1.15rem}
}