/* =========================================================
   Cre·Arte Salón — Totana
   Paleta anclada al logo real (disco rosa palo) y a los esmaltes
   de sus propias fotos: ciruela, cereza, borgoña, grafito, nude.
   ========================================================= */

:root{
  /* color */
  --plum:      #241119;   /* ink ciruela (del jersey burdeos / esmalte oscuro) */
  --plum-2:    #351A24;   /* bloque oscuro */
  --plum-3:    #4A2531;
  --rose:      #BE8C83;   /* disco del logo — acento de marca */
  --rose-d:    #9C6960;
  --rose-soft: #EBD3CC;
  --blush:     #F6E9E4;
  --paper:     #FCF7F5;
  --cream:     #FFFFFF;
  --cherry:    #8E2233;

  --ink:   var(--plum);
  --body:  #5E4048;
  --muted: #93777E;
  --line:  rgba(36,17,25,.13);
  --hair:  rgba(36,17,25,.08);
  --line-l:rgba(255,255,255,.16);

  /* acento vivo: lo cambia la carta de color */
  --accent: var(--rose);

  /* medidas */
  --maxw: 1220px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(84px, 10vw, 138px);
  --r-sm: 6px; --r-md: 14px; --r-lg: 24px;
  --shadow-sm: 0 2px 10px -4px rgba(36,17,25,.18);
  --shadow-md: 0 18px 40px -24px rgba(36,17,25,.38);
  --shadow-lg: 0 40px 90px -48px rgba(36,17,25,.55);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* tipografía */
  --display: "Bodoni Moda", "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:84px }
body{
  background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button,input,select{ font:inherit; color:inherit }
[hidden]{ display:none !important }
::selection{ background:var(--rose); color:#fff }

.container{ width:min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline:auto }

.skip{ position:absolute; left:-9999px; top:0; background:var(--plum); color:#fff; padding:10px 16px; z-index:1000 }
.skip:focus{ left:8px; top:8px }

:where(a,button,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--rose); outline-offset:3px; border-radius:3px;
}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; color:var(--ink); line-height:1.06; letter-spacing:-.018em; text-wrap:balance }
h1{ font-size:clamp(2.5rem, 5.6vw, 4.35rem) }
h2{ font-size:clamp(2rem, 4vw, 3.15rem) }
h3{ font-size:1.15rem; line-height:1.25 }
em{ font-style:italic; color:var(--rose) }
p{ text-wrap:pretty }

.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.24em; color:var(--rose-d);
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; flex:none }
.eyebrow--light{ color:var(--rose-soft) }

.lead{ font-size:1.08rem; color:var(--body); max-width:56ch }

/* ---------- botones ---------- */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:currentColor;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  padding:.82em 1.5em; border-radius:999px; cursor:pointer;
  font-size:.94rem; font-weight:600; letter-spacing:.01em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm) }
