/* ─────────────────────────────────────────────────────────────
   Maderoterapia Cartagena y Formación · demo Grou
   Paleta muestreada de SU fachada (ladrillo pintado en verde menta),
   de las letras de su pared interior y del bronce de su puerta.
   ───────────────────────────────────────────────────────────── */

:root{
  --verde:#7FA391;          /* el menta de su fachada y de su logo de pared */
  --verde-hondo:#16261F;    /* fondo dominante */
  --verde-medio:#24392F;
  --madera:#C08A4E;         /* los aros de la copa y el bronce de su puerta */
  --madera-clara:#DDBA86;
  --crema:#EBEFE8;          /* muestreado entre su placa de la entrada y el menta de la fachada */
  --crema-2:#E7DFD1;
  --tinta:#101A15;
  --tinta-60:#4A5750;

  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1240px;
  --pad:clamp(1.25rem,4vw,3rem);

  --fs-h1:clamp(3rem,9.6vw,8.6rem);
  --fs-h2:clamp(2rem,4.6vw,3.9rem);
  --fs-h3:clamp(1.25rem,2vw,1.7rem);
  --fs-lead:clamp(1rem,1.15vw,1.15rem);
  --fs-micro:.75rem;
}

*,*::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:"Karla",system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:"Darker Grotesque","Karla",sans-serif;font-weight:900;margin:0;line-height:.86;letter-spacing:-.022em}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;background:var(--tinta);color:var(--crema);padding:.6rem 1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--madera);outline-offset:3px}

/* micro-etiquetas en mono: el otro extremo de la escala */
.micro{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-60);margin:0 0 .9rem;
}
.micro--wood{color:var(--madera)}
.sec--dark .micro,.hero .micro{color:var(--verde)}

/* ── botones ─────────────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:"Karla",sans-serif;font-weight:700;
  font-size:.95rem;padding:.95rem 1.5rem;text-decoration:none;border:1px solid transparent;
  transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.btn--solid{background:var(--tinta);color:var(--crema)}
.btn--wood{background:var(--madera);color:var(--verde-hondo)}
.btn--ghost{border-color:currentColor;background:transparent}
.btn:active{transform:scale(.97)}
@media (hover:hover){
  .btn--solid:hover{background:var(--verde-medio)}
  .btn--wood:hover{background:var(--madera-clara)}
  .btn--ghost:hover{background:rgba(127,163,145,.16)}
}

/* ── cabecera ────────────────────────────────────────────────── */
/* OJO: el blur va en un ::after, NO en .hd. Un backdrop-filter en .hd la convierte
   en bloque contenedor del nav fijo y el menú móvil se cuela sobre la página. */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:linear-gradient(180deg,rgba(16,26,21,.55) 0%,rgba(16,26,21,.22) 62%,rgba(16,26,21,0) 100%);
}
.hd::after{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:rgba(22,38,31,.94);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(127,163,145,.22);
  transition:opacity .28s var(--ease);
}
.hd.scrolled::after{opacity:1}
.hd__in{
  position:relative;z-index:1;
  max-width:var(--wrap);margin-inline:auto;padding:.85rem var(--pad);display:flex;align-items:center;gap:1.5rem;
}
.mark{text-decoration:none;color:var(--crema);display:block;line-height:1}
.mark__a{display:block;font-family:"Darker Grotesque",sans-serif;font-weight:900;font-size:1.35rem;letter-spacing:-.02em;text-transform:uppercase}
.mark__b{display:block;font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--verde)}
.nav{margin-left:auto;display:flex;gap:1.6rem}
.nav a{
  color:var(--crema);text-decoration:none;font-size:.9rem;font-weight:500;
  padding-bottom:2px;border-bottom:1px solid transparent;text-shadow:0 1px 8px rgba(16,26,21,.55);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.nav a.active{border-color:var(--madera);color:var(--madera-clara)}
@media (hover:hover){.nav a:hover{border-color:var(--verde)}}
.hd__cta{
  color:var(--verde-hondo);background:var(--madera);text-decoration:none;
  font-weight:700;font-size:.85rem;padding:.6rem 1.05rem;
  transition:background-color .22s var(--ease);
}
@media (hover:hover){.hd__cta:hover{background:var(--madera-clara)}}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;margin-left:auto}
.burger span{display:block;width:26px;height:2px;background:var(--crema);margin:5px 0}

