/*
Theme Name: Nyssen Renders
Theme URI: https://renders.shmuelnyssen.com
Author: Arq. Shmuel Nyssen
Description: Molde michimiau trasladado a la marca Shmuel Nyssen (paleta MOCA). Tema propio,
  sin page builder, sin dependencias externas: cero peticiones a Google Fonts o CDNs.
  Estructura heredada del unico sitio propio que ha convertido: nav con CTA fijo, hero con
  credencial + dato duro, problema cuantificado, metodo, alcance, garantia, confianza en
  primera persona (NO testimonios de clientes), FAQ y cierre. El cierre es por WhatsApp:
  sin carrito, sin checkout.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
License: Propietario
Text Domain: nyssen-renders
*/

/* ============ TOKENS — paleta MOCA canonica del frente (W1/W2/W3) ============ */
:root{
  --crema:#F5F1E8; --card:#FFFDF8; --greige:#DAD5C2; --greige-2:#E9E4D6;
  --moca:#997A5C; --moca-osc:#6C5138; --marron:#4A3A28; --tinta:#2A2118;
  --linea:#E2DACA; --ok:#5E7A5E; --texto-2:#57493A; --wa:#25D366;
  --sans:"Century Gothic","CenturyGothic","Futura","Avenir Next","Trebuchet MS","Segoe UI",Arial,sans-serif;
  /* Contraste tipografico propio de esta celula (diversidad, coste cero: fuentes del sistema) */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sombra:0 18px 48px -18px rgba(108,81,56,.30);
  --sombra-s:0 6px 20px -8px rgba(42,33,24,.16);
  --barra:66px; --ancho:1120px; --angosto:720px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--moca-osc)}
.container{max-width:var(--ancho); margin:0 auto; padding:0 22px}
.narrow{max-width:var(--angosto); margin:0 auto; padding:0 22px}

