/* =====================================================================
   global.css — Brumar
   UNA sola hoja de estilos para TODO el sitio: landing, blog, recursos,
   privacidad, páginas de gracias, pago y 404.
   Cambia un color en :root y cambia en todas las páginas a la vez.
   ===================================================================== */

/* ===================== TOKENS ===================== */
:root{
  --cream:#F5F0E8;
  --cream-deep:#ECE3D3;
  --sand:#B2A592;
  --mist:#798689;
  --terracotta:#A17259;
  --terracotta-deep:#8A5F49;
  --ink:#2C2823;
  --ink-soft:#5B554B;
  --white:#FFFFFF;

  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;

  --space-s: 16px;
  --space-m: 32px;
  --space-l: 48px;
  --space-xl: 80px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.12;color:var(--ink);}
.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  font-weight:600;
  color:var(--terracotta-deep);
  display:block;
  margin-bottom:14px;
}
.container{max-width:1180px;margin:0 auto;padding:0 var(--space-s);}
section{padding:var(--space-xl) 0;}
@media (max-width:640px){
  section{padding:56px 0;}
  :root{--space-xl:56px;}
}

/* focus visibility */
a:focus-visible, button:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--terracotta);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  padding:16px 30px;
  border-radius:100px;
  border:none;
  cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(161,114,89,.55);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--terracotta-deep); transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(161,114,89,.6);}
.btn-ghost{
  background:transparent;
  border:1.5px solid var(--ink);
  color:var(--ink);
  box-shadow:none;
}
.btn-ghost:hover{background:var(--ink); color:var(--cream);}
.microcopy{
  display:block;
  margin-top:12px;
  font-size:13px;
  color:var(--ink-soft);
}

/* ===================== NAV ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--space-s);
  background:rgba(245,240,232,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(44,40,35,.06);
}
.nav.is-solid{background:rgba(245,240,232,.94);}
.nav__logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:20px;}
.nav__logo img{height:34px;width:auto;}
.nav .btn{padding:12px 22px;font-size:14px;}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  background:var(--cream);
  padding:120px var(--space-s) 48px;
  gap:36px;
}
@media (min-width:900px){
  .hero{
    grid-template-columns:0.95fr 1.05fr;
    align-items:center;
    min-height:100vh;
    padding:120px 6vw 60px;
    gap:60px;
  }
}
.hero__text{
  order:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (min-width:900px){
  .hero__text{order:1; max-width:520px;}
}
.hero__media{
  order:1;
  position:relative;
  overflow:hidden;
  border-radius:26px;
  aspect-ratio:4/5;
  box-shadow:0 30px 60px -22px rgba(44,40,35,.32);
}
@media (min-width:900px){
  .hero__media{order:2; aspect-ratio:auto; height:min(78vh, 720px);}
}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 30%;}

.hero__text .eyebrow{color:var(--terracotta-deep);}
.hero h1{
  font-size:clamp(30px, 4.4vw, 54px);
  max-width:14ch;
  color:var(--ink);
}
.hero p{
  margin-top:20px;
  font-size:clamp(16px, 1.6vw, 18px);
  max-width:46ch;
  color:var(--ink-soft);
  font-weight:300;
}
.hero__cta{margin-top:32px;}
.hero__cta .microcopy{color:var(--ink-soft);}
.hero__alt, .cta-final__alt{margin-top:14px;}
.hero__alt a{font-size:14px; font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:3px; opacity:.8;}
.hero__alt a:hover{opacity:1;}
.cta-final__alt a{font-size:14px; font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:3px;}

.scroll-hint{display:none;}
.scroll-hint span{width:1px;height:26px;background:currentColor;animation:scrollDown 1.8s ease-in-out infinite;}
@keyframes scrollDown{0%{opacity:0; transform:scaleY(.3); transform-origin:top;}50%{opacity:1;transform:scaleY(1);transform-origin:top;}100%{opacity:0;transform:scaleY(.3);transform-origin:bottom;}}

/* ===================== MIST DIVIDER (signature element) ===================== */
.mist-divider{
  position:relative;
  height:120px;
  margin-top:-1px;
  background:
    radial-gradient(60% 100% at 20% 100%, rgba(121,134,137,.55), transparent 70%),
    radial-gradient(50% 100% at 60% 100%, rgba(245,240,232,.9), transparent 75%),
    radial-gradient(70% 100% at 90% 100%, rgba(161,114,89,.4), transparent 70%);
  filter:blur(18px);
}
@media (max-width:640px){.mist-divider{height:70px;}}

