/* ============================================================
   KATTURA — hoja de estilos común
   Paleta tomada del brand kit y de los logos de marca.
   ============================================================ */
:root{
  /* ---- PALETA KATTURA (actualizada por Bego) ---- */
  --perla:#D8D5D1;  --hueso:#FFFFFF;  --taupe:#9E9A90;  --arena:#ADA592;
  --cafe:#6C685F;   --calido:#878379; --salvia:#8A8A80; --rosa:#BFA7A0;
  --niebla:#E5E0D9; --beige:#EBE7E1;  --oliva:#9F9986;  --acero:#708089;

  --estudio:var(--taupe);
  --home:var(--cafe);
  --albums:var(--acero);
  --editorial:var(--acero);

  --gris:var(--calido); --humo:var(--niebla);
  --tinta:#3E3934; --suave:var(--cafe); --linea:var(--perla);

  /* ---- TIPOGRAFÍA ----------------------------------------------------
     Proxima Nova y Sackers Gothic son de licencia (Adobe Fonts).
     Mientras no esté el kit de Adobe cargado, entran los sustitutos
     libres de Google Fonts: Montserrat y Julius Sans One.
     Allura sí es libre y se carga de Google Fonts.
     -------------------------------------------------------------------- */
  --body:"proxima-nova","Proxima Nova","Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --gothic:"sackers-gothic-std","Sackers Gothic","Julius Sans One","Montserrat",sans-serif;
  --script:"Allura",cursive;
  --serif:var(--body);   /* compatibilidad con reglas antiguas */
  --sans:var(--body);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Reset de <button>: sin este reset, Safari a veces pinta su propio
   botón nativo (appearance) por encima o por debajo del estilo custom
   de .cat-pill/.season-seg/.pg-flecha/etc. y se ve sin estilo. Cada
   componente de botón define su propio look encima de esta base limpia. */
button{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:inherit}
html{scroll-behavior:smooth}
body{background:var(--hueso);color:var(--tinta);font-family:var(--body);font-weight:400;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--body);font-weight:600;line-height:1.2}
h2{text-transform:uppercase;letter-spacing:.04em}
h3{font-size:19px;text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.script{font-family:var(--script);text-transform:none;letter-spacing:0;
  font-weight:400;font-size:1.42em;line-height:1}
h2{font-size:clamp(26px,3.6vw,42px);margin-bottom:16px}

.eyebrow{font-family:var(--gothic);font-size:13.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--tinta);margin-bottom:18px;opacity:.85}
.lead{max-width:620px;color:var(--suave)}
section{padding:clamp(64px,9vw,120px) 0}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(243,240,234,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
nav .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
nav .brand img{width:132px}
nav .brand .tag{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--suave);padding-left:14px;border-left:1px solid var(--linea)}
.navlinks{display:flex;gap:28px;list-style:none;font-family:var(--gothic);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.navlinks a{text-decoration:none;color:var(--suave);transition:color .2s}
.navlinks a:hover{color:var(--tinta)}
@media(max-width:900px){.navlinks{display:none} nav .brand .tag{display:none}}

/* ---------- BOTONES ---------- */
.btn{display:inline-block;font-family:var(--gothic);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;padding:15px 32px;text-decoration:none;border:1px solid var(--tinta);
  background:var(--tinta);color:#fff;transition:.25s;cursor:pointer}
.btn:hover{background:transparent;color:var(--tinta)}
.btn.ghost{background:transparent;color:var(--tinta)}
.btn.ghost:hover{background:var(--tinta);color:#fff}
.btn.light{border-color:var(--hueso);background:var(--hueso);color:var(--tinta)}
.btn.light:hover{background:transparent;color:#fff}
.btn.outline-light{border-color:#fff;background:transparent;color:#fff}
.btn.outline-light:hover{background:#fff;color:var(--tinta)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;
  text-align:center;background-size:cover;background-position:center;background-color:var(--beige)}
.hero::after{content:"";position:absolute;inset:0;background:rgba(30,26,22,.36)}
.hero .inner{position:relative;z-index:2;color:#fff;padding:70px 26px;max-width:780px}
.hero .logo{width:min(340px,66vw);margin:0 auto 22px}
.hero .sub{font-family:var(--gothic);font-size:10.5px;letter-spacing:.5em;text-transform:uppercase;margin-bottom:28px;opacity:.9}
.hero p{font-size:clamp(18px,2.1vw,24px);font-weight:300;line-height:1.55;margin-bottom:36px}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- REJILLAS ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:860px){.grid3{grid-template-columns:1fr;gap:40px}.grid2{grid-template-columns:1fr;gap:34px}}

.card img,.card .ph{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:20px}
.card p{font-size:15.5px;color:var(--suave)}

.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.galeria img,.galeria .ph{width:100%;aspect-ratio:1;object-fit:cover}
.galeria .tall{grid-row:span 2;aspect-ratio:1/2.04}
@media(max-width:860px){.galeria{grid-template-columns:repeat(2,1fr)}
  .galeria .tall{grid-row:span 1;aspect-ratio:1}}

/* ---------- PRECIOS ---------- */
.paquete{max-width:560px;margin:44px auto 0;border:1px solid var(--linea);padding:44px 40px;text-align:center;background:var(--hueso)}
.paquete .n{font-family:var(--body);font-weight:300;font-size:58px;line-height:1;margin:14px 0 6px}
.paquete .moneda{font-family:var(--gothic);font-size:12px;letter-spacing:.2em;color:var(--suave);text-transform:uppercase}
.paquete ul{list-style:none;margin:26px 0 30px;font-size:16px}
.paquete li{padding:11px 0;border-bottom:1px solid var(--linea)}
.paquete li:last-child{border:none}
.addons{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);margin-top:56px}
.addon{background:var(--hueso);padding:28px 22px}
.addon .t{font-family:var(--gothic);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--suave);margin-bottom:12px}
.addon .p{font-family:var(--body);font-weight:600;font-size:25px;line-height:1.1;margin-bottom:12px}
.addon ul{list-style:none;font-size:14px;color:var(--suave)}
@media(max-width:860px){.addons{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.addons{grid-template-columns:1fr}}
.nota{font-size:13.5px;color:var(--suave);text-align:center;margin-top:26px;font-style:italic}

/* ---------- PASOS ---------- */
.paso .num{font-family:var(--body);font-weight:300;font-size:46px;color:var(--gris);line-height:1;margin-bottom:10px}
.paso p{font-size:15.5px;color:var(--suave)}

/* ---------- SWATCHES ---------- */
.swatches{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.sw{width:96px}
.sw i{display:block;height:96px;box-shadow:0 2px 14px rgba(0,0,0,.09)}
.sw span{display:block;font-family:var(--gothic);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--suave);margin-top:9px;text-align:center}

/* ---------- CTA FINAL ---------- */
.cierre{color:#F5F2EC;text-align:center;background:var(--cafe)}
.cierre h2{color:#fff}
.cierre .lead{color:#D3CBC2;margin:0 auto 34px}
.datos{display:flex;gap:52px;justify-content:center;flex-wrap:wrap;margin-top:52px;
  font-size:14.5px;color:#C3BAB0}
.datos b{display:block;font-family:var(--gothic);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#8E847A;margin-bottom:7px;font-weight:400}
.datos a{text-decoration:none}
.datos a:hover{color:#fff}

/* ---------- PIE ---------- */
footer{background:var(--cafe);color:#BDB4A9;text-align:center;padding:34px 26px;
  border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;letter-spacing:.05em}
footer a{text-decoration:none}
footer a:hover{color:#C3BAB0}
footer .sep{margin:0 9px;opacity:.5}

/* ---------- PLACEHOLDER ---------- */
.ph{background:repeating-linear-gradient(45deg,#E5DCD4,#E5DCD4 12px,#DED4C9 12px,#DED4C9 24px);
  display:flex;align-items:center;justify-content:center;color:#9C8F80;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:14px}

/* ---------- ACENTOS POR MARCA ---------- */
.t-home .hero::after{background:rgba(52,46,38,.44)}
.t-home .btn{background:var(--home);border-color:var(--home)}
.t-home .btn:hover{background:transparent;color:var(--home)}
.t-home .btn.light{background:#fff;border-color:#fff;color:var(--home)}
.t-home .btn.light:hover{background:transparent;color:#fff}
.t-home .btn.ghost{color:#fff}
.t-home .btn.ghost:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}
.t-home .cierre{background:var(--home)}

.t-albums .hero::after{background:rgba(44,52,58,.42)}
.t-albums .btn{background:var(--albums);border-color:var(--albums)}
.t-albums .btn:hover{background:transparent;color:var(--albums)}
.t-albums .btn.light{background:#fff;border-color:#fff;color:var(--albums)}
.t-albums .btn.light:hover{background:transparent;color:#fff}
.t-albums .cierre{background:var(--albums)}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:60;background:#25D366;
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 20px rgba(0,0,0,.24);text-decoration:none;transition:transform .2s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:29px;height:29px;fill:#fff}

/* el contorno claro debe seguir siendo blanco dentro de los temas de marca */
.t-home .btn.outline-light,.t-albums .btn.outline-light{
  background:transparent;border-color:#fff;color:#fff}
.t-home .btn.outline-light:hover{background:#fff;color:var(--home)}
.t-albums .btn.outline-light:hover{background:#fff;color:var(--albums)}


/* ---------- PLECA (banda de color con texto blanco) ---------- */
/* #6E6558 en vez del gris del boceto: con blanco da 5.7:1 y sí pasa AA */
.pleca{background:var(--cafe);color:#fff;padding:20px 30px;margin:0 0 46px;max-width:none;
  font-size:16.5px;font-weight:300;line-height:1.6}
.t-home .pleca{background:var(--cafe)}
.t-albums .pleca,.t-editorial .pleca{background:var(--acero)}
@media(max-width:860px){.pleca{padding:18px 22px;font-size:15.5px}}

/* ---------- TARJETAS CON LÍNEA DIVISORIA ---------- */
.grid3.divide{gap:0}
.grid3.divide > *{padding:0 30px}          /* igual en las tres: así las fotos miden lo mismo */
.grid3.divide > * + *{border-left:1px solid var(--linea)}
.grid3.divide .card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media(max-width:860px){
  .grid3.divide > *{padding:0 0 30px}
  .grid3.divide > * + *{border-left:0;border-top:1px solid var(--linea);padding-top:30px}
}

/* ---------- NOTA AL PIE DEL PAQUETE ---------- */
.paquete .aster{display:block;font-size:13px;line-height:1.55;color:var(--suave);
  font-style:italic;margin:-6px 0 26px;text-align:left}
.paquete li .mark{color:var(--suave)}

/* ---------- PORTADA CON TEXTO A LA IZQUIERDA ----------
   Para fotos cuyo sujeto vive del lado derecho del encuadre. */
.hero.izq{justify-content:flex-start;background-position:right center}
.hero.izq::after{background:linear-gradient(90deg,
  rgba(30,26,22,.62) 0%, rgba(30,26,22,.42) 45%, rgba(30,26,22,.12) 75%, rgba(30,26,22,.05) 100%)}
.hero.izq .inner{text-align:left;max-width:620px;margin-left:clamp(28px,7vw,110px);padding-left:0}
.hero.izq .logo{margin-left:0}
.hero.izq .cta{justify-content:flex-start}
@media(max-width:860px){
  .hero.izq{justify-content:center;background-position:60% center}
  .hero.izq::after{background:rgba(30,26,22,.44)}
  .hero.izq .inner{text-align:center;margin:0 auto}
  .hero.izq .logo{margin:0 auto 22px}
  .hero.izq .cta{justify-content:center}
}

/* ---------- PORTADA CON TEXTO ARRIBA ----------
   Para fotos con el sujeto abajo y el muro libre en la parte superior. */
.hero.alto{align-items:flex-start;background-position:center bottom}
.hero.alto::after{background:linear-gradient(180deg,
  rgba(30,26,22,.52) 0%, rgba(30,26,22,.34) 45%, rgba(30,26,22,.10) 78%, rgba(30,26,22,.04) 100%)}
.hero.alto .inner{padding-top:clamp(46px,7vh,84px)}
@media(max-width:860px){
  .hero.alto{align-items:center;background-position:center}
  .hero.alto::after{background:rgba(30,26,22,.44)}
  .hero.alto .inner{padding-top:70px}
}

/* ---------- PORTADA PARTIDA ----------
   Texto en un lado, fotografía en el otro. Nada se encima,
   así que sirve con cualquier encuadre. */
.hero.split{display:grid;grid-template-columns:1fr 1fr;min-height:86vh;
  background:var(--hueso);align-items:stretch}
.hero.split::after{display:none}
.hero.split .txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,6vw,86px);text-align:left;color:var(--tinta)}
.hero.split .logo{width:min(310px,72%);margin:0 0 26px}
.hero.split .sub{font-family:var(--gothic);font-size:11px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--suave);margin-bottom:26px;opacity:1}
.hero.split p{font-size:clamp(19px,1.9vw,25px);font-weight:300;line-height:1.5;
  margin-bottom:34px;color:var(--suave)}
.hero.split .script{color:var(--tinta)}
.hero.split .cta{justify-content:flex-start}
.hero.split .foto{background-size:cover;background-position:center;min-height:60vh}
@media(max-width:860px){
  .hero.split{grid-template-columns:1fr;min-height:0}
  .hero.split .txt{order:2;text-align:center;align-items:center;padding:52px 28px 60px}
  .hero.split .logo{margin:0 auto 22px}
  .hero.split .foto{order:1;min-height:62vh}
  .hero.split .cta{justify-content:center}
}

/* la portada del estudio es 2:1, así que se limita el alto para no recortarla */
.hero.izq{min-height:min(74vh,640px)}
@media(max-width:860px){.hero.izq{min-height:66vh}}

/* ---------- PORTADA PANORÁMICA: sin recortar los pies ----------
   La foto es 2:1, así que el bloque toma esa misma proporción. */
.hero.izq{aspect-ratio:2/1;min-height:min(540px,78vh);background-position:center bottom}
@media(max-width:860px){.hero.izq{aspect-ratio:auto;min-height:64vh;background-position:62% bottom}}

/* ---------- TARJETAS PAREJAS ---------- */
.grid3.divide .card{display:flex;flex-direction:column}
.grid3.divide .card p{min-height:4.9em}

/* ---------- PRECIOS: base y añadidos juntos ---------- */
.precios-bloque{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:46px;align-items:start;margin-top:40px}
.col-tit{font-family:var(--body);font-weight:600;font-size:19px;text-transform:uppercase;
  letter-spacing:.16em;text-align:center;margin-bottom:20px}
.precios-bloque .paquete{margin:0;max-width:none}
.precios-bloque .addons{grid-template-columns:1fr 1fr;margin-top:0}
@media(max-width:960px){
  .precios-bloque{grid-template-columns:1fr;gap:44px}
  .precios-bloque .addons{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.precios-bloque .addons{grid-template-columns:1fr}}


/* ================= CARRUSEL DE PORTAFOLIO =================
   Cada fotografía se ve completa, en su formato original.
   Las horizontales quedan horizontales y las verticales verticales. */
.carrusel{position:relative;background:var(--beige);margin-top:40px;
  display:flex;align-items:center;justify-content:center;
  min-height:min(76vh,680px);padding:34px clamp(56px,8vw,110px)}
.carrusel .marco{width:100%;height:min(66vh,600px);display:flex;
  align-items:center;justify-content:center}
.carrusel img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:none;box-shadow:0 6px 34px rgba(62,57,52,.18)}
.carrusel img.on{display:block}
.carrusel .flecha{position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;padding:16px;line-height:0;
  color:var(--cafe);opacity:.55;transition:opacity .2s}
.carrusel .flecha:hover{opacity:1}
.carrusel .flecha svg{width:34px;height:34px;fill:currentColor}
.carrusel .prev{left:clamp(6px,2vw,26px)}
.carrusel .next{right:clamp(6px,2vw,26px)}
.carrusel .cuenta{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:var(--gothic);font-size:11px;letter-spacing:.22em;color:var(--suave)}
@media(max-width:700px){
  .carrusel{min-height:0;padding:22px 46px 40px}
  .carrusel .marco{height:58vh}
  .carrusel .flecha svg{width:26px;height:26px}
}

/* ================= KATTURA FOTOGRAFÍA: BANNER POR DEFECTO Y TEMPORADAS =================
   Banner "¿Qué hace Kattura Fotografía?" que se ve cuando no hay categoría elegida. */
.foto-banner{position:relative;margin-top:40px;background:var(--beige);
  min-height:min(76vh,680px);display:flex;align-items:center;justify-content:center;
  padding:34px clamp(20px,6vw,80px)}
.foto-banner img{max-width:100%;max-height:min(66vh,600px);width:auto;height:auto;
  object-fit:contain;box-shadow:0 6px 34px rgba(62,57,52,.18)}
.foto-banner .banner-vacio{color:var(--suave);font-style:italic;text-align:center}
@media(max-width:700px){.foto-banner{min-height:0;padding:30px 20px}}

/* Barra de temporadas de Mini Sesiones: franja continua, sin huecos entre segmentos */
.season-bar{display:none;margin:0 0 30px;border:1px solid var(--cafe)}
.season-bar.mostrar{display:flex}
.season-seg{flex:1;font-family:var(--gothic);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 10px;background:var(--cafe);color:#fff;border:0;border-right:1px solid rgba(255,255,255,.25);
  cursor:pointer;transition:.2s;opacity:.82}
.season-seg:last-child{border-right:0}
.season-seg:hover{opacity:1}
.season-seg.on{opacity:1;background:var(--taupe)}
@media(max-width:700px){.season-bar{flex-wrap:wrap}.season-seg{flex:1 1 33%;border-bottom:1px solid rgba(255,255,255,.25)}}

/* ================= PRECIOS: FICHAS CON GUIONES ================= */
.addon .lista{list-style:none;font-size:15px;color:var(--tinta);margin-top:4px}
.addon .lista li{display:flex;align-items:baseline;gap:8px;padding:3px 0}
.addon .lista .pt{flex:1;border-bottom:1px dotted var(--taupe);
  transform:translateY(-4px);min-width:18px}
.addon .pie{margin-top:14px;font-size:13px;font-style:italic;color:var(--suave);line-height:1.5}
.addon .pie span{display:block}

/* ================= KATTURA HOME: CATEGORÍAS Y PIEZAS ================= */
.cat-nav{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 6px}
.cat-pill{font-family:var(--gothic);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 20px;border:1px solid var(--linea);background:transparent;color:var(--suave);
  cursor:pointer;transition:.2s;white-space:nowrap}
.cat-pill:hover{border-color:var(--home);color:var(--tinta)}
.cat-pill.on{background:var(--home);border-color:var(--home);color:#fff}
/* Sub-colecciones: franja café continua, sin huecos (mismo look que la barra
   de temporadas de Mini Sesiones en Kattura Fotografía) */
.subcats{display:none;margin:0 0 30px;border:1px solid var(--cafe)}
.subcats.mostrar{display:flex}
.subcats .cat-pill{flex:1;font-family:var(--gothic);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:14px 10px;background:var(--cafe);color:#fff;border:0;
  border-right:1px solid rgba(255,255,255,.25);cursor:pointer;transition:.2s;opacity:.82;white-space:nowrap}
.subcats .cat-pill:last-child{border-right:0}
.subcats .cat-pill:hover{opacity:1;border-color:rgba(255,255,255,.25);color:#fff}
.subcats .cat-pill.on{opacity:1;background:var(--taupe)}
@media(max-width:700px){
  .subcats{flex-wrap:wrap}
  .subcats .cat-pill{flex:1 1 33%;border-bottom:1px solid rgba(255,255,255,.25)}
}
/* En Kattura Fotografía las píldoras usan el color de esa marca, no el de Home */
.t-estudio .cat-pill:hover{border-color:var(--estudio)}
.t-estudio .cat-pill.on{background:var(--estudio);border-color:var(--estudio)}

.piezas{display:grid;grid-template-columns:repeat(2,1fr);gap:50px;margin-top:36px;align-items:start}
@media(max-width:760px){.piezas{grid-template-columns:1fr;gap:44px}}
/* cada foto conserva su formato original (horizontal o vertical), sin recortarla */
.pieza-img{display:grid;grid-template-columns:1fr;gap:2px;background:var(--linea)}
.pieza-img img{width:100%;height:auto;display:block;background:var(--beige)}
/* excepción: el díptico sí recorta a propósito, para que las dos mitades midan igual y el espejo cuadre */
.pieza-img.dip{grid-template-columns:1fr 1fr}
.pieza-img.dip img{aspect-ratio:3/4;object-fit:cover}
.pieza h3{margin-top:22px;text-align:center;font-family:var(--gothic);font-weight:400;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.2em;color:var(--tinta)}
.pieza h3::before{content:"Título: "}
.datos-pieza{list-style:none;margin-top:10px;font-size:14px;color:var(--suave);text-align:center;font-weight:300}
.datos-pieza li{padding:2px 0}
.datos-pieza b{font-family:inherit;font-size:inherit;letter-spacing:normal;text-transform:none;
  color:inherit;font-weight:300}
.datos-pieza b::after{content:": "}
.pieza .historia{margin-top:16px;font-size:14.5px;color:var(--suave);line-height:1.7;max-width:520px}

.sin-piezas{display:none;text-align:center;padding:50px 20px 10px;color:var(--suave);font-style:italic}

/* ---------- PIEZA CON RENDER: foto real | fotomontaje en un espacio ----------
   Cada render va pegado a SU foto, no en una vitrina genérica aparte.
   El recuadro (foto y render) mide siempre lo mismo, sea cual sea el
   formato de la imagen — se ajusta completa (sin recortar) sobre un
   fondo cálido parejo, como una foto vertical enmarcada con paspartú. */
.pieza-dual{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:34px;position:relative;padding-bottom:6px}
.pieza-dual::before{content:"";position:absolute;left:50%;top:0;bottom:44px;width:1px;background:var(--linea)}
.pd-cap{margin-top:18px;text-align:center}
.pd-cap h3{font-family:var(--gothic);font-weight:400;font-size:13.5px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--tinta)}
.pd-cap h3::before{content:"Título: "}
.pd-render .etiqueta{font-family:var(--gothic);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--suave);margin-top:18px;text-align:center;display:block}
.pd-cta{margin-top:8px;font-size:13px;color:var(--suave);text-align:center;line-height:1.6}

/* recuadro parejo: mismo alto siempre, en foto y en render */
.pd-foto .pieza-img,.pd-render .pieza-img,.pd-carrusel{
  height:clamp(300px,32vw,440px);background:var(--calido);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pd-foto .pieza-img img,.pd-render .pieza-img img{
  width:100%;height:100%;object-fit:contain;aspect-ratio:auto;background:none}
.pd-foto .pieza-img.dip{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linea)}
.pd-foto .pieza-img.dip img{width:100%;height:100%;object-fit:cover}
/* para fotos horizontales dentro del recuadro vertical: cubre todo el
   recuadro sin mostrar el fondo, recortando por los lados según convenga */
.pd-foto .pieza-img.cubre img,.pd-render .pieza-img.cubre img{object-fit:cover}

/* verticales y cuadradas (todo lo que NO lleva .cubre): el recuadro se ajusta al
   ancho real de la foto en vez de dejar franjas de fondo a los lados. El alto
   sigue siendo el mismo en toda la galería, así que las filas no se desalinean. */
.pd-foto .pieza-img:not(.cubre):not(.dip),
.pd-render .pieza-img:not(.cubre),
.pd-carrusel:not(.cubre){width:fit-content;max-width:100%;margin-inline:auto;background:none}
.pd-foto .pieza-img:not(.cubre):not(.dip) img,
.pd-render .pieza-img:not(.cubre) img{width:auto;height:100%;max-width:100%}
.pd-carrusel:not(.cubre) img{width:auto;height:100%;max-width:100%;max-height:none}

@media(max-width:760px){
  .pieza-dual{grid-template-columns:1fr;row-gap:36px}
  .pieza-dual::before{display:none}
  .pd-foto .pieza-img,.pd-render .pieza-img,.pd-carrusel{height:64vw}
}

/* ---------- CARRUSEL DENTRO DE UNA PIEZA (series de varias fotos) ----------
   Cuando una pieza tiene varias fotografías, se navegan con flechas
   en vez de amontonarlas en un colage. */
.pd-carrusel{position:relative}
.pd-carrusel img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:none}
.pd-carrusel img.on{display:block}
/* variante que cubre todo el recuadro sin mostrar el fondo (recorta si hace falta) */
.pd-carrusel.cubre img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
/* variante por imagen individual, para carruseles donde solo algunas fotos deben cubrir */
.pd-carrusel img.cubre{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.pd-carrusel .pdc-flecha{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;padding:8px 12px;color:#fff;opacity:.7;font-family:var(--body);font-size:30px;
  line-height:1;transition:opacity .2s;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.pd-carrusel .pdc-flecha:hover{opacity:1}
.pd-carrusel .prev{left:2px}
.pd-carrusel .next{right:2px}
.pd-carrusel .pdc-cuenta{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  font-family:var(--gothic);font-size:10.5px;letter-spacing:.2em;color:#fff;opacity:.85;
  text-shadow:0 1px 4px rgba(0,0,0,.4)}

/* carruseles verticales (sin .cubre): la foto no llena el recuadro, así que las
   flechas se sacan fuera de la imagen (sobre el fondo de la página) para que
   se noten como control de carrusel y no se pierdan encima de la foto */
.pd-carrusel:not(.cubre){overflow:visible}
.pd-carrusel:not(.cubre) .pdc-flecha{color:var(--tinta);opacity:.5;text-shadow:none}
.pd-carrusel:not(.cubre) .pdc-flecha:hover{opacity:1}
.pd-carrusel:not(.cubre) .prev{left:-36px}
.pd-carrusel:not(.cubre) .next{right:-36px}
@media(max-width:760px){
  .pd-carrusel:not(.cubre) .pdc-flecha{font-size:24px;padding:8px 6px}
  .pd-carrusel:not(.cubre) .prev{left:-26px}
  .pd-carrusel:not(.cubre) .next{right:-26px}
}

/* ---------- GRUPO DE PIEZAS (varias obras dentro de una misma subcolección) ----------
   Cuando una subcolección tiene más de una pieza, se muestra una a la vez
   (con su foto y su render, igual que siempre) y se pasa de una a otra con
   flechas y una tira de miniaturas — nunca apiladas hacia abajo, para que
   ninguna pieza quede escondida al fondo de la página. */
.pieza-grupo{grid-column:1/-1}
.pg-item{display:none}
.pg-item.pg-on{display:grid}
.pg-nav{display:flex;align-items:center;gap:14px;margin-top:30px;max-width:560px;margin-left:auto;margin-right:auto}
.pg-flecha{flex:none;background:none;border:0;cursor:pointer;padding:6px;line-height:0;
  color:var(--suave);opacity:.6;transition:opacity .2s,color .2s;font-size:0}
.pg-flecha:hover{opacity:1;color:var(--tinta)}
.pg-flecha svg{width:20px;height:20px;fill:currentColor}
.pg-thumbs{flex:1;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:thin}
.pg-thumb{flex:none;width:64px;height:64px;padding:0;border:2px solid transparent;background:var(--calido);
  cursor:pointer;opacity:.55;transition:.2s;overflow:hidden}
.pg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pg-thumb:hover{opacity:.85}
.pg-thumb.pg-on{opacity:1;border-color:var(--home)}
@media(max-width:760px){
  .pg-nav{max-width:none}
  .pg-thumb{width:52px;height:52px}
}

/* ---------- ACABADOS ---------- */
.acabados{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);margin-top:40px}
.acabado{background:var(--hueso);padding:32px 20px;text-align:center}
.acabado .t{font-family:var(--gothic);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:860px){.acabados{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.acabados{grid-template-columns:1fr}}
.montajes{text-align:center;margin-top:24px;font-size:14.5px;color:var(--suave)}

/* ================= PIE DE LAS PUERTAS ================= */
.puerta .redes{display:block;margin-top:22px;font-family:var(--gothic);
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;opacity:.62}
.puerta .cuenta-ig{display:block;margin-top:5px;font-family:var(--gothic);
  font-size:11.5px;letter-spacing:.13em;opacity:.9}


/* ---------- BANNER DE CAMPAÑA ---------- */
.banner{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,34px);
  flex-wrap:wrap;background:var(--cafe);color:#fff;padding:20px clamp(20px,5vw,48px);text-align:center}
.banner .txt{font-size:clamp(15px,1.7vw,19px);font-weight:300}
.banner .txt b{font-weight:600}
.banner .btn-b{font-family:var(--gothic);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid #fff;padding:12px 26px;white-space:nowrap;transition:.25s;
  animation:btn-respira 3.4s ease-in-out infinite}
.banner .btn-b:hover{background:#fff;color:var(--cafe);animation:none}
@keyframes btn-respira{
  0%,100%{background:transparent;color:#fff}
  50%{background:#fff;color:var(--cafe)}}
@media(prefers-reduced-motion:reduce){.banner .btn-b{animation:none}}

/* ---------- PRECIOS: columnas alineadas arriba y abajo ---------- */
.precios-bloque{align-items:stretch}
.col-base,.col-add{display:flex;flex-direction:column}
.precios-bloque .paquete{flex:1;display:flex;flex-direction:column}
.precios-bloque .paquete .aster{margin-top:auto}
.precios-bloque .addons{flex:1;align-content:stretch}