/* ============================================================
   CORRECCIONES RESPONSIVE — se carga la última
   320 / 360 / 390 / 768 / 1024 / 1440 y móvil apaisado
   ============================================================ */

/* --- 1. Sin desbordamiento horizontal en ninguna anchura --- */
html, body{ max-width:100%; overflow-x:hidden; }
img, video, canvas, svg, iframe{ max-width:100%; }
img:not([width]):not([height]){ height:auto; }
*, *::before, *::after{ min-width:0; }
pre, code, table{ max-width:100%; overflow-x:auto; }
/* palabras largas (emails, URLs) no rompen la caja */
p, li, h1, h2, h3, h4, a, dd, dt, td, th, figcaption{ overflow-wrap:break-word; }

/* --- 2. Alturas: dvh evita el salto de la barra de iOS --- */
.hero-over-tree, .hero-willow, .hero{
  min-height: 88vh;              /* respaldo navegadores antiguos */
  min-height: 88dvh;
}
.hero{ height:auto; }
/* El cajón lateral solo existe por debajo de 1024px.
   (Esta regla estaba fuera de la media query y estiraba
   los enlaces a toda la pantalla también en escritorio,
   arrastrando la cabecera con ellos.) */
@media (max-width: 1024px){
  @supports (height: 100dvh){
    .nav-links{ height: 100dvh; }
  }
}
/* Móvil apaisado: el hero no puede ocupar toda la pantalla */
@media (max-height: 560px) and (orientation: landscape){
  .hero-over-tree, .hero-willow, .hero{ min-height: auto; padding-top:5.5rem; padding-bottom:3.5rem; }
  .el-cue{ display:none; }
  .ed-section{ padding: 3rem 0; }
  .ed-section--airy{ padding: 3.5rem 0; }
}