/* ===================== REVEAL ===================== */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ===================== PROBLEMA ===================== */
.problema{background:linear-gradient(160deg, rgba(178,165,146,.22), transparent 55%), var(--cream);}
.problema__grid{display:grid; gap:var(--space-l); align-items:center;}
.problema h2{font-size:clamp(26px,4vw,40px); max-width:16ch;}
.problema p{margin-top:18px; color:var(--ink-soft); font-size:16px; max-width:52ch;}
@media (min-width:900px){
  .problema__grid{grid-template-columns:1fr 1fr; gap:var(--space-xl);}
}

/* ===================== PROCESO ===================== */
.proceso{background:var(--cream-deep);}
.proceso__head{max-width:640px; margin-bottom:var(--space-l);}
.proceso__head h2{font-size:clamp(26px,4vw,40px);}
.proceso__head p{margin-top:14px; color:var(--ink-soft);}
.proceso__grid{display:grid; gap:24px; grid-template-columns:1fr;}
@media (min-width:820px){.proceso__grid{grid-template-columns:repeat(3,1fr);}}
.step{
  background:var(--cream);
  border-radius:18px;
  padding:32px 26px;
  border:1px solid rgba(44,40,35,.07);
  border-top:3px solid var(--terracotta);
}
.step:nth-child(2){border-top-color:var(--mist);}
.step__num{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--terracotta);
  border:1px solid var(--terracotta);
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.step:nth-child(2) .step__num{color:var(--mist); border-color:var(--mist);}
.step h3{font-size:20px; margin-bottom:10px;}
.step p{color:var(--ink-soft); font-size:15px;}

/* ===================== COTIZADOR ===================== */
.cotizador{background:var(--cream-deep);}
.cotizador__head{max-width:640px; margin-bottom:var(--space-l);}
.cotizador__head h2{font-size:clamp(26px,4vw,40px);}
.cotizador__head p{margin-top:14px; color:var(--ink-soft);}
.quoter{
  background:var(--cream);
  border-radius:24px;
  border:1px solid rgba(44,40,35,.08);
  border-top:4px solid var(--terracotta);
  padding:36px;
  display:grid;
  gap:32px;
}
@media (min-width:900px){.quoter{grid-template-columns:1fr 1fr; padding:44px;}}

.quoter__left{display:flex; flex-direction:column; justify-content:center;}
.quoter__count{display:flex; align-items:baseline; gap:10px; margin-bottom:6px;}
.quoter__count-num{font-family:var(--font-display); font-size:56px; color:var(--terracotta-deep);}
.quoter__count-label{font-size:15px; color:var(--ink-soft);}
.quoter__tier{
  display:inline-block;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--terracotta-deep);
  background:rgba(161,114,89,.1);
  padding:5px 12px;
  border-radius:100px;
  margin-bottom:22px;
  width:fit-content;
  transition:color .2s ease, background .2s ease;
}
.quoter__tier.is-mist{color:#4f5f62; background:rgba(121,134,137,.14);}

.slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:100px;
  background:var(--sand);
  outline:none;
  margin:14px 0 6px;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--terracotta);
  border:4px solid var(--cream);
  box-shadow:0 2px 8px rgba(44,40,35,.3);
  cursor:pointer;
}
.slider::-moz-range-thumb{
  width:26px;height:26px;
  border-radius:50%;
  background:var(--terracotta);
  border:4px solid var(--cream);
  box-shadow:0 2px 8px rgba(44,40,35,.3);
  cursor:pointer;
  border:none;
}
.slider::-moz-range-track{height:6px; border-radius:100px; background:var(--sand);}
.quoter__scale{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); margin-bottom:28px;}

