/* =========================================================
   Ro Spaces — Home Organization
   Hoja de estilos única. Mobile-first.
   Marca: crema #ECE9E5 · marino #1E2130 · burdeo #4D0C1D
   Sin degradados, sin sombras, sin esquinas redondeadas.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --crema:#ECE9E5;
  --crema-alt:#F4F2EF;
  --marino:#1E2130;
  --burdeo:#4D0C1D;
  --blanco:#FFFFFF;

  --texto:#1E2130;
  --texto-suave:rgba(30,33,48,.68);
  --linea:rgba(30,33,48,.16);
  --linea-fuerte:rgba(30,33,48,.35);
  --sobre-oscuro:rgba(236,233,229,.76);

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1240px;
  --gutter:22px;
  --sec-y:clamp(64px,10vw,132px);
  --t:.4s cubic-bezier(.2,.6,.2,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--crema);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0;font-weight:400;font-family:var(--serif);line-height:1.12;letter-spacing:-.012em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--marino);color:var(--crema)}

:focus-visible{outline:2px solid var(--burdeo);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--marino);color:var(--crema);
  padding:12px 20px;font-size:14px;
}
.skip-link:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* ---------- 3. Tipografía de sistema ---------- */
.h2{font-size:clamp(30px,5.4vw,52px);line-height:1.1}
.h3{font-size:clamp(23px,3.4vw,31px);line-height:1.18}
.h4{font-size:clamp(19px,2.4vw,22px);line-height:1.25}

.lead{font-size:clamp(18px,2.3vw,21px);line-height:1.6;color:var(--texto)}

.eyebrow{
  font-family:var(--sans);
  font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--burdeo);
  margin:0 0 20px;
}
.eyebrow--light{color:var(--sobre-oscuro)}

.section-num{
  font-family:var(--sans);
  font-size:11px;font-weight:500;
  letter-spacing:.22em;
  color:var(--burdeo);
  margin:0 0 16px;
}

.firma{
  margin-top:28px;
  font-family:var(--sans);
  font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-suave);
}

/* ---------- 4. Logo ----------
   Archivos en img/. El texto viene convertido a curvas, así que no depende
   de que Playfair Display ni Inter estén disponibles.
     logo-wordmark.svg         marino, para fondo crema
     logo-wordmark-crema.svg   crema, para fondo marino o burdeo
     logo-monograma.svg        solo "RS", lienzo cuadrado
   El ancho manda; la altura se calcula sola. */
.logo{height:auto}
.logo--header{width:132px}
.logo--footer{width:186px}

@media (min-width:1000px){
  .logo--header{width:168px}
  .logo--footer{width:210px}
}

/* ---------- 5. Botones y enlaces de acción ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:15px 30px;
  background:var(--marino);color:var(--crema);
  font-family:var(--sans);font-size:12.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.2;
  border:1px solid var(--marino);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.btn:hover,.btn:focus-visible{background:var(--burdeo);border-color:var(--burdeo);color:var(--crema)}

.btn--sm{min-height:44px;padding:11px 22px;font-size:11px;letter-spacing:.14em}

.btn--ghost{background:transparent;color:var(--marino)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--marino);color:var(--crema);border-color:var(--marino)}

.btn--light{background:var(--crema);color:var(--marino);border-color:var(--crema)}
.btn--light:hover,.btn--light:focus-visible{background:var(--burdeo);border-color:var(--burdeo);color:var(--crema)}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;
  font-size:12.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--marino);
  border-bottom:1px solid var(--linea-fuerte);
  transition:color var(--t),border-color var(--t);
}
.link-arrow::after{content:"\2192";font-size:15px;transition:transform var(--t)}
.link-arrow:hover{color:var(--burdeo);border-color:var(--burdeo)}
.link-arrow:hover::after{transform:translateX(5px)}

.section-cta{margin:clamp(40px,6vw,64px) 0 0;text-align:center}

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--crema);
  border-bottom:1px solid transparent;
  transition:border-color var(--t),background var(--t);
}
.site-header.is-stuck{border-bottom-color:var(--linea)}

.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:76px;
}
.brand{display:inline-block;padding:6px 0}

/* Selector de idioma. Queda siempre visible, nunca escondido tras el menú:
   quien llega en el idioma equivocado debe poder cambiarlo de inmediato. */
.header__end{display:flex;align-items:center;gap:14px}