/* ── PORTADA ─────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:end;
  overflow:hidden;background:var(--verde-hondo);isolation:isolate;
}
/* UNA sola foto, y usada donde de verdad es nítida.
   Su mejor imagen mide 700x1130: es VERTICAL y pequeña.
   · En móvil (viewport vertical) va a sangre: el formato le encaja y se ve limpia.
   · En escritorio ocupa una banda vertical de altura completa que sangra por la derecha,
     a un ancho en el que no hay que ampliarla, y el texto vive sobre el color de la marca.
   Estirarla a pantalla completa en escritorio la deshacía. */
.hero{grid-template-columns:1fr}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:52% 4%}
.hero__veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(16,26,21,.66) 0%,rgba(16,26,21,.24) 17%,rgba(16,26,21,.62) 33%,rgba(16,26,21,.88) 58%,rgba(16,26,21,.96) 100%);
}
.hero__in{
  position:relative;z-index:4;
  max-width:var(--wrap);margin-inline:auto;width:100%;
  padding:9rem var(--pad) clamp(2.5rem,7vh,5rem);
  color:var(--crema);
}
.hero__micro{color:var(--verde);margin-bottom:1.6rem}
.hero__t{font-size:var(--fs-h1);line-height:.84;color:var(--crema);margin-bottom:1.4rem}
.hero__t .ln{display:block;white-space:nowrap}
.ln--2{padding-left:5.5%}
.ln--3{padding-left:2.5%;color:var(--madera-clara)}
.ln--4{padding-left:8.5%;color:var(--madera-clara)}
.hero__sub{max-width:34ch;font-size:var(--fs-lead);color:#CBD6CE;margin-bottom:1.8rem}
.hero__act{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.6rem}
.hero__act .btn--solid{background:var(--crema);color:var(--verde-hondo)}
.hero__act .btn--ghost{color:var(--crema)}
@media (hover:hover){.hero__act .btn--solid:hover{background:var(--madera-clara)}}
.hero__meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;
  font-family:"JetBrains Mono",monospace;font-size:.76rem;letter-spacing:.04em;color:#BCCBC0;margin:0;
}
.hero__meta strong{font-size:1.05rem;color:var(--crema)}
.stars{color:var(--madera);letter-spacing:.06em}
.dot{width:4px;height:4px;background:var(--verde);display:inline-block}
@media (max-width:899px){.ln--2,.ln--3,.ln--4{padding-left:0}}

/* ESCRITORIO: campo de color + banda de foto a sangre por la derecha */
@media (min-width:900px){
  /* la fila la fija el viewport, no la foto: si no, la imagen vertical estira el hero */
  .hero{grid-template-columns:1fr 46vw;grid-template-rows:minmax(100svh,auto)}
  .hero__bg{position:relative;grid-column:2;grid-row:1;inset:auto;align-self:stretch;overflow:hidden}
  .hero__bg img{position:absolute;inset:0;object-position:56% 10%}
  /* la foto se oscurece al encontrarse con el campo de color: ahí cruza el titular */
  .hero__bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(16,26,21,.92) 0%,rgba(16,26,21,.66) 12%,rgba(16,26,21,.22) 30%,rgba(16,26,21,0) 48%);
  }
  .hero__veil{
    grid-column:1;grid-row:1;position:relative;inset:auto;align-self:stretch;
    background:
      radial-gradient(120% 90% at 12% 82%,rgba(127,163,145,.16) 0%,rgba(127,163,145,0) 62%),
      var(--verde-hondo);
  }
  /* textura: el campo de color nunca se deja liso */
  .hero__veil::after{
    content:"";position:absolute;inset:0;opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    mix-blend-mode:soft-light;
  }
  .hero__in{
    grid-column:1;grid-row:1;min-width:0;/* el titular puede desbordar sin ensanchar la columna */
    padding:5rem clamp(2rem,4vw,4rem) clamp(2rem,4vh,3rem)
            max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
  }
  /* el titular manda: se sale del campo de color y cruza sobre la foto */
  .hero__t{
    font-size:clamp(6.9rem,8.7vw,9.6rem);line-height:.8;margin-bottom:1.1rem;
    width:max-content;text-shadow:0 2px 26px rgba(16,26,21,.55);
  }
  .hero__micro{margin-bottom:1rem}
  .hero__sub{margin-bottom:1.3rem}
  .hero__act{margin-bottom:1.2rem}
}