.quoter__price-row{display:flex; flex-direction:column; gap:2px;}
.quoter__price{font-family:var(--font-display); font-size:44px; color:var(--ink); line-height:1.05;}
.quoter__price-sub{font-size:14px; color:var(--ink-soft);}
.quoter__total{margin-top:2px; font-size:14px; color:var(--ink-soft);}
.quoter__total strong{color:var(--ink); font-weight:600; font-family:var(--font-body);}
.quoter__extras-total{font-size:13px; color:var(--terracotta-deep); margin-top:2px; min-height:18px;}

.quoter__right{
  background:var(--cream-deep);
  border-radius:16px;
  padding:28px 26px;
}
.quoter__right h3{font-family:var(--font-body); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:16px;}
.quoter__list{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:22px;}
.quoter__list li{display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--ink);}
.quoter__list li::before{
  content:"";
  flex-shrink:0;
  width:18px;height:18px;
  margin-top:2px;
  border-radius:50%;
  background:var(--terracotta);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
}
.quoter__list li.is-dynamic{font-weight:600;}

/* Extras */
.quoter__extras{
  border-top:1px solid rgba(44,40,35,.1);
  padding-top:18px;
  margin-bottom:22px;
  display:flex; flex-direction:column; gap:12px;
}
.extra{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--cream);
  border:1px solid rgba(44,40,35,.08);
  border-left:3px solid var(--terracotta);
  border-radius:12px;
  padding:12px 14px;
  cursor:pointer;
}
.extra--mist{border-left-color:var(--mist);}
.extra input{margin-top:3px; width:17px; height:17px; accent-color:var(--terracotta); flex-shrink:0;}
.extra--mist input{accent-color:var(--mist);}
.extra--mist .extra__price{color:var(--mist);}
.extra__body{flex:1;}
.extra__top{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.extra__name{font-size:15px; font-weight:600; color:var(--ink);}
.extra__price{font-size:14px; color:var(--terracotta-deep); font-weight:600; white-space:nowrap;}
.extra__desc{font-size:13px; color:var(--ink-soft); margin-top:2px;}
.extra__link{
  display:inline-block; margin-top:8px; font-size:13px; font-weight:600;
  color:var(--terracotta-deep); text-decoration:underline;
  text-underline-offset:3px;
}

.quoter__right .btn{width:100%; justify-content:center;}
.quoter__right .microcopy{text-align:center;}

/* Modal galería Flying Dress: mismo lenguaje visual que el portafolio completo */
.fd-modal{
  position:fixed; inset:0; z-index:210;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(20,18,16,0);
  pointer-events:none;
  transition:background .3s ease, backdrop-filter .3s ease;
}
.fd-modal.is-open{
  background:rgba(20,18,16,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  pointer-events:auto;
}
.fd-modal__panel{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:820px;
  height:88vh;
  background:var(--cream);
  border-radius:28px 28px 0 0;
  box-shadow:0 -30px 60px -20px rgba(20,18,16,.4);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  position:relative;
}
.fd-modal.is-open .fd-modal__panel{transform:translateY(0);}
.fd-modal__handle{width:42px; height:5px; border-radius:100px; background:var(--sand); margin:14px auto 0; flex-shrink:0;}
.fd-modal__header{
  padding:10px var(--space-s) 14px;
  border-bottom:1px solid rgba(44,40,35,.08);
}
.fd-modal h3{font-family:var(--font-display); font-size:22px; line-height:1.1;}
.fd-modal p{color:var(--ink-soft); font-size:13px; margin-top:4px;}
.fd-modal__close{
  position:absolute; top:16px; right:18px;
  background:transparent; color:var(--ink);
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--ink);
  font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.fd-modal__close:hover{background:var(--ink); color:var(--cream); transform:rotate(90deg);}
.fd-modal__body{flex:1; overflow-y:auto; padding:20px var(--space-s) 60px;}

/* ===================== PROMESA ===================== */
.promesa{
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(161,114,89,.35), transparent 65%),
    radial-gradient(50% 70% at 15% 100%, rgba(121,134,137,.22), transparent 70%),
    var(--ink);
  color:var(--cream);
  text-align:center;
}
.promesa .container{max-width:820px;}
.promesa .eyebrow{color:var(--sand);}
.promesa h2{color:var(--white); font-size:clamp(26px,4.4vw,44px); font-style:italic;}
.promesa p{margin-top:22px; color:rgba(245,240,232,.82); font-size:17px; max-width:60ch; margin-left:auto; margin-right:auto;}

/* ===================== PORTAFOLIO ===================== */
.portafolio__head{max-width:640px; margin-bottom:var(--space-l);}
.portafolio__head h2{font-size:clamp(26px,4vw,40px);}
.portafolio__head p{margin-top:14px; color:var(--ink-soft);}

/* Carrusel: cada foto conserva su orientación real (vertical u horizontal), sin recortes */
.carousel-wrap{position:relative;}
.carousel{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none;}
.carousel figure{
  flex:0 0 auto;
  height:190px;
  scroll-snap-align:start;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  background:var(--cream-deep);
}
@media (min-width:720px){.carousel figure{height:250px;}}
.carousel img{height:100%; width:auto; display:block; transition:transform .5s ease;}
.carousel figure:hover img{transform:scale(1.04);}

.carousel__dots{display:flex; justify-content:center; gap:8px; margin-top:20px;}
.carousel__dots button{
  width:8px; height:8px; border-radius:50%;
  border:none; background:var(--sand); padding:0; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.carousel__dots button.is-active{background:var(--terracotta); transform:scale(1.3);}

/* Flechas: flotan sobre el carrusel y solo aparecen al pasar el cursor (desktop) */
.carousel__nav{
  position:absolute; top:0; bottom:6px;
  display:flex; align-items:center;
  pointer-events:none;
}
.carousel__nav--prev{left:-6px;}
.carousel__nav--next{right:-6px;}
.carousel__nav button{
  width:38px; height:38px; border-radius:50%;
  border:none; background:rgba(245,240,232,.92);
  box-shadow:0 6px 16px -6px rgba(44,40,35,.4);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; color:var(--ink);
  opacity:0;
  transform:translateY(0) scale(.9);
  transition:opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
  pointer-events:auto;
}
.carousel-wrap:hover .carousel__nav button{opacity:1; transform:scale(1);}
.carousel__nav button:hover{background:var(--ink); color:var(--cream);}
@media (max-width:900px){ .carousel__nav{display:none;} }

.portafolio__footer{margin-top:30px; text-align:center;}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:300;
  background:rgba(20,18,16,.92);
  display:none;
  align-items:flex-start;justify-content:center;
  padding:80px 24px 24px;
  overflow-y:auto;
}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:100%; max-height:78vh; border-radius:8px;}
.lightbox__close{
  position:fixed; top:20px; right:24px;
  width:42px; height:42px; border-radius:50%;
  background:rgba(245,240,232,.12);
  border:1.5px solid rgba(245,240,232,.6);
  color:var(--cream);
  font-size:22px;cursor:pointer;line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
  z-index:2;
}
.lightbox__close:hover{background:rgba(245,240,232,.9); color:var(--ink); transform:rotate(90deg);}

