/* Karin Anuch — paleta y tipografías de marca */
:root{
  --fondo:#F7F5F2; --tarjeta:#EAE4DD; --texto:#2F2F2F;
  --linea:#CFCAC5; --cta:#C48A6A; --cta-oscuro:#A9714F;
  --ancho:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--fondo); color:var(--texto);
  font-family:'Jost',-apple-system,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif; font-weight:600; line-height:1.15}
h1{font-size:clamp(2rem,5vw,3.1rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.3rem); margin-bottom:.6em}
h3{font-size:1.25rem; margin:2rem 0 .5rem}
a{color:var(--cta-oscuro)}
.envoltorio{max-width:var(--ancho); margin:0 auto; padding:0 24px}

/* cabecera */
header.sitio{border-bottom:1px solid var(--linea); background:var(--fondo);
  position:sticky; top:0; z-index:20}
header.sitio .envoltorio{display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-top:18px; padding-bottom:18px; flex-wrap:wrap}
.marca{font-family:'Playfair Display',serif; font-size:1.35rem; text-decoration:none; color:var(--texto)}
.marca span{display:block; font-family:'Jost',sans-serif; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cta-oscuro); margin-top:2px}
nav a{margin-left:22px; text-decoration:none; color:var(--texto); font-size:.95rem}
nav a:hover{color:var(--cta-oscuro)}

/* botones */
.boton{display:inline-block; background:var(--cta); color:#fff!important; text-decoration:none;
  padding:14px 30px; border-radius:4px; font-weight:600; font-size:1rem; border:0; cursor:pointer}
.boton:hover{background:var(--cta-oscuro)}
.boton.linea{background:transparent; color:var(--cta-oscuro)!important;
  border:1.5px solid var(--cta)}
.boton.linea:hover{background:var(--tarjeta)}

/* portada */
.hero{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  padding:64px 0}
.hero img{width:100%; border-radius:6px; display:block}
.hero p.bajada{font-size:1.1rem; margin:18px 0 28px}

/* destacado */
.destacado{background:var(--tarjeta); padding:60px 0; margin:0}
.destacado .caja{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center}
.destacado img{width:100%; border-radius:6px; display:block}
.etiqueta{display:inline-block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cta-oscuro); font-weight:600; margin-bottom:10px}
.precio{font-family:'Playfair Display',serif; font-size:1.9rem; margin:14px 0 22px}

/* tarjetas de servicios */
.rejilla{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:14px 0 10px}
.tarjeta{background:#fff; border:1px solid var(--linea); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column}
.tarjeta img{width:100%; height:180px; object-fit:cover; display:block}
.tarjeta .cuerpo{padding:22px; display:flex; flex-direction:column; flex:1}
.tarjeta h3{margin:0 0 8px; font-size:1.15rem}
.tarjeta p{font-size:.95rem; flex:1}
.tarjeta .precio{font-size:1.25rem; margin:14px 0 16px}

/* secciones */
section{padding:62px 0}
section.claro{background:#fff; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
.sobre{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start}
.sobre img{width:100%; border-radius:6px}

/* ficha de servicio */
.ficha{display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:52px 0; align-items:start}
.ficha img{width:100%; border-radius:6px; position:sticky; top:110px}
.contenido h3{font-family:'Playfair Display',serif; color:var(--texto)}
.contenido ul{margin:.4rem 0 1.2rem 1.1rem}
.contenido li{margin-bottom:.45rem}
.contenido p{margin-bottom:1rem}

/* caja de compra */
.compra{background:var(--tarjeta); border-left:4px solid var(--cta);
  padding:26px; border-radius:4px; margin:28px 0}
.compra .precio{margin:0 0 6px}
.compra .nota{font-size:.9rem; color:#6b6b6b; margin-top:12px}
.pendiente{display:none}   /* el aviso de 'pendiente' ya no se muestra */
.segundo{display:inline-block; margin-top:12px; font-size:.95rem;
  color:var(--texto); opacity:.72; text-decoration:underline}
.segundo:hover{opacity:1; color:var(--cta-oscuro)}

/* pie */
footer.sitio{background:var(--texto); color:#e8e4df; padding:46px 0; margin-top:0}
footer.sitio a{color:#e8e4df}
footer.sitio .envoltorio{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap}
footer.sitio .chico{font-size:.88rem; opacity:.75}

@media (max-width:860px){
  .hero,.destacado .caja,.sobre,.ficha{grid-template-columns:1fr; gap:28px}
  .rejilla{grid-template-columns:1fr}
  .ficha img{position:static}
  nav{width:100%} nav a{margin:0 18px 0 0}
}

/* testimonios */
.testimonios{background:var(--tarjeta); padding:62px 0}
.testimonios h2{text-align:center; margin-bottom:8px}
.testimonios .intro{text-align:center; margin-bottom:34px; color:#5f5a55}
.resenas{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px}
.resena{background:#fff; border:1px solid var(--linea); border-radius:6px; padding:28px}
.resena blockquote{font-family:'Playfair Display',Georgia,serif; font-size:1.15rem;
  line-height:1.5; margin:0 0 18px; color:var(--texto)}
.resena blockquote::before{content:"\201C"; color:var(--cta); font-size:2.6rem;
  line-height:0; vertical-align:-.35em; margin-right:4px}
.resena .quien{font-size:.92rem; color:#6b6b6b; border-top:1px solid var(--linea);
  padding-top:14px}
.resena .quien strong{color:var(--texto); display:block; font-size:1rem}