/* pf-core: ajustes para WordPress y espaciado unificado. Carga después de pf.css. */

/* ---- 1. WordPress fuera del camino ---- */
body{margin:0}
.wp-site-blocks{padding:0!important}
.wp-site-blocks>*{margin-block:0!important}
.pf-chrome{display:contents}
main#main{margin:0;padding:0}
.wp-block-post-content,.entry-content{margin:0!important;padding:0!important;max-width:none!important}
.wp-block-post-content>.pf-page{display:block;max-width:none!important;margin:0!important}
:where(figure){margin:0}
.admin-bar .header{top:62px}
@media(max-width:782px){.admin-bar .header{top:76px}}
@media(max-width:700px){.admin-bar .header{top:70px}}

/* ---- 2. Escala única de espaciado ----
   Antes cada sección tenía su propio número (110/95/75/85 de padding vertical,
   55/70/35 entre título y contenido, 13/16 entre h3 y párrafo, 18/20/24 de margen
   lateral en móvil...). Ahora todo sale de estos tokens. */
:root{
  --s-1:8px;
  --s-2:16px;
  --s-3:clamp(20px,1.7vw,24px);
  --s-4:clamp(24px,2.2vw,32px);
  --s-5:clamp(36px,3.9vw,56px);
  --section-y:clamp(72px,7.6vw,110px);
  --card-pad:clamp(24px,2.1vw,30px);
  --grid-gap:24px;
  --edge:var(--page);              /* margen lateral de TODO: secciones, header, hero, footer */
}
@media(min-width:1700px){
  :root{--edge:max(var(--page),calc((100vw - 1480px)/2))}
}
@media(max-width:700px){
  :root{--page:24px;--grid-gap:20px}
}

/* Mismo padding vertical y lateral en todas las secciones */
.section-shell,
.collections,
.philosophy-content{padding:var(--section-y) var(--edge)}
.footer-top{padding:var(--section-y) var(--edge)}

/* Mismo margen lateral en las piezas que van fuera de .section-shell */
.header{left:var(--edge);right:var(--edge)}
.hero-copy{padding-left:var(--edge);padding-right:var(--edge)}
.hero-bottom{left:var(--edge);right:var(--edge)}
.footer-wordmark{padding:0 var(--edge) var(--s-4)}
.footer-bottom{margin:0 var(--edge);padding-top:var(--s-3)}
.footer-disclosure{margin:var(--s-3) var(--edge) 0}
.footer{padding-bottom:var(--s-4)}

/* Eyebrow -> título */
.eyebrow{margin:0 0 var(--s-3)}

/* Título de sección -> contenido */
.section-heading{margin-bottom:var(--s-5)}
.values-strip{margin-top:var(--s-5);padding-top:var(--s-4)}
.philosophy-description{margin:var(--s-4) auto var(--s-5)}
.image-note{margin:var(--s-4) 0 0}

/* Titulares grandes -> lo que sigue */
.hero h1{margin:0 0 var(--s-4)}
.hero-description{margin:0 0 var(--s-4)}
.footer-top h2{margin-bottom:var(--s-4)}

/* Párrafos */
.intro-copy p{margin:0 0 var(--s-3)}
.contact-info>p:first-child{margin:0 0 var(--s-3)}
.phone{margin:var(--s-3) 0}
.card-copy{padding:var(--s-3) 4px 0}
.card-copy p{margin:var(--s-2) 0 12px}
.principles p{margin:var(--s-2) 0 0}
.journey-steps p{margin:var(--s-2) 0 0}

/* Rejillas de tarjetas: mismo hueco */
.collection-grid,.principles{gap:var(--grid-gap)}
.principles article{padding:var(--card-pad)}
.principles svg{margin-bottom:var(--s-4)}

/* Pasos del recorrido */
.journey-steps>div{gap:var(--s-3);padding:var(--s-3) 0}
.journey-steps>div:first-child{padding-top:0}

@media(max-width:700px){
  .header{top:var(--page)}
  .intro-grid,.journey,.footer-top{gap:var(--s-5)}
  .section-heading{margin-bottom:var(--s-5)}
  .section-heading>p{margin-top:var(--s-3)}
  /* Las tarjetas de colección no tienen caja: el texto de una se pegaría a la foto
     de la siguiente con 20px, así que usan el hueco de bloque. */
  .collection-grid{gap:var(--s-5)}
  .card-copy{padding-top:var(--s-3)}
  .hero-bottom{bottom:var(--page)}
}

/* ---- 3. Menú móvil por clase (el atributo hidden pierde contra display:flex de bloque) ---- */
@media(max-width:700px){
  .mobile-nav.is-open{display:flex;flex-direction:column;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:18px;background:var(--paper);box-shadow:0 12px 30px #15201530;border-radius:10px}
}

/* ---- 6. Contraste AA del texto pequeño (medido sobre cada fondo real, 21-oct-2026) ---- */
/* Sobre --sage/crema (#f8f0d1) y paper los grises del prototipo se quedan en 4.3-4.4:1.         */
.card-copy p,.section-heading>p,.image-note{color:#5d6757}
.journey-steps>div>span{color:#5b6851}
/* El pie es amarillo de marca (--peak-yellow #f2e088): ahí el verde de marca da 3.1:1 y los     */
/* grises 4.4:1. Se bajan solo dentro del pie, para no tocar el verde del resto del sitio.       */
.footer-bottom a{color:#396d21}
.footer .contact-info>p:first-child,.footer .facebook small{color:#596552}
.footer .phone small,.footer-disclosure{color:#586551}
.text-link:hover{color:#5d684a;border-color:#5d684a}

/* ---- 5. Indicador global de enlace externo (regla de build de Sebastian, 20-oct-2026) ---- */
/* Los que llevan icono propio (svg/img) se quedan: ya se distinguen solos. */
a[target="_blank"]:not(:has(svg)):not(:has(img))::after{content:"\2197";display:inline-block;margin-left:.3em;font-size:.8em;line-height:1;text-decoration:none;opacity:.75}
a[target="_blank"]:not(:has(svg)):not(:has(img)):hover::after{opacity:1}

/* ---- 4. Revelado por scroll: nunca dejar contenido invisible ---- */
@media(prefers-reduced-motion:reduce){
  .reveal-pending{opacity:1!important;transform:none!important}
}