.lang{
  display:flex;align-items:center;gap:9px;
  font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
}
.lang li{display:flex}
.lang a{
  display:flex;align-items:center;
  min-height:44px;padding:0 2px;
  color:var(--texto-suave);
  transition:color var(--t);
}
.lang a:hover{color:var(--burdeo)}
.lang a[aria-current="page"]{color:var(--marino)}
.lang__sep{color:var(--linea-fuerte)}

.nav{
  position:fixed;inset:76px 0 0 0;
  display:none;flex-direction:column;
  padding:12px var(--gutter) 40px;
  background:var(--crema);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.nav.is-open{display:flex}

.nav__list{display:flex;flex-direction:column}
.nav__list a{
  display:block;padding:15px 0;
  font-family:var(--serif);font-size:24px;
  border-bottom:1px solid var(--linea);
  transition:color var(--t)}
.nav__list a:hover{color:var(--burdeo)}
.nav__cta{margin-top:24px;align-self:flex-start}

.nav-toggle{
  width:46px;height:46px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;
  margin-right:-8px;
}
.nav-toggle__bar{
  display:block;width:26px;height:1px;background:var(--marino);
  transition:transform var(--t),opacity var(--t),width var(--t);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- 7. Hero ---------- */
.hero{padding:clamp(36px,7vw,64px) 0 clamp(48px,8vw,80px)}
.hero__inner{display:grid;gap:clamp(34px,6vw,60px)}

.hero__title{
  font-size:clamp(46px,13.5vw,104px);
  line-height:.98;letter-spacing:-.028em;
  margin:0 0 26px;
}
.hero__title em{font-style:italic;color:var(--burdeo)}

.hero__lead{
  font-size:clamp(17px,2.1vw,20px);line-height:1.65;
  color:var(--texto-suave);
  max-width:44ch;margin:0 0 34px;
}

.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}

.hero__media{overflow:hidden}
.hero__media img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ---------- 8. Secciones ---------- */
/* Compensa el header fijo cuando se llega a una sección por su ancla. */
section[id]{scroll-margin-top:88px}

.section{padding:var(--sec-y) 0;border-top:1px solid var(--linea)}
.section--intro{border-top:0}
.section--valores{background:var(--crema-alt)}

.section-head{margin:0 0 clamp(38px,5.5vw,64px);max-width:52ch}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section-head__lead{margin:18px 0 0;color:var(--texto-suave);font-size:clamp(16px,2vw,18px)}

/* Intro */
.intro__grid{display:grid;gap:0}
.intro__body{max-width:60ch}
.intro__body .h2{margin-bottom:26px}
.intro__body p:not(.lead){color:var(--texto-suave)}
.intro__body .lead{margin-bottom:1em}

/* ---------- 9. Servicios ---------- */
.servicios{display:grid;gap:clamp(46px,7vw,64px)}
.servicio__media{overflow:hidden;margin-bottom:26px}
.servicio__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.servicio:hover .servicio__media img{transform:scale(1.035)}
.servicio__body p{color:var(--texto-suave);margin-top:16px;max-width:52ch}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tags li{
  padding:7px 14px;
  border:1px solid var(--linea);
  font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-suave);
  line-height:1.4;
}

/* ---------- 10. Método ---------- */
.metodo{display:grid;gap:clamp(40px,6vw,66px)}
.metodo__media{overflow:hidden}
.metodo__media img{width:100%;aspect-ratio:4/5;object-fit:cover}

.pasos{display:grid;gap:0}
.paso{
  display:grid;grid-template-columns:auto 1fr;
  gap:20px;
  padding:28px 0;
  border-bottom:1px solid var(--linea);
}
.paso:first-child{padding-top:0}
.paso:last-child{border-bottom:0;padding-bottom:0}
.paso__num{
  font-family:var(--serif);
  font-size:15px;letter-spacing:.08em;
  color:var(--burdeo);
  padding-top:4px;min-width:26px;
}
.paso__body p{margin-top:10px;color:var(--texto-suave)}

/* ---------- 11. Diferenciadores ---------- */
.valores{display:grid;gap:0;border-top:1px solid var(--linea)}
.valor{padding:30px 0;border-bottom:1px solid var(--linea)}
.valor p{margin-top:12px;color:var(--texto-suave);max-width:48ch}