/* Modal portafolio completo: panel que sube desde abajo (bottom sheet), tampoco recorta las fotos */
.full-modal{
  position:fixed; inset:0; z-index:210;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(20,18,16,0);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  pointer-events:none;
  transition:background .3s ease, backdrop-filter .3s ease;
}
.full-modal.is-open{
  background:rgba(20,18,16,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  pointer-events:auto;
}
.full-modal__panel{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:1080px;
  height:90vh;
  background:var(--cream);
  border-radius:28px 28px 0 0;
  box-shadow:0 -30px 60px -20px rgba(20,18,16,.4);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.full-modal.is-open .full-modal__panel{transform:translateY(0);}

.full-modal__handle{
  width:42px; height:5px; border-radius:100px;
  background:var(--sand);
  margin:14px auto 0;
  flex-shrink:0;
}
.full-modal__header{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px var(--space-s) 18px;
  background:var(--cream);
  border-bottom:1px solid rgba(44,40,35,.08);
  border-radius:28px 28px 0 0;
}
.full-modal__titles h3{font-family:var(--font-display); font-size:22px; line-height:1.1;}
.full-modal__titles span{font-size:13px; color:var(--ink-soft);}
.full-modal__close{
  background:transparent; color:var(--ink);
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--ink);
  font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.full-modal__close:hover{background:var(--ink); color:var(--cream); transform:rotate(90deg);}
.full-modal__body{
  flex:1;
  overflow-y:auto;
  padding:24px var(--space-s) 70px;
}
/* Colaje tipo polaroid — compartido por el portafolio completo y el de flying dress */
.masonry{
  columns:2 140px; column-gap:0;
  max-width:980px; margin:0 auto;
}
@media (min-width:560px){.masonry{columns:3 170px;}}
@media (min-width:860px){.masonry{columns:4 200px;}}
/* El panel de flying dress es más angosto: nunca pasa de 3 columnas */
.fd-modal .masonry{max-width:100%;}
@media (min-width:860px){.fd-modal .masonry{columns:3 170px;}}
.masonry figure{
  break-inside:avoid;
  margin:0 -4px 14px;
  padding:8px 8px 20px;
  background:var(--white);
  border-radius:6px;
  box-shadow:0 10px 22px -10px rgba(44,40,35,.35);
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease, z-index 0s;
  position:relative;
}
.masonry img{width:100%; display:block; border-radius:2px;}
.masonry figure:nth-child(6n+1){transform:rotate(-3deg);}
.masonry figure:nth-child(6n+2){transform:rotate(2deg);}
.masonry figure:nth-child(6n+3){transform:rotate(-1.4deg);}
.masonry figure:nth-child(6n+4){transform:rotate(2.6deg);}
.masonry figure:nth-child(6n+5){transform:rotate(-2.2deg);}
.masonry figure:nth-child(6n){transform:rotate(1.6deg);}
.masonry figure:hover{
  transform:rotate(0deg) scale(1.05);
  box-shadow:0 20px 34px -14px rgba(44,40,35,.5);
  z-index:5;
}

/* ===================== SOBRE MÍ ===================== */
.sobre{background:var(--sand); color:var(--ink);}
.sobre .eyebrow{color:var(--mist);}
.sobre__grid{display:grid; gap:var(--space-l); align-items:center;}
@media (min-width:880px){.sobre__grid{grid-template-columns:0.8fr 1.2fr; gap:var(--space-xl);}}
.sobre__photo{
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:4/5;
}
.sobre__photo img{width:100%;height:100%;object-fit:cover;}
.sobre h2{font-size:clamp(26px,4vw,38px);}
.sobre .lead{
  font-family:var(--font-display);
  font-style:italic;
  font-size:20px;
  margin-top:16px;
  color:var(--ink);
}
.sobre p{margin-top:16px; color:#3f3a32; font-size:16px; max-width:56ch;}
.sobre__quote{
  margin-top:22px;
  padding-left:18px;
  border-left:3px solid var(--terracotta);
  font-style:italic;
  color:var(--ink);
  font-size:15px;
}
.sobre__sig{margin-top:22px; font-family:var(--font-display); font-size:19px;}
.sobre__footer{margin-top:30px;}
.sobre .btn-ghost{border-color:var(--ink);}

/* ===================== PRUEBA SOCIAL ===================== */
.social{background:linear-gradient(180deg, rgba(121,134,137,.10), rgba(121,134,137,0) 60%), var(--cream); text-align:center;}
.social .container{max-width:760px;}
.social__mark{font-family:var(--font-display); font-size:64px; color:var(--terracotta); line-height:1; margin-bottom:6px;}
.social p{font-family:var(--font-display); font-size:clamp(20px,3vw,28px); font-style:italic; color:var(--ink);}

/* ===================== CTA FINAL ===================== */
.cta-final{
  background:var(--cream-deep);
  text-align:center;
}
.cta-final h2{font-size:clamp(28px,5vw,48px); max-width:14ch; margin:0 auto;}
.cta-final .btn{margin-top:30px;}

/* ===================== FOOTER ===================== */
footer{
  background:var(--ink);
  color:rgba(245,240,232,.75);
  padding:var(--space-l) 0 var(--space-m);
  text-align:center;
}
.footer__logo{height:30px; margin:0 auto 18px; filter:brightness(0) invert(1); opacity:.85;}
.footer__social{display:flex; justify-content:center; gap:22px; margin-bottom:22px; font-size:14px;}
.footer__social a{opacity:.85;}
.footer__social a:hover{opacity:1; color:var(--mist);}
footer .fine{font-size:12px; opacity:.55;}

/* =====================================================================
   PÁGINAS INTERNAS (blog, recursos, privacidad, gracias, pago, 404)
   Reutilizan los mismos tokens, botones y footer de la landing.
   Para cambiar colores o tipografías del sitio entero: edita :root arriba.
   ===================================================================== */

/* Barra superior simple de páginas internas */
.subnav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--space-s);
  background:rgba(245,240,232,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(44,40,35,.06);
}
.subnav .nav__logo img{height:30px;width:auto;}
.subnav .btn{padding:11px 20px;font-size:14px;}
@media (max-width:420px){ .subnav .btn{padding:10px 14px;font-size:13px;} }

/* Contenedor de lectura */
.page{padding:48px 0 var(--space-xl);}
.page .container{max-width:760px;}
.page--wide .container{max-width:1080px;}

.breadcrumb{font-size:13px;color:var(--ink-soft);margin-bottom:22px;}
.breadcrumb a{text-decoration:underline;text-underline-offset:3px;}
.breadcrumb span{margin:0 6px;opacity:.6;}

.page-head{margin-bottom:var(--space-l);}
.page-head h1{font-size:clamp(30px,5vw,46px);}
.page-head p{margin-top:14px;color:var(--ink-soft);font-size:17px;max-width:60ch;}
.page-meta{margin-top:14px;font-size:13px;color:var(--ink-soft);}

/* Texto largo (posts, recursos, privacidad) */
.prose{font-size:17px;}
.prose > * + *{margin-top:18px;}
.prose h2{font-size:clamp(23px,3.4vw,30px);margin-top:44px;}
.prose h3{font-size:20px;margin-top:30px;}
.prose p, .prose li{color:#3f3a32;}
.prose ul, .prose ol{padding-left:22px;}
.prose li + li{margin-top:8px;}
.prose a:not(.btn){color:var(--terracotta-deep);text-decoration:underline;text-underline-offset:3px;}
.prose strong{color:var(--ink);}
.prose figure{margin:32px 0;}
.prose figure img{border-radius:18px;width:100%;height:auto;}
.prose figcaption{font-size:13px;color:var(--ink-soft);margin-top:8px;}
.prose .answer{
  font-size:18px;
  background:var(--cream-deep);
  border-left:3px solid var(--terracotta);
  border-radius:0 14px 14px 0;
  padding:18px 22px;
}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin-top:22px;}
.prose th, .prose td{text-align:left;padding:12px 10px;border-bottom:1px solid rgba(44,40,35,.12);}
.prose th{font-weight:600;color:var(--ink);background:var(--cream-deep);}

/* Caja de llamado a la acción al final de posts y recursos */
.cta-box{
  margin-top:56px;
  background:var(--cream-deep);
  border-radius:24px;
  border-top:4px solid var(--terracotta);
  padding:36px 28px;
  text-align:center;
}
.cta-box h2{font-size:clamp(24px,3.6vw,32px);margin:0 auto;max-width:20ch;}
.cta-box p{margin:12px auto 0;color:var(--ink-soft);max-width:48ch;}
.cta-box .btn{margin-top:24px;}
.cta-box .cta-final__alt{margin-top:14px;}

/* Tarjetas (índice del blog y de recursos) */
.cards{display:grid;gap:24px;grid-template-columns:1fr;}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1040px){.cards--3{grid-template-columns:repeat(3,1fr);}}
.card{
  display:flex;flex-direction:column;
  background:var(--cream);
  border:1px solid rgba(44,40,35,.08);
  border-radius:20px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(44,40,35,.35);}
.card__img{aspect-ratio:3/2;overflow:hidden;background:var(--cream-deep);}
.card__img img{width:100%;height:100%;object-fit:cover;}
.card__body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1;}
.card__tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-deep);}
.card h2, .card h3{font-size:21px;}
.card p{font-size:15px;color:var(--ink-soft);}
.card__more{margin-top:auto;font-size:14px;font-weight:600;color:var(--terracotta-deep);}