.btn--primary{ --bg:var(--rose); --fg:#fff; --bd:var(--rose) }
.btn--primary:hover{ --bg:var(--rose-d); --bd:var(--rose-d) }
.btn--ghost{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.5) }
.btn--ghost:hover{ --bg:rgba(255,255,255,.1); --bd:#fff }
.btn--outline{ --bd:var(--line); --fg:var(--ink) }
.btn--outline:hover{ --bd:var(--rose); --fg:var(--rose-d) }
.btn--lg{ padding:1em 1.9em; font-size:1rem }
.btn--sm{ padding:.6em 1.15em; font-size:.86rem }
.btn--full{ width:100%; margin-top:6px }

.arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:transparent; cursor:pointer; font-size:1rem; line-height:1;
  display:grid; place-items:center; transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.arrow:hover{ background:var(--ink); border-color:var(--ink); color:#fff }

/* ---------- estado abierto/cerrado ---------- */
.live{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:500 }
.live i{ width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none }
.live.open i{ background:#3F9E63; box-shadow:0 0 0 4px rgba(63,158,99,.18) }
.live.closed i{ background:var(--cherry); box-shadow:0 0 0 4px rgba(142,34,51,.16) }
.live--inline{ font-size:.8rem; margin-left:10px; vertical-align:middle; font-family:var(--sans); letter-spacing:0 }

.stars{ color:var(--rose); letter-spacing:.1em; font-size:.9rem }
.stars--lg{ font-size:1.4rem }
.dot-sep{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.4 }

/* =========================================================
   HEADER
   ========================================================= */
.hdr{ position:fixed; inset:0 0 auto; z-index:100; padding:16px 0 }
.hdr__in{ display:flex; align-items:center; gap:24px }
.hdr.scrolled{ background:rgba(252,247,245,.9); backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 1px 0 var(--hair), var(--shadow-sm) }

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto }
.brand__mark{ width:44px; height:44px; border-radius:50%; flex:none }
.brand__txt{
  font-family:var(--display); font-size:1.16rem; letter-spacing:-.01em;
  color:#fff; text-shadow:0 1px 12px rgba(36,17,25,.5); white-space:nowrap;
}
.brand__txt em{ font-style:italic; color:var(--rose-soft); font-size:.9em }
.brand__dot{ color:var(--rose-soft) }
.hdr.scrolled .brand__txt{ color:var(--ink); text-shadow:none }
.hdr.scrolled .brand__txt em, .hdr.scrolled .brand__dot{ color:var(--rose-d) }

.nav{ display:flex; gap:28px }
.nav a{
  font-size:.9rem; font-weight:500; color:rgba(255,255,255,.86);
  text-shadow:0 1px 10px rgba(36,17,25,.55); position:relative; padding-block:4px;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{ color:#fff } .nav a:hover::after{ transform:scaleX(1) }
.nav a.active{ color:#fff } .nav a.active::after{ transform:scaleX(1) }
.hdr.scrolled .nav a{ color:var(--body); text-shadow:none }
.hdr.scrolled .nav a:hover, .hdr.scrolled .nav a.active{ color:var(--ink) }

.hdr__cta{ display:flex; align-items:center; gap:12px }
.burger{ display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer; padding:10px 8px }
.burger span{ display:block; height:2px; background:#fff; border-radius:2px; margin:4px 0; transition:transform .3s var(--ease), opacity .2s }
.hdr.scrolled .burger span{ background:var(--ink) }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; background:var(--plum); color:#fff;
  padding:clamp(120px,15vw,168px) 0 clamp(72px,9vw,104px);
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0; height:180px;
  background:linear-gradient(to bottom, transparent, rgba(36,17,25,.001)), linear-gradient(to bottom, transparent, var(--paper) 96%);
  opacity:.0; pointer-events:none;
}
.hero__disc{
  position:absolute; width:min(58vw,620px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(190,140,131,.5), rgba(190,140,131,.06) 66%);
  left:-14%; top:6%; filter:blur(4px); pointer-events:none;
}
.hero__in{
  position:relative; display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero h1{ color:#fff }
.hero h1 em{ color:var(--rose-soft) }
.hero__sub{ margin-top:24px; font-size:1.08rem; color:rgba(255,255,255,.76); max-width:50ch }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px }
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-top:34px; padding-top:26px; border-top:1px solid var(--line-l);
  color:rgba(255,255,255,.8);
}
.rate{ display:inline-flex; align-items:center; gap:9px; font-size:.9rem }
.rate strong{ font-family:var(--display); font-size:1.28rem; color:#fff }
.rate__n{ color:rgba(255,255,255,.62) }

.hero__shot{ position:relative }
.hero__shot img{
  width:100%; aspect-ratio:5/6; object-fit:cover; object-position:center 42%;
  border-radius:var(--r-lg) var(--r-lg) 130px var(--r-lg);
  box-shadow:var(--shadow-lg);
}
.hero__shot figcaption{
  margin-top:14px; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* =========================================================
   CARTA DE COLOR (la firma)
   ========================================================= */
.carta{ background:var(--paper); padding:var(--section) 0 clamp(60px,7vw,86px); position:relative }
.carta__head{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,64px);
  align-items:end; margin-bottom:clamp(36px,4.5vw,56px);
}
/* el tono vivo del swatch enfocado tiñe la sección */
.carta .eyebrow, .carta h2 em{ color:var(--accent); transition:color .45s var(--ease) }
.carta .arrow{ border-color:var(--accent); color:var(--accent) }
.carta .arrow:hover{ background:var(--accent); border-color:var(--accent); color:#fff }
.carta__note{ display:flex; flex-direction:column; gap:20px; align-items:flex-start }
.carta__note p{ color:var(--muted) }
.carta__arrows{ display:flex; gap:10px }

.rail{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px var(--gutter) 30px;
  scrollbar-width:thin; scrollbar-color:var(--rose-soft) transparent;
}
.rail::-webkit-scrollbar{ height:6px }
.rail::-webkit-scrollbar-thumb{ background:var(--rose-soft); border-radius:99px }
.sw{
  position:relative; flex:0 0 clamp(232px, 24vw, 300px); scroll-snap-align:center;
  aspect-ratio:3/4.35; border-radius:200px 200px var(--r-md) var(--r-md);
  overflow:hidden; background:var(--blush); cursor:pointer;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.sw:hover, .sw:focus-visible{ transform:translateY(-8px); box-shadow:var(--shadow-md) }
.sw--photo img{ width:100%; height:100%; object-fit:cover; object-position:center 45% }
.sw--chip{ cursor:default }
.sw--chip .sw__chip{ position:absolute; inset:0; background:var(--chip) }
.sw--chip .sw__chip::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(118deg, rgba(255,255,255,.34) 0 28%, transparent 42%);
}
.sw__label{
  position:absolute; inset:auto 0 0; padding:52px 20px 20px; color:#fff;
  background:linear-gradient(to top, rgba(24,10,15,.86), rgba(24,10,15,.42) 45%, transparent);
}
.sw__no{ font-family:var(--display); font-size:.78rem; letter-spacing:.18em; opacity:.7 }
.sw__label h3{ color:#fff; font-size:1.42rem; margin-top:2px }
.sw__label p{ font-size:.82rem; color:rgba(255,255,255,.78); margin-top:3px; line-height:1.35 }
.sw.is-live{ box-shadow:0 0 0 2px var(--accent), var(--shadow-md) }

.carta__foot{
  text-align:center; color:var(--muted); font-size:.95rem;
  padding-top:6px;
}

/* =========================================================
   TARIFA (carta de precios)
   ========================================================= */
.tarifa{ background:var(--blush); padding:var(--section) 0; border-top:1px solid var(--hair) }
.tarifa__head{ max-width:62ch; margin-bottom:clamp(40px,5vw,66px) }
.tarifa__head h2{ margin-bottom:18px }

.menu{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.6vw,54px) }
.menu__t{
  font-family:var(--sans); font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; color:var(--rose-d); padding-bottom:14px;
  border-bottom:1px solid var(--line); margin-bottom:6px;
}
.price{ list-style:none }
.price li{
  display:flex; align-items:baseline; gap:8px;
  padding:13px 0; border-bottom:1px solid var(--hair);
}
.price__n{ color:var(--ink); font-size:.98rem; font-weight:500 }
.price__l{ flex:1 1 auto; border-bottom:1px dotted rgba(36,17,25,.28); transform:translateY(-4px); min-width:18px }
/* el € de Bodoni es demasiado fino a este tamaño: el precio va en la sans */
.price__v{ font-size:.98rem; font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums }
.tarifa__foot{ margin-top:34px; font-size:.88rem; color:var(--muted) }

/* =========================================================
   EQUIPO (bloque oscuro)
   ========================================================= */
.equipo{ background:var(--plum-2); color:rgba(255,255,255,.78); padding:var(--section) 0 }
.equipo__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,86px); align-items:center }
.equipo h2{ color:#fff; margin-bottom:24px }
.equipo h2 em{ color:var(--rose) }
.equipo__copy p + p{ margin-top:16px }
.equipo__copy .btn{ margin-top:30px; --bd:var(--line-l); --fg:#fff }
.equipo__copy .btn:hover{ --bd:var(--rose); --fg:var(--rose-soft) }

.team{ list-style:none; border-top:1px solid var(--line-l) }
.team li{ display:flex; align-items:center; gap:20px; padding:24px 0; border-bottom:1px solid var(--line-l) }
.team__ini{
  width:56px; height:56px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--rose); color:#fff; font-family:var(--display); font-size:1.5rem;
}
.team h3{ color:#fff; font-size:1.24rem }
.team p{ font-size:.9rem; color:rgba(255,255,255,.62); margin-top:2px }

/* =========================================================
   TALLERES
   ========================================================= */
.talleres{ background:var(--paper); padding:var(--section) 0 }
.talleres__in{
  display:grid; grid-template-columns:.62fr .62fr 1.1fr;
  gap:clamp(18px,2.6vw,34px); align-items:center;
}
.talleres__media{ border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-md) }
.talleres__media img{ width:100%; aspect-ratio:9/15; object-fit:cover }
.talleres__media--2{ transform:translateY(28px) }
.talleres__copy h2{ margin-bottom:18px }
.talleres__copy > p{ color:var(--body) }
.ticks{ list-style:none; margin:20px 0 }
.ticks li{ position:relative; padding:0 0 0 26px; margin-bottom:14px; font-size:.98rem }
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em; width:10px; height:10px;
  border-radius:50%; background:var(--rose);
}
.ticks strong{ color:var(--ink); font-weight:600 }
.note{ font-size:.88rem; color:var(--cherry); font-weight:600; margin-bottom:22px }

/* =========================================================
   RESEÑAS
   ========================================================= */
.opi{ background:var(--blush); padding:var(--section) 0; border-top:1px solid var(--hair) }
.opi__head{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,60px);
  align-items:center; margin-bottom:clamp(34px,4vw,52px);
}
.opi__score{ text-align:center }
.opi__score strong{ display:block; font-family:var(--display); font-size:4.2rem; color:var(--ink); line-height:1 }
.opi__score p{ font-size:.82rem; color:var(--muted); max-width:20ch; margin:8px auto 0; line-height:1.4 }

.opi__slide{ padding:2px }
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.card{
  background:var(--cream); border:1px solid var(--hair); border-radius:var(--r-md);
  padding:28px 26px; box-shadow:var(--shadow-sm);
}
.card p{ font-family:var(--display); font-size:1.18rem; line-height:1.42; color:var(--ink) }
.card footer{
  display:flex; align-items:center; gap:11px; margin-top:20px;
  font-size:.88rem; font-weight:600; color:var(--body);
}
.ini{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--rose-soft); color:var(--plum); font-weight:700; font-size:.85rem; flex:none;
}
.opi__ctrls{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:28px }
.dots{ display:flex; gap:8px }
.dots button{
  width:8px; height:8px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:rgba(36,17,25,.2); transition:background-color .3s, transform .3s;
}
.dots button.active{ background:var(--rose); transform:scale(1.35) }

/* =========================================================
   VISÍTANOS
   ========================================================= */
.visita{ background:var(--paper); padding:var(--section) 0 }
.visita__in{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,4.5vw,70px) }
.visita h2{ margin-bottom:34px }
.info-block{ padding:24px 0; border-top:1px solid var(--line) }
.info-block:last-child{ border-bottom:1px solid var(--line) }
.info-block h3{
  font-family:var(--sans); font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; color:var(--rose-d); margin-bottom:12px;
}
.info-block p{ color:var(--ink) }
.info-block .btn{ margin-top:16px }
.info-block a:hover{ color:var(--rose-d) }

.hours{ list-style:none }
.hours .row{ display:flex; justify-content:space-between; gap:16px; padding:8px 0; font-size:.94rem; border-bottom:1px solid var(--hair) }
.hours .row:last-child{ border-bottom:0 }
.hours .row span:first-child{ color:var(--muted) }
.hours .row span:last-child{ color:var(--ink); font-variant-numeric:tabular-nums }
.hours .row.today{ font-weight:700 }
.hours .row.today span{ color:var(--ink) }

.visita__side{ display:flex; flex-direction:column; gap:24px }
.map{ border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-md); background:var(--blush) }
.map iframe{ display:block; width:100%; height:300px; border:0; filter:grayscale(.22) contrast(1.02) }

.cita{
  background:var(--cream); border:1px solid var(--hair); border-radius:var(--r-md);
  padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-sm);
}
.cita h3{ font-size:1.6rem }
.cita__sub{ font-size:.9rem; color:var(--muted); margin:6px 0 20px }
.cita label{ display:block; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:14px }
.cita input, .cita select{
  display:block; width:100%; margin-top:7px; padding:12px 14px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:.98rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink);
  transition:border-color .25s var(--ease);
}
.cita input:focus, .cita select:focus{ border-color:var(--rose); outline:none }
.cita input.invalid{ border-color:var(--cherry) }
.cita__legal{ font-size:.76rem; color:var(--muted); margin-top:14px; text-align:center }