/* ---------- 12. Galería de proyectos ---------- */
.galeria{display:grid;gap:14px}
.galeria__item{margin:0;overflow:hidden;background:var(--crema-alt)}
.galeria__item img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.galeria__item:hover img{transform:scale(1.035)}

/* Bloque de marca cuando la foto real todavía no existe */
.galeria__item.is-empty{
  border:1px solid var(--linea);
  aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;
}
.galeria__item.is-empty img{display:none}
.galeria__ph{display:block}
.galeria__ph strong{
  display:block;
  font-family:var(--serif);font-size:20px;font-weight:400;
  color:var(--marino);
}
.galeria__ph span{
  display:block;margin-top:10px;
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-suave);line-height:1.7;
}

/* ---------- 13. Sobre mí ---------- */
.sobre{display:grid;gap:clamp(34px,5vw,60px)}
.sobre__media{overflow:hidden}
.sobre__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sobre__body p:not(.lead):not(.firma){color:var(--texto-suave)}
.sobre__body .h2{margin-bottom:22px}
.sobre__body .lead{margin-bottom:1em}

/* ---------- 14. Testimonios (activos al descomentar el bloque HTML) ---------- */
.testimonios{display:grid;gap:clamp(30px,4vw,44px)}
.testimonio{margin:0;padding:32px;border:1px solid var(--linea);background:var(--crema-alt)}
.testimonio p{font-family:var(--serif);font-size:clamp(19px,2.4vw,23px);line-height:1.5;font-style:italic}
.testimonio cite{
  display:block;margin-top:22px;font-style:normal;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--burdeo);
}

/* ---------- 15. FAQ ---------- */
.faq{border-top:1px solid var(--linea);max-width:900px}
.faq__item{border-bottom:1px solid var(--linea)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:64px;padding:18px 0;
  cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(19px,2.5vw,23px);line-height:1.3;
  transition:color var(--t);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--burdeo)}

.faq__icon{position:relative;flex:0 0 14px;width:14px;height:14px}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;left:0;top:6.5px;
  width:14px;height:1px;background:var(--burdeo);
  transition:transform var(--t);
}
.faq__icon::after{transform:rotate(90deg)}
.faq__item[open] .faq__icon::after{transform:rotate(0)}

.faq__body{padding:0 0 26px;max-width:62ch}
.faq__body p{color:var(--texto-suave)}

/* ---------- 16. CTA final ---------- */
.cta{position:relative;isolation:isolate;padding:clamp(76px,12vw,132px) 0;background:var(--marino);overflow:hidden}
.cta__media{position:absolute;inset:0;z-index:-2}
.cta__media img{width:100%;height:100%;object-fit:cover;opacity:.18}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--marino);opacity:.72}

.cta__inner{position:relative;text-align:center;color:var(--crema)}
.cta__title{font-size:clamp(32px,6.4vw,60px);line-height:1.08;margin:0 0 24px;color:var(--crema)}
.cta__lead{max-width:46ch;margin:0 auto 38px;color:var(--sobre-oscuro);font-size:clamp(16px,2vw,19px)}
.cta__foot{
  margin:26px 0 0;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sobre-oscuro);
}

/* ---------- 17. Footer ---------- */
/* El relleno inferior deja sitio al botón flotante de WhatsApp, que solo existe en mobile. */
.site-footer{background:var(--marino);color:var(--crema);padding:clamp(52px,8vw,84px) 0 104px}
.footer__grid{display:grid;gap:44px}
.footer__tag{margin:22px 0 0;color:var(--sobre-oscuro);font-size:15px;max-width:34ch}

.footer__title{
  font-family:var(--sans);
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sobre-oscuro);
  margin:0 0 18px;
}
.footer__col ul{display:grid;gap:2px}
.footer__col li a,.footer__col li span{
  display:inline-block;padding:10px 0;font-size:15px;color:var(--crema);
  transition:color var(--t);
}
.footer__col li span{color:var(--sobre-oscuro)}
.footer__col li a:hover{color:var(--sobre-oscuro)}

.footer__legal{
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  margin-top:clamp(44px,6vw,70px);padding-top:26px;
  border-top:1px solid rgba(236,233,229,.18);
}
.footer__legal p{margin:0;font-size:12.5px;color:var(--sobre-oscuro)}