/* ── secciones ───────────────────────────────────────────────── */
.sec{padding:clamp(4.5rem,9vw,8rem) 0}
.sec--tight{padding:clamp(3.5rem,6vw,5.5rem) 0}
.sec--light{background:var(--crema)}
.sec--dark{background:var(--verde-hondo);color:var(--crema)}
.sh{margin-bottom:clamp(2.5rem,5vw,4rem)}
.sh__t{font-size:var(--fs-h2);max-width:11em}
.sh__t--dark{color:var(--crema)}
.lead{font-size:var(--fs-lead);color:var(--tinta-60);max-width:54ch;margin-top:1.4rem}
.sec--dark .lead{color:#C3D0C7}
.lead--wide{max-width:60ch}

/* ── bento de tratamientos ───────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:rgba(16,26,21,.16)}
.cell{background:var(--crema);padding:clamp(1.5rem,2.4vw,2.4rem);grid-column:span 3;margin:0}
.cell h3{font-size:var(--fs-h3);margin-bottom:.7rem}
.cell p{color:var(--tinta-60);font-size:.98rem;margin:0}
.cell--hero{grid-column:span 7;grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;background:var(--verde-hondo);color:var(--crema)}
.cell--hero h3{font-size:clamp(1.9rem,3.4vw,3rem);color:var(--crema)}
.cell--hero p{color:#C3D0C7;font-size:1.05rem;max-width:44ch}
.tools{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:1.6rem 0 0}
.tools li{
  font-family:"JetBrains Mono",monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(127,163,145,.5);color:var(--verde);padding:.35rem .7rem;
}
.cell--photo{grid-column:span 5;grid-row:span 2;position:relative;padding:0;overflow:hidden;min-height:340px}
.cell--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.cell__over{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.5rem,2.4vw,2.4rem);color:var(--crema);
  background:linear-gradient(180deg,rgba(16,26,21,0) 26%,rgba(16,26,21,.9) 76%);
}
.cell--photo h3{color:var(--crema)}
.cell--photo p{color:#DDE4DE}
.cell--photo .micro{color:var(--verde)}
.cell--accent{grid-column:span 12;background:var(--verde);color:var(--verde-hondo)}
.cell--accent .ac{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
.cell--accent .micro{color:#1B3129}
.cell--accent h3{font-size:clamp(1.7rem,3.4vw,2.9rem);max-width:9em}
.cell--accent p{color:#1B3129;max-width:44ch}
@media (max-width:760px){.cell--accent .ac{grid-template-columns:1fr}}
.cell--sm{grid-column:span 3}

@media (max-width:980px){
  .cell--hero{grid-column:span 12;grid-row:auto}
  .cell--photo{grid-column:span 12;grid-row:auto}
  .cell--accent{grid-column:span 12;grid-template-columns:1fr}
  .cell--sm{grid-column:span 6}
}
@media (max-width:560px){.cell--sm{grid-column:span 12}}

/* ── banda de cifras ─────────────────────────────────────────── */
.strip{background:var(--verde-medio);color:var(--crema);padding:clamp(2.2rem,4vw,3.4rem) 0}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.stat__n{display:block;font-family:"Darker Grotesque",sans-serif;font-weight:900;font-size:clamp(2.4rem,4.6vw,3.8rem);line-height:.9;color:var(--madera-clara)}
.stat__l{display:block;font-family:"JetBrains Mono",monospace;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:#B7C6BB;margin-top:.5rem}
@media (max-width:760px){.strip__in{grid-template-columns:repeat(2,1fr)}}

/* ── reseñas ─────────────────────────────────────────────────── */
.quote{margin:0 0 clamp(3rem,6vw,5rem)}
.quote__t{
  font-family:"Darker Grotesque",sans-serif;font-weight:900;line-height:.88;letter-spacing:-.02em;
  font-size:clamp(2.2rem,6.2vw,5.4rem);margin:0 0 1.1rem;max-width:9em;
}
.quote footer{color:var(--tinta-60)}
.revs{border-top:1px solid rgba(16,26,21,.18);padding-top:2rem}
.rev{margin:0;padding-right:2rem}
.rev p{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--tinta);max-width:60ch}
.rev figcaption{display:flex;flex-direction:column;gap:.25rem;margin-top:1rem}
.rev figcaption .micro{margin:0}
.revs__nav{display:flex;gap:.5rem;margin-top:1.6rem}
.revs__nav button{
  width:44px;height:44px;border:1px solid rgba(16,26,21,.3);background:transparent;
  cursor:pointer;font-size:1.1rem;color:var(--tinta);
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
@media (hover:hover){.revs__nav button:hover{background:var(--verde);border-color:var(--verde)}}
.revs__nav button:active{transform:scale(.97)}

/* ── formación ───────────────────────────────────────────────── */
.form__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.form__grid .btn{margin-top:.8rem}
.temario{list-style:none;margin:0;padding:0;border-top:1px solid rgba(127,163,145,.34)}
.temario li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.1rem 0;border-bottom:1px solid rgba(127,163,145,.34)}
.temario .micro{margin:0;color:var(--madera)}
.temario p{margin:0;color:#DDE4DE}
@media (max-width:860px){.form__grid{grid-template-columns:1fr}}

/* ── el centro: rejilla irregular ────────────────────────────── */
/* celdas de distinto tamaño: cada foto en el formato que le va, sin huecos */
.grid-irr{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,clamp(115px,13vw,190px));gap:1rem}
.shot{padding:0;border:0;background:none;cursor:pointer;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .28s var(--ease)}
.shot:nth-child(1){grid-column:1/3;grid-row:1/3}
.shot:nth-child(2){grid-column:3/4;grid-row:1/4}
.shot:nth-child(3){grid-column:4/5;grid-row:1/4}
.shot:nth-child(4){grid-column:1/3;grid-row:3/5}
.shot:nth-child(5){grid-column:3/5;grid-row:4/5}
.shot:nth-child(1) img{object-position:center 16%}
.shot:nth-child(2) img{object-position:60% 28%}
.shot:nth-child(3) img{object-position:56% 52%}
.shot:nth-child(4) img{object-position:center 62%}
.shot:nth-child(5) img{object-position:40% center}
@media (hover:hover){.shot:hover img{transform:scale(1.04)}}
@media (max-width:760px){
  .grid-irr{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,140px)}
  .shot:nth-child(1){grid-column:1/3;grid-row:1/2}
  .shot:nth-child(2){grid-column:1/2;grid-row:2/4}
  .shot:nth-child(3){grid-column:2/3;grid-row:2/4}
  .shot:nth-child(4){grid-column:1/3;grid-row:4/5}
  .shot:nth-child(5){grid-column:1/3;grid-row:5/6}
}