/* =========================================================
   FOOTER
   ========================================================= */
.ftr{ background:var(--plum); color:rgba(255,255,255,.66); padding:clamp(56px,7vw,84px) 0 0 }
.ftr__in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:48px }
.ftr__brand img{ border-radius:50%; margin-bottom:18px }
.ftr__brand p{ font-size:.92rem; max-width:34ch }
.ftr h4{ font-family:var(--sans); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--rose); margin-bottom:16px }
.ftr__nav{ display:flex; flex-direction:column; gap:9px }
.ftr__nav a, .ftr__col a{ font-size:.93rem; transition:color .25s var(--ease) }
.ftr__nav a:hover, .ftr__col a:hover{ color:var(--rose-soft) }
.ftr__col p{ font-size:.93rem } .ftr__col p + p{ margin-top:9px }
.ftr__bar{
  display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:14px 28px;
  padding:22px 0 26px; border-top:1px solid var(--line-l); font-size:.83rem;
}
.ftr__legal{ display:flex; gap:20px; order:0 }
.ftr__legal a:hover{ color:var(--rose-soft) }
.ftr__bar p{ color:rgba(255,255,255,.45) }

/* =========================================================
   CALL-BAR MÓVIL + LIGHTBOX
   ========================================================= */
.callbar{ display:none }
.lightbox img{ max-width:min(92vw,860px); max-height:86vh; border-radius:var(--r-md) }
.lightbox__close{
  position:absolute; top:18px; right:20px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff;
  font-size:1.5rem; line-height:1; cursor:pointer;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1040px){
  .hero__in{ grid-template-columns:1fr; gap:44px }
  .hero__shot img{ aspect-ratio:16/11; object-position:center 40%; border-radius:var(--r-lg) }
  .carta__head{ grid-template-columns:1fr; align-items:start }
  .menu{ grid-template-columns:1fr 1fr }
  .equipo__in, .visita__in{ grid-template-columns:1fr; gap:44px }
  .talleres__in{ grid-template-columns:1fr 1fr; }
  .talleres__copy{ grid-column:1 / -1 }
  .talleres__media--2{ transform:none }
  .ftr__in{ grid-template-columns:1fr 1fr }
}