/* ============ NAV — CTA de WhatsApp SIEMPRE visible ============ */
.nav{
  position:sticky; top:0; z-index:50; height:var(--barra);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 22px;
  background:rgba(245,241,232,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.nav__brand{
  font-family:var(--serif); font-size:1.16rem; letter-spacing:.01em;
  color:var(--tinta); text-decoration:none; font-weight:600;
}
.nav__brand span{color:var(--moca)}
.nav__links{display:flex; align-items:center; gap:22px}
.nav__links a{color:var(--texto-2); text-decoration:none; font-size:.92rem}
.nav__links a:hover{color:var(--moca-osc)}
@media(max-width:860px){.nav__links{display:none}}
.nav__cta{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--moca); color:#fff; text-decoration:none;
  padding:10px 18px; border-radius:999px; font-size:.92rem; font-weight:600;
  box-shadow:var(--sombra-s); transition:background .2s,transform .2s;
}
.nav__cta:hover{background:var(--moca-osc); transform:translateY(-1px)}

/* ============ BOTONES ============ */
.btn-primary,.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:1rem; transition:all .2s; border:1.5px solid transparent;
}
.btn-primary{background:var(--moca); color:#fff; box-shadow:var(--sombra-s)}
.btn-primary:hover{background:var(--moca-osc); transform:translateY(-2px)}
.btn-secondary{background:transparent; color:var(--marron); border-color:var(--greige)}
.btn-secondary:hover{border-color:var(--moca); color:var(--moca-osc)}
.btn-wa{background:var(--wa); color:#fff}
.btn-wa:hover{background:#1da851}

/* ============ TIPOGRAFIA DE SECCION ============ */
.section__eyebrow{
  display:block; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--moca); font-weight:600; margin-bottom:12px;
}
.section__title{
  font-family:var(--serif); font-weight:600; line-height:1.16;
  font-size:clamp(1.75rem,3.6vw,2.6rem); margin:0 0 16px; color:var(--tinta);
}
.section__lead{font-size:1.08rem; color:var(--texto-2); max-width:62ch; margin:0 0 34px}
section{padding:76px 0}
.acento{color:var(--moca); font-style:italic}

/* ============ HERO ============ */
.hero{padding:64px 0 72px; background:
  radial-gradient(1100px 420px at 78% -8%, #FFFDF8 0%, rgba(255,253,248,0) 62%), var(--crema)}
.hero__grid{display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center}
@media(max-width:920px){.hero__grid{grid-template-columns:1fr; gap:34px}}
.hero__eyebrow{
  display:inline-block; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--moca-osc); background:var(--greige-2); border:1px solid var(--linea);
  padding:7px 15px; border-radius:999px; font-weight:600; margin-bottom:20px;
}
.hero h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(2.1rem,5.4vw,3.5rem); line-height:1.08; margin:0 0 20px; color:var(--tinta);
}
.hero__lead{font-size:1.14rem; color:var(--texto-2); max-width:56ch; margin:0 0 30px}
.hero__lead strong{color:var(--marron)}
.hero__cta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.hero__nota{margin:18px 0 0; font-size:.9rem; color:var(--texto-2)}
.hero__visual{position:relative}
.hero__visual img{
  border-radius:26px; box-shadow:var(--sombra); border:1px solid var(--linea);
  background:var(--card);
}
.hero__pie{
  margin:14px 2px 0; font-size:.82rem; color:var(--texto-2); line-height:1.5;
}
/* Par render -> construido: la prueba se lee de un vistazo, sin leyenda que la explique */
.par{display:grid; gap:12px}
.par figure{margin:0; position:relative}
.par figcaption{
  position:absolute; left:12px; bottom:12px;
  background:rgba(42,33,24,.82); color:#F3EDE3; font-size:.76rem;
  padding:6px 12px; border-radius:999px; letter-spacing:.02em;
}
.par img{border-radius:20px}

/* ============ PROBLEMA — el dolor con cifras propias ============ */
.problem{background:var(--card); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
.cita{
  font-family:var(--serif); font-size:clamp(1.24rem,2.5vw,1.62rem); line-height:1.5;
  color:var(--marron); border-left:3px solid var(--moca);
  padding:6px 0 6px 26px; margin:0 0 44px; font-style:italic;
}
.cita__autor{
  display:block; margin-top:16px; font-family:var(--sans); font-style:normal;
  font-size:.88rem; color:var(--texto-2); letter-spacing:.02em;
}
.cifras{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:800px){.cifras{grid-template-columns:1fr}}
.cifra{
  background:var(--crema); border:1px solid var(--linea); border-radius:20px; padding:28px 24px;
}
.cifra__num{
  display:block; font-family:var(--serif); font-size:2.6rem; line-height:1;
  color:var(--moca); font-weight:600; margin-bottom:10px;
}
.cifra__t{font-weight:600; margin:0 0 6px; color:var(--marron)}
.cifra p{margin:0; font-size:.95rem; color:var(--texto-2)}
.cifra__fuente{display:block; margin-top:12px; font-size:.78rem; color:#8A7A66}

/* ============ METODO — pasos numerados ============ */
.pasos{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:p}
@media(max-width:900px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.pasos{grid-template-columns:1fr}}
.paso{
  background:var(--card); border:1px solid var(--linea); border-radius:20px;
  padding:26px 22px; position:relative;
}
.paso::before{
  counter-increment:p; content:counter(p);
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--moca); color:#fff; font-weight:700; font-size:1rem; margin-bottom:16px;
}
.paso h3{margin:0 0 8px; font-size:1.05rem; color:var(--marron)}
.paso p{margin:0; font-size:.95rem; color:var(--texto-2)}
.paso--destacado{border-color:var(--moca); box-shadow:var(--sombra-s)}

/* ============ ALCANCE (sustituye a la rejilla de precios en esta celula) ============ */
.alcance{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:900px){.alcance{grid-template-columns:1fr}}
.serv{
  background:var(--card); border:1px solid var(--linea); border-radius:22px;
  padding:30px 26px; display:flex; flex-direction:column;
}
.serv--destacado{border-color:var(--moca); box-shadow:var(--sombra)}
.serv__badge{
  align-self:flex-start; background:var(--moca); color:#fff; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.serv h3{font-family:var(--serif); font-size:1.3rem; margin:0 0 10px; color:var(--tinta)}
.serv__para{font-size:.92rem; color:var(--moca-osc); font-weight:600; margin:0 0 14px}
.serv ul{list-style:none; margin:0 0 24px; padding:0}
.serv li{
  position:relative; padding-left:24px; margin-bottom:9px; font-size:.96rem; color:var(--texto-2);
}
.serv li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  border-radius:50%; background:var(--moca); opacity:.55;
}
.serv .btn-primary{margin-top:auto}

/* ============ GARANTIA — el diferenciador ============ */
.garantia{background:var(--marron); color:#F3EDE3}
.garantia .section__title{color:#fff}
.garantia .section__eyebrow{color:#D9C9B2}
.garantia__caja{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:22px; padding:34px 30px; max-width:76ch;
}
.garantia__caja p{margin:0 0 14px; font-size:1.06rem; line-height:1.62; color:#EFE7DA}
.garantia__caja p:last-child{margin-bottom:0}
.garantia__caja strong{color:#fff}

/* ============ CONFIANZA — primera persona, NO testimonios de clientes ============ */
.trust__grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:44px}
@media(max-width:860px){.trust__grid{grid-template-columns:1fr}}
.trust-card{
  background:var(--card); border:1px solid var(--linea); border-radius:22px; padding:30px 28px;
}
.trust-card__quote{
  font-family:var(--serif); font-size:1.08rem; line-height:1.6; color:var(--marron);
  font-style:italic; margin:0 0 22px;
}
.trust-card__author{display:flex; align-items:center; gap:14px; font-size:.92rem; color:var(--texto-2)}
.trust-card__avatar{
  width:52px; height:52px; border-radius:50%; flex:0 0 52px;
  background:var(--moca); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.03em; object-fit:cover;
}
.trust__metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center}
@media(max-width:760px){.trust__metrics{grid-template-columns:repeat(2,1fr)}}
.metric{background:var(--greige-2); border-radius:18px; padding:22px 14px}
.metric strong{
  display:block; font-family:var(--serif); font-size:2rem; color:var(--moca-osc); line-height:1;
}
.metric span{display:block; margin-top:8px; font-size:.85rem; color:var(--texto-2)}

/* ============ FAQ ============ */
.faq{background:var(--card); border-top:1px solid var(--linea)}
.faq details{
  border:1px solid var(--linea); border-radius:16px; background:var(--crema);
  padding:0; margin-bottom:12px; overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 24px; font-weight:600; color:var(--marron);
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--moca); font-size:1.4rem; line-height:1; flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0; padding:0 24px 22px; color:var(--texto-2); font-size:.99rem}

/* ============ CIERRE ============ */
.cta-final{background:var(--greige-2); text-align:center}
.cta-final .section__title{margin-bottom:14px}
.cta-final p{max-width:58ch; margin:0 auto 30px; color:var(--texto-2); font-size:1.06rem}

/* ============ PIE ============ */
.pie{background:var(--tinta); color:#C9BCA9; padding:52px 0 34px; font-size:.92rem}
.pie a{color:#E4D8C5; text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:32px}
@media(max-width:820px){.pie__grid{grid-template-columns:1fr; gap:24px}}
.pie h4{color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px}
.pie p{margin:0 0 8px}
.pie__marca{font-family:var(--serif); font-size:1.2rem; color:#fff; margin-bottom:10px}
.pie__legal{
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  font-size:.82rem; color:#9E9080; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
}

/* ============ CONTENIDO EDITABLE (paginas normales) ============ */
.pagina{padding:56px 0 72px}
.pagina h1{font-family:var(--serif); font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.14; margin:0 0 22px}
.pagina h2{font-family:var(--serif); font-size:1.5rem; margin:38px 0 14px; color:var(--marron)}
.pagina h3{font-size:1.12rem; margin:26px 0 10px; color:var(--marron)}
.pagina p{margin:0 0 16px; color:var(--texto-2)}
.pagina ul,.pagina ol{color:var(--texto-2)}
.pagina table{border-collapse:collapse; width:100%; margin:22px 0; background:var(--card)}
.pagina th,.pagina td{border:1px solid var(--linea); padding:12px 14px; text-align:left; font-size:.96rem}
.pagina th{background:var(--greige-2); color:var(--marron); font-weight:600}
.tabla-envoltorio{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ============ ACCESIBILIDAD ============ */
.saltar{
  position:absolute; left:-9999px; top:0; background:var(--moca); color:#fff;
  padding:12px 18px; border-radius:0 0 10px 0; z-index:100;
}
.saltar:focus{left:0}
:focus-visible{outline:3px solid var(--moca); outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}