/* Checklist imprimible (recursos) */
.checklist{list-style:none;padding:0 !important;}
.checklist li{
  position:relative;
  padding:12px 14px 12px 46px;
  background:var(--cream);
  border:1px solid rgba(44,40,35,.1);
  border-radius:12px;
}
.checklist li::before{
  content:"";
  position:absolute;left:14px;top:14px;
  width:18px;height:18px;
  border:2px solid var(--terracotta);
  border-radius:5px;
}
.print-btn{margin-top:8px;}

/* Páginas de agradecimiento / pago / 404 */
.thanks{min-height:72vh;display:flex;align-items:center;text-align:center;}
.thanks .container{max-width:640px;}
.thanks__icon{
  width:64px;height:64px;margin:0 auto 22px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(161,114,89,.12);
  color:var(--terracotta-deep);
  font-size:28px;
}
.thanks h1{font-size:clamp(30px,5vw,44px);}
.thanks p{margin-top:16px;color:var(--ink-soft);font-size:17px;}
.thanks .btn{margin-top:28px;}
.steps-mini{margin:28px auto 0;text-align:left;max-width:440px;display:flex;flex-direction:column;gap:10px;padding:0;list-style:none;}
.steps-mini li{background:var(--cream-deep);border-radius:12px;padding:12px 16px;font-size:15px;color:var(--ink);}
.steps-mini li strong{color:var(--terracotta-deep);margin-right:6px;}