/* ---------- 18. Botón flotante de WhatsApp (solo mobile) ---------- */
.wa-float{
  position:fixed;left:var(--gutter);right:var(--gutter);bottom:16px;z-index:90;
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:14px 22px;
  background:var(--marino);color:var(--crema);
  border:1px solid var(--marino);
  font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transform:translateY(140%);
  transition:transform var(--t),background var(--t),border-color var(--t);
}
.wa-float.is-visible{transform:translateY(0)}
.wa-float:hover,.wa-float:focus-visible{background:var(--burdeo);border-color:var(--burdeo)}
.wa-float svg{flex:0 0 22px}

/* Modo correo: mientras no haya número de WhatsApp en CONFIG, el JavaScript
   marca el documento y los botones pasan a escribir un correo. Al cargar el
   número vuelve todo solo, sin tocar el HTML. */
.ico--mail{display:none}
:root.is-email .ico--wa{display:none}
:root.is-email .ico--mail{display:inline-block}
:root.is-email .footer__wa{display:none}

/* ---------- 19. Aparición al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .wa-float{transition:none}
  .servicio:hover .servicio__media img,
  .galeria__item:hover img{transform:none}
}

/* =========================================================
   20. Tablet — 720px
   ========================================================= */
@media (min-width:720px){
  :root{--gutter:34px}

  /* Tres fotos verticales, una al lado de la otra. */
  .galeria{grid-template-columns:repeat(3,1fr);gap:18px}
  .galeria__item.is-empty{aspect-ratio:3/4}

  /* Son tres diferenciadores: en dos columnas el tercero quedaria solo en su
     fila. Se apilan hasta que hay ancho para las tres juntas. */
  .valor{padding:32px 0}

  .testimonios{grid-template-columns:repeat(2,1fr)}

  .footer__grid{grid-template-columns:1.4fr 1fr 1fr;gap:48px}

  .hero__media img{aspect-ratio:16/11}
  .servicios{grid-template-columns:repeat(2,1fr);gap:44px}
  .servicio__media img{aspect-ratio:4/5}
}

/* =========================================================
   21. Desktop — 1000px
   ========================================================= */
@media (min-width:1000px){
  :root{--gutter:48px}
  body{font-size:17px}

  /* Navegación horizontal */
  .nav{
    position:static;display:flex;flex-direction:row;align-items:center;gap:44px;
    padding:0;background:none;border:0;max-height:none;overflow:visible;
  }
  .nav__list{flex-direction:row;gap:38px}
  .nav__list a{
    padding:0;font-family:var(--sans);font-size:13px;font-weight:500;
    letter-spacing:.13em;text-transform:uppercase;border:0;
    position:relative;
  }
  .nav__list a::after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
    background:var(--burdeo);transform:scaleX(0);transform-origin:left;
    transition:transform var(--t);
  }
  .nav__list a:hover::after{transform:scaleX(1)}
  .nav__cta{margin:0}
  .nav-toggle{display:none}
  .header__inner{min-height:96px}

  /* Hero a dos columnas */
  .hero{padding:clamp(48px,5vw,76px) 0 clamp(72px,8vw,110px)}
  .hero__inner{grid-template-columns:1.02fr .98fr;align-items:center;gap:70px}
  .hero__media img{aspect-ratio:4/5}

  /* Intro con numeral en columna lateral */
  .intro__grid{grid-template-columns:120px 1fr;gap:0}
  .intro__grid .section-num{margin-top:10px}

  /* Método a dos columnas */
  .metodo{grid-template-columns:.85fr 1.15fr;align-items:start;gap:80px}
  .paso{grid-template-columns:44px 1fr;gap:26px;padding:34px 0}

  /* Sobre mí a dos columnas */
  .sobre{grid-template-columns:.9fr 1.1fr;align-items:center;gap:76px}

  /* Diferenciadores en tres columnas con separadores verticales */
  .valores{grid-template-columns:repeat(3,1fr);column-gap:0;border-top:1px solid var(--linea)}
  .valor{padding:38px 30px;border-bottom:0;border-right:1px solid var(--linea)}
  .valor:first-child{padding-left:0}
  .valor:last-child{border-right:0;padding-right:0}

  .galeria{gap:20px}

  .servicios{gap:60px}

  /* El botón flotante es solo un recurso de mobile */
  .wa-float{display:none}
  .site-footer{padding-bottom:34px}
}

/* =========================================================
   22. Desktop amplio — 1320px
   ========================================================= */
@media (min-width:1320px){
  :root{--gutter:60px}
  .hero__inner{gap:90px}
}