/* --- 3. Áreas táctiles mínimas de 44x44 --- */
@media (max-width: 1024px){
  .nav-links a{
    min-height:48px; display:flex; align-items:center;
  }
  /* Los iconos sociales quedan fuera: son <a> dentro del pie, y esta regla
     (0,1,1) le ganaba a .social-icon (0,1,0), les imponia display:inline-block
     con line-height:44px y el dibujo se iba a la esquina del circulo. */
  .footer-section a:not(.social-icon),
  .footer a:not(.social-icon),
  .breadcrumb-nav a{
    display:inline-block; min-height:44px; line-height:44px;
  }
  .footer-section li{ line-height:1.2; }
  .social-icon{ width:44px !important; height:44px !important; display:inline-flex; align-items:center; justify-content:center; }
  .menu-toggle{ min-width:48px; min-height:48px; }
  .btn, .el-btn, .ed-btn{ min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
  .back-to-top{ width:48px !important; height:48px !important; }
}

/* --- 4. Nada de texto ilegible en móvil --- */
@media (max-width: 768px){
  body{ font-size:1rem; }
  p, li, .ed-body, .card-text, .pilar-texto, .paso-contenido p, .ed-step__d{ font-size:1rem !important; line-height:1.7; }
  .ed-lede{ font-size:1.15rem !important; }
  .footer-bottom p, .footer-section p, .footer-section li,
  .ed-figure figcaption, .ed-cat__data li{ font-size:.875rem !important; }
  .ed-kicker, .section-tag, .el-kicker{ font-size:.72rem !important; letter-spacing:.14em; }
}

/* --- 5. Rejilla editorial en pantallas pequeñas --- */
@media (max-width: 900px){
  .ed-grid{ gap:0 1rem; }
  .ed-figure{ margin-top:2rem; }
}
@media (max-width: 420px){
  .ed-grid{ padding-left:1.1rem; padding-right:1.1rem; }
  .ed-display{ font-size: clamp(2.2rem, 11vw, 3rem); }
  .ed-pull p{ font-size: clamp(1.35rem, 7.5vw, 1.9rem); }
  .ed-cat{ gap:1.5rem; }
  .ed-cat__fig{ max-width:210px; }
  .ed-actions{ gap:.7rem; }
  .ed-actions .ed-btn{ width:100%; }
}

/* --- 6. Baraja 3D del catálogo: no puede desbordar --- */
@media (max-width: 760px){
}

/* --- 7. Tablas del área legal --- */
@media (max-width: 620px){
  .legal-content table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ============================================================
   CABECERA — altura contenida y sin salto al cargar
   (el logo es 400x400; sin tamaño fijo se dibujaba gigante
   durante el primer instante de carga)
   ============================================================ */
.logo-img,
.logo-grande{
  height: 64px !important;
  width: 64px !important;
  object-fit: contain;
  display: block;
}
.navbar{ padding: .55rem 0 !important; }
.header{ contain: layout paint; }

@media (max-width: 1024px){
  .logo-img, .logo-grande{ height: 56px !important; width: 56px !important; }
}
@media (max-width: 768px){
  .logo-img, .logo-grande{ height: 48px !important; width: 48px !important; }
  .navbar{ padding: .4rem 0 !important; }
}

/* Titular del hero: contundente pero sin desbordar la pantalla */
.ed-display{ font-size: clamp(2.6rem, 6.4vw, 5rem) !important; }
@media (max-width: 480px){
  .ed-display{ font-size: clamp(2.1rem, 9.5vw, 2.8rem) !important; }
}

/* ============================================================
   CORRECCIÓN DE CABECERA Y HERO
   ============================================================ */

/* 1. El hero es visible SIN depender del JS.
      Antes: opacity 0 hasta que alma.js añadía body.loaded — si el JS
      no llegaba a ejecutarse quedaba una franja enorme vacía. */
.hero-over-tree__content{ opacity: 1 !important; transform: none !important; }
body.loaded .hero-over-tree__content{ opacity: 1 !important; }

/* 2. Altura de cabecera acotada de verdad */
.header .container{ max-height: 84px; }
.navbar{ min-height: 0; }
.logo{ display: inline-flex; align-items: center; line-height: 1; }

/* 3. La hamburguesa solo en móvil/tablet
      (responsive.css la declaraba fuera de su media query) */
.menu-toggle{ display: none !important; }
@media (max-width: 1024px){
  .menu-toggle{ display: inline-flex !important; }
}

/* 4. El hero no ocupa la pantalla entera: se ve que hay más abajo */
.hero-over-tree{
  min-height: 76vh;
  min-height: 76dvh;
}
@media (max-width: 768px){
  .hero-over-tree{ min-height: 70vh; min-height: 70dvh; }
}

/* Salvaguarda: en escritorio la navegación nunca tiene altura propia */
@media (min-width: 1025px){
  .nav-links{ height: auto !important; position: static !important; }
  .header .container{ max-height: none; }
  .navbar{ min-height: 72px; }
}

/* ============================================================
   LEGIBILIDAD — se carga la última para ganar la cascada
   ============================================================ */

/* --- Ficha de catálogo sobre fondo oscuro --- */
.ed-dark .ed-cat__data,
.ed-dark .ed-cat__data li{ border-color: rgba(245,240,228,.20) !important; }
.ed-dark .ed-cat__data .k,
.ed-dark .ed-cat__data dt{ color: #D9B968 !important; }
.ed-dark .ed-cat__data .v{ color: #F4F0E4 !important; }
.ed-dark .ed-body,
.ed-dark p:not(.ed-kicker){ color: rgba(246,242,232,.90) !important; }
.ed-dark .ed-h2,
.ed-dark h2{ color: #FAF7EE !important; }

/* --- Hero: velo suave + halo de texto.
       El fondo cambia de rama seca clara a musgo verde con el cursor,
       así que el texto necesita separarse de ambos sin tapar la imagen. --- */
.hero-over-tree__content{
  background: radial-gradient(ellipse 86% 132% at 50% 48%,
              rgba(248,246,239,.88) 0%,
              rgba(248,246,239,.62) 52%,
              rgba(248,246,239,0) 100%) !important;
  padding: 2.4rem 2.2rem 2.8rem !important;
}
.hero-over-tree__content h1{
  color: #16240F !important;
  text-shadow: 0 1px 12px rgba(250,249,244,.95), 0 0 32px rgba(250,249,244,.8);
}
.hero-over-tree__content .hero-subtitle{
  color: #333D2B !important;
  text-shadow: 0 1px 10px rgba(250,249,244,.95), 0 0 22px rgba(250,249,244,.85);
  font-style: normal;
}
.hero-over-tree__content .hero-eyebrow{
  color: #48370B !important;
  text-shadow: 0 1px 8px rgba(250,249,244,.9);
}
.el-cue{ color:#3B4433 !important; text-shadow: 0 1px 8px rgba(250,249,244,.9); }

@media (max-width: 560px){
  .hero-over-tree__content{ padding: 1.9rem 1.2rem 2.2rem !important; }
}

/* ============================================================
   MENÚ MÓVIL — panel desplegable bajo la cabecera
   ------------------------------------------------------------
   Antes era un cajón lateral con position:fixed. Pero .header
   lleva will-change:transform (para ocultarse al hacer scroll)
   y contain:layout paint, y ambos crean un contexto de
   contención: el cajón quedaba anclado dentro de la cabecera y
   recortado por ella, así que no llegaba a verse nunca.
   ============================================================ */
@media (max-width: 1024px){
  .header{ contain: none; }
  .navbar{ position: relative; }

  .nav-links{
    display: flex !important;
    position: absolute !important;
    top: 100%; left: 0; right: 0;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: .25rem 1.25rem 1rem;
    background: #FFFDF8;
    border-top: 1px solid rgba(58,82,54,.12);
    box-shadow: 0 18px 40px rgba(28,26,20,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    z-index: 1200;
  }
  .nav-links.active{
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .nav-links a{
    width: 100%;
    min-height: 52px;
    display: flex; align-items: center;
    justify-content: flex-start;
    padding: .85rem .25rem;
    font-size: 1.05rem;
    color: #1E2E1B;
    background: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(58,82,54,.10);
  }
  .nav-links a:last-child{ border-bottom: none; }
  .nav-links a.active{ color: #3A5236; font-weight: 700; }

  @supports not (max-height: 100dvh){
    .nav-links{ max-height: calc(100vh - 4.5rem); }
  }
}

/* Colección / trilogía en la ficha de libro */
.libro-coleccion{
  margin: .6rem 0 0;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6E6653;
}

/* ============================================================
   CONTACTO — bloque sólido, sin efectos detrás
   ============================================================ */
.contacto-datos{ background:#F5F0E4; padding: clamp(3rem,6vw,5rem) 0; }

.contacto-caja{
  max-width: 900px;
  margin: 0 auto;
  background: #FFFDF8;
  border: 1px solid rgba(58,82,54,.16);
  border-top: 4px solid #3A5236;
  border-radius: 2px;
  padding: clamp(1.75rem,4vw,3.25rem);
  box-shadow: 0 12px 36px rgba(28,26,20,.07);
}

.contacto-lista{
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
}
.contacto-lista li{
  display: grid;
  gap: .25rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(58,82,54,.14);
}
.contacto-lista li:last-child{ border-bottom: 1px solid rgba(58,82,54,.14); }

.contacto-etq{
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6E6653;
}
.contacto-dato{
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  line-height: 1.25;
  color: #1E2E1B;
  text-decoration: none;
  word-break: break-word;
}
a.contacto-dato:hover, a.contacto-dato:focus-visible{
  color: #3A5236; text-decoration: underline; text-underline-offset: 4px;
}
.contacto-dato--texto{ color:#1C1A14; }
.contacto-nota{ font-size: .95rem; color: #4A4636; }

.contacto-cierre{
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(58,82,54,.14);
  font-size: 1rem;
  line-height: 1.75;
  color: #4A4636;
  max-width: 62ch;
}

@media (max-width: 600px){
  .contacto-lista li{ padding: .9rem 0; }
}

/* ============================================================
   FRANJA DE CONTACTO — visible nada más bajar del hero
   ============================================================ */
.contacto-franja{
  background: #1E2E1B;
  color: #F5F0E4;
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0;
}
.contacto-franja__in{ text-align: center; }
.contacto-franja__txt{
  margin: 0 0 1rem;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: #EDE8D8;
}
.contacto-franja__datos{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 2.5rem;
}
.contacto-franja__datos a{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .35rem .5rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.15rem, 2.8vw, 1.5rem);
  color: #F7F3E7;
  text-decoration: none;
  border-bottom: 1px solid rgba(247,243,231,.35);
}
.contacto-franja__datos a:hover,
.contacto-franja__datos a:focus-visible{
  color: #E4C87A; border-bottom-color: #E4C87A;
}
.contacto-franja__datos svg{ width: 22px; height: 22px; flex: none; }
.contacto-franja__pie{
  margin: 1rem 0 0;
  font-size: .9rem;
  color: rgba(245,240,228,.82);
}
@media (max-width: 600px){
  .contacto-franja__datos{ flex-direction: column; align-items: center; gap: .25rem; }
}

/* ============================================================
   QUÉ HACEMOS — lista de servicios
   ============================================================ */
.serv-lista{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.6rem 2.4rem;
}
.serv-lista li{
  padding-top: 1rem;
  border-top: 1px solid rgba(58,82,54,.22);
}
.serv-lista h3{
  margin: 0 0 .45rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.12rem;
  line-height: 1.3;
  color: #1E2E1B;
}
.serv-lista p{
  margin: 0;
  font-size: .97rem;
  line-height: 1.65;
  color: #3F3B2E;
}

.serv-aviso{
  margin-top: 2.5rem;
  padding: 1.5rem 1.6rem;
  background: #FFFDF8;
  border: 1px solid rgba(58,82,54,.18);
  border-left: 4px solid #B8963E;
  border-radius: 2px;
}
.serv-aviso p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: #3F3B2E;
  max-width: 62ch;
}
.serv-aviso strong{ color:#1E2E1B; }

@media (max-width: 720px){
  .serv-lista{ grid-template-columns: 1fr; gap: 1.2rem; }
}

/* Contacto directo al cierre de la portada */
.cierre-contacto{
  margin: 1.6rem 0 0;
  font-size: 1.05rem;
  color: #4A4636;
}
.cierre-contacto a{
  color: #2C4226;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cierre-contacto a:hover, .cierre-contacto a:focus-visible{ color:#1E2E1B; }

/* ============================================================
   RESEÑAS — petición en catálogo y en cada ficha
   ============================================================ */
.resenas-seccion{ background:#F5F0E4; padding: clamp(2.5rem,5vw,4rem) 0; }
.resenas-caja{
  max-width: 900px; margin: 0 auto;
  background:#FFFDF8;
  border:1px solid rgba(58,82,54,.16);
  border-left:4px solid #B8963E;
  border-radius:2px;
  padding: clamp(1.5rem,3.5vw,2.75rem);
}
.resenas-caja .ed-h2 em{ font-style: italic; }
.resenas-nota{
  margin: 1.4rem 0 0;
  font-size: .95rem;
  color:#6E6653;
}

/* ============================================================
   PIE — iconos sociales centrados en su círculo
   ============================================================ */
.footer .social-links{
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
}
.footer .social-icon,
.social-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  min-height: 0;
  flex: none;
  overflow: hidden;
}
.footer .social-icon svg,
.social-icon svg{
  width: 18px !important;
  height: 18px !important;
  display: block;
  fill: currentColor;
  margin: 0;
}