/* Footer: enlaces secundarios (blog, recursos, privacidad) */
.footer__links{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin-bottom:18px;font-size:13px;}
.footer__links a{opacity:.7;text-decoration:underline;text-underline-offset:3px;}
.footer__links a:hover{opacity:1;}

/* Impresión (recursos descargables como PDF desde el navegador) */
@media print{
  .subnav, footer, .cta-box, .print-btn, .breadcrumb{display:none !important;}
  body{background:#fff;}
  .page{padding:0;}
  .checklist li{break-inside:avoid;}
}

/* Paletas de color (recurso de vestuario) */
.palettes{display:grid;gap:22px;grid-template-columns:1fr;margin-top:26px;}
@media (min-width:700px){.palettes{grid-template-columns:repeat(2,1fr);}}
.palette{background:var(--cream);border:1px solid rgba(44,40,35,.1);border-radius:18px;padding:20px;break-inside:avoid;}
.palette h3{font-size:19px;margin:0 0 4px !important;}
.palette p{font-size:14px;margin:0 0 14px !important;}
.swatches{display:flex;gap:8px;}
.swatch{flex:1;aspect-ratio:1;border-radius:12px;border:1px solid rgba(44,40,35,.12);display:flex;align-items:flex-end;justify-content:center;padding:6px;font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(44,40,35,.75);}