/* ── dónde y cuándo ──────────────────────────────────────────── */
.donde{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.estado{display:flex;align-items:center;gap:.6rem;font-family:"JetBrains Mono",monospace;font-size:.8rem;margin:1.4rem 0 1.6rem}
.pill{width:9px;height:9px;border-radius:50%;background:var(--tinta-60);flex:none}
.pill.open{background:#2E7D52}
.pill.closed{background:#A8503F}
.hours{border-top:1px solid rgba(16,26,21,.18)}
.hours .row{display:flex;justify-content:space-between;padding:.65rem 0;border-bottom:1px solid rgba(16,26,21,.14);font-size:.95rem}
.hours .row.today{font-weight:700;color:var(--tinta)}
.hours .row.today span:last-child{color:var(--madera)}
.donde__act{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.donde__map{height:100%;min-height:420px}
.donde__map iframe{width:100%;height:100%;min-height:420px;border:0;filter:saturate(.78)}
@media (max-width:860px){.donde{grid-template-columns:1fr}}

/* ── contacto ────────────────────────────────────────────────── */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.form{display:grid;gap:1rem}
.form label{display:grid;gap:.4rem;font-family:"JetBrains Mono",monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--verde)}
.form input,.form select{
  font-family:"Karla",sans-serif;font-size:1rem;padding:.85rem .9rem;
  background:rgba(243,237,227,.07);border:1px solid rgba(127,163,145,.45);color:var(--crema);
  transition:border-color .2s var(--ease);
}
.form input::placeholder{color:#8FA096}
.form input:focus,.form select:focus{border-color:var(--madera)}
.form input.invalid{border-color:#E39485}
.form option{color:#101A15;background:#EBEFE8}
.form .btn{justify-self:start}
.form__note{margin:0;color:#9FB0A4}
@media (max-width:860px){.cta{grid-template-columns:1fr}}

/* ── pie ─────────────────────────────────────────────────────── */
.ft{background:var(--tinta);color:var(--crema);padding-top:clamp(3rem,6vw,4.5rem)}
.ft a{color:var(--verde)}
.ft__in{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;padding-bottom:2.5rem}
.mark--ft{margin-bottom:1rem}
.mark--ft .mark__a{font-size:1.5rem}
.ft__addr{margin-bottom:.35rem}
.ft__h p{margin:0;color:#B7C6BB}
.ft__bar{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  padding-top:1.4rem;padding-bottom:1.2rem;border-top:1px solid rgba(127,163,145,.28);
  font-size:.85rem;color:#9FB0A4;
}
.ft__bar p{margin:0}
.ft__legal a{color:#9FB0A4}
.demo-aviso{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) 5.5rem;
  font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.06em;color:#7C8B80;
}
@media (max-width:760px){.ft__in{grid-template-columns:1fr}}

/* ── barra móvil ─────────────────────────────────────────────── */
.callbar{display:none}
@media (max-width:760px){
  .callbar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--verde-hondo);border-top:1px solid rgba(127,163,145,.3);
  }
  .callbar a{
    text-align:center;padding:1rem;color:var(--crema);text-decoration:none;font-weight:700;font-size:.95rem;
  }
  .callbar a:last-child{background:var(--madera);color:var(--verde-hondo)}
  body{padding-bottom:0}
  .demo-aviso{padding-bottom:5.5rem}
}

/* ── nav móvil ───────────────────────────────────────────────── */
@media (max-width:960px){
  .hd__cta{display:none}
  .burger{display:block}
  .nav{
    position:fixed;inset:0;height:100svh;background:var(--verde-hondo);flex-direction:column;
    justify-content:center;align-items:center;gap:1.6rem;margin:0;overflow:hidden;
    transform:translateY(-105svh);transition:transform .28s var(--ease);
  }
  .nav.open{transform:none}
  .nav a{font-size:1.5rem;text-shadow:none}
}

/* ── lightbox ────────────────────────────────────────────────── */
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain}
.lightbox__close{
  position:absolute;top:1rem;right:1.2rem;background:none;border:0;color:#fff;
  font-size:2.2rem;line-height:1;cursor:pointer;
}