@media (max-width:760px){
  body{ font-size:16px }
  html{ scroll-padding-top:72px }
  .hdr{ padding:10px 0 }
  .hdr__cta .btn--sm{ display:none }
  .burger{ display:block }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    background:var(--plum); flex-direction:column; gap:6px;
    padding:96px 30px 30px; transform:translateX(100%);
    transition:transform .38s var(--ease); box-shadow:var(--shadow-lg);
  }
  .nav.open{ transform:none }
  .nav a{ font-size:1.15rem; font-family:var(--display); color:#fff; text-shadow:none; padding-block:12px; border-bottom:1px solid var(--line-l) }
  .hdr.scrolled .nav a{ color:#fff }
  .hdr.scrolled .nav a:hover, .hdr.scrolled .nav a.active{ color:var(--rose-soft) }

  .hero{ padding-top:104px }
  .hero__ctas .btn{ flex:1 1 100%; }
  .menu{ grid-template-columns:1fr }
  .cards{ grid-template-columns:1fr }
  .cards .card:last-child{ display:none }
  .opi__head{ grid-template-columns:1fr; text-align:left; gap:22px }
  .opi__score{ display:flex; align-items:baseline; gap:14px; text-align:left }
  .opi__score strong{ font-size:3rem }
  .opi__score p{ margin:0; max-width:26ch }
  .talleres__in{ grid-template-columns:1fr 1fr }
  .ftr__in{ grid-template-columns:1fr; gap:32px; padding-bottom:34px }
  .ftr__bar{ justify-content:flex-start }

  body{ padding-bottom:64px }
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; inset:auto 0 0; z-index:90;
    background:var(--line-l); background-clip:content-box;
  }
  .callbar a{
    padding:16px 8px; text-align:center; font-weight:700; font-size:.95rem;
    background:var(--plum); color:#fff;
  }
  .callbar__wa{ background:#1FA855 }
}

@media (max-width:420px){
  .brand__txt{ font-size:1rem }
  .sw{ flex-basis:78vw }
}