/* ═══════════════════════════════════════════════════════════
   Barbería The Bearded · Alhama de Murcia
   Dirección de arte: "LA TARIFA"
   Paleta muestreada de su propio local: fachada negra, pared de
   palé, cromo del sillón y el ámbar de las bombillas de filamento.
   ═══════════════════════════════════════════════════════════ */

:root{
  --tinta:#0B0B0C;
  --tinta-2:#141518;
  --pale:#C0894E;
  --pale-hondo:#7A4F26;        /* etiquetas sobre fondo claro */
  --pale-texto:#33220F;        /* texto apagado SOBRE el panel de madera (5,03:1 medido) */
  --brasa-oscura:#A33D14;      /* la brasa sobre fondo claro (5,3:1) */
  --cromo:#C9CFD4;
  --bruma:#E4EAEC;            /* blanco FRÍO a propósito */
  --brasa:#E2622A;

  --claro:#E4EAEC;
  --claro-tenue:rgba(228,234,236,.62);
  --oscuro-tenue:#4A5157;

  --linea-clara:rgba(228,234,236,.16);
  --linea-oscura:rgba(11,11,12,.14);

  --f-display:'Archivo', system-ui, sans-serif;
  --f-cuerpo:'Manrope', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;

  --wrap:1180px;
  --pad:clamp(1.25rem, 5vw, 3rem);
  --e:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--f-cuerpo);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.62;
  color:var(--tinta);
  background:var(--bruma);
}
img{max-width:100%; display:block}
a{color:inherit}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

/* la cabecera es fija: sin esto, saltar por el menú esconde el título debajo */
section[id]{scroll-margin-top:90px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brasa); color:var(--tinta); padding:.75rem 1.25rem;
  font-weight:700; border-radius:0;
}
.skip:focus{left:0}

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--brasa); outline-offset:3px;
}

/* ─────────── etiquetas y títulos ─────────── */
.etiqueta{
  font-family:var(--f-mono);
  font-size:.75rem;                 /* suelo 12px: por debajo salta undersized-ui-text */
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pale-hondo);
  margin:0 0 1rem;
}
.etiqueta--claro{color:var(--pale)}

.sec-title{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.5rem,6vw,4.5rem);
  line-height:.92; letter-spacing:-.035em;
  margin:0 0 1rem;
}
.sec-title--claro{color:var(--claro)}
.sec-lead{max-width:52ch; color:var(--oscuro-tenue); margin:0}
.sec-head{margin-bottom:clamp(2.5rem,6vw,4rem); max-width:60ch}

/* ─────────── botones ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 1.75rem;
  font-family:var(--f-cuerpo); font-weight:700; font-size:1rem;
  letter-spacing:-.005em; text-decoration:none;
  border:2px solid transparent; border-radius:0; cursor:pointer;
  transition:background-color .18s var(--e), color .18s var(--e),
             border-color .18s var(--e), transform .12s var(--e);
}
.btn--sm{padding:.7rem 1.15rem; font-size:.9rem}
.btn--brasa{background:var(--brasa); color:var(--tinta); border-color:var(--brasa)}
.btn--tinta{background:var(--tinta); color:var(--claro); border-color:var(--tinta)}
.btn--ghost{background:transparent; color:var(--claro); border-color:rgba(228,234,236,.5)}
.btn--ghost-dark{color:var(--tinta); border-color:rgba(11,11,12,.35)}

@media (hover:hover){
  .btn--brasa:hover{background:#F0763C; border-color:#F0763C}
  .btn--tinta:hover{background:var(--pale-hondo); border-color:var(--pale-hondo); color:#fff}
  .btn--ghost:hover{background:var(--claro); color:var(--tinta); border-color:var(--claro)}
  .btn--ghost-dark:hover{background:var(--tinta); color:var(--claro); border-color:var(--tinta)}
}
.btn:active{transform:scale(.97)}

.link-flecha{
  font-weight:700; text-decoration:none; color:var(--tinta);
  border-bottom:2px solid rgba(11,11,12,.3); padding-bottom:.15rem;
  transition:border-color .18s var(--e);
}
@media (hover:hover){ .link-flecha:hover{border-color:var(--tinta)} }
.link-flecha::after{content:" →"}

/* ─────────── cabecera ─────────── */
header[data-header]{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background-color .28s var(--e), border-color .28s var(--e);
  border-bottom:1px solid transparent;
}
header[data-header].scrolled{
  background:rgba(11,11,12,.94);
  border-bottom-color:var(--linea-clara);
  backdrop-filter:blur(10px);
}
.bar{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:1rem var(--pad);
  display:flex; align-items:center; gap:1.5rem;
}
.wordmark{
  font-family:var(--f-display); font-weight:900;
  font-size:1.3rem; letter-spacing:-.04em; text-decoration:none;
  color:var(--claro); line-height:1; white-space:nowrap;
}
.wordmark__the{color:var(--brasa)}
.wordmark__b{margin-left:.2em}

#nav{margin-left:auto; display:flex; gap:1.6rem}
#nav a{
  font-size:.9rem; font-weight:500; text-decoration:none; color:var(--claro-tenue);
  padding:.35rem 0; border-bottom:2px solid transparent;
  transition:color .18s var(--e), border-color .18s var(--e);
}
#nav a.active{color:var(--claro); border-bottom-color:var(--brasa)}
@media (hover:hover){ #nav a:hover{color:var(--claro)} }

.burger{
  display:none; margin-left:auto; width:44px; height:44px;
  background:none; border:0; cursor:pointer; padding:10px;
  flex-direction:column; justify-content:space-between;
}
.burger span{display:block; height:2px; background:var(--claro); transition:transform .22s var(--e), opacity .22s var(--e)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* ═══════════ PORTADA ═══════════ */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end;
      overflow:hidden; background:var(--tinta)}
.hero__media{position:absolute; inset:0}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(11,11,12,.94) 0%, rgba(11,11,12,.72) 34%, rgba(11,11,12,.22) 62%, rgba(11,11,12,.42) 100%),
    linear-gradient(to right, rgba(11,11,12,.72) 0%, rgba(11,11,12,.18) 55%, rgba(11,11,12,.05) 100%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad) clamp(3.5rem,9vh,6rem);
}
.hero__title{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(4rem,13vw,8.25rem);      /* tope real 132px */
  line-height:.82; letter-spacing:-.05em;
  color:var(--claro); margin:0 0 1.5rem;
  text-transform:uppercase;
  text-shadow:0 2px 40px rgba(11,11,12,.5);
}
.hero__claim{
  max-width:34ch; font-size:clamp(1.05rem,1rem + .5vw,1.35rem);
  color:var(--claro); margin:0 0 2.25rem; text-shadow:0 1px 16px rgba(11,11,12,.6);
}
.hero__actions{display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2rem}
.hero__status{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.04em;
  color:var(--claro); margin:0;
  background:rgba(11,11,12,.55); border:1px solid var(--linea-clara);
  padding:.55rem .95rem;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--cromo); flex:none}
[data-schedule-status].open .dot{background:#5FD08A; box-shadow:0 0 0 4px rgba(95,208,138,.2)}
[data-schedule-status].closed .dot{background:var(--brasa); box-shadow:0 0 0 4px rgba(226,98,42,.18)}

/* ═══════════ CIFRAS ═══════════ */
.cifras{background:var(--bruma); padding:clamp(2.5rem,6vw,3.5rem) 0; border-bottom:1px solid var(--linea-oscura)}
.cifras__grid{display:grid; gap:2rem; grid-template-columns:repeat(3,1fr)}
.cifra{display:flex; flex-direction:column; gap:.35rem}
.cifra__n{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.5rem,5vw,3.5rem); line-height:1; letter-spacing:-.04em;
  display:flex; align-items:baseline; gap:.1em;
}
.cifra__u{color:var(--brasa-oscura); font-size:.6em}
.cifra__t{font-size:.9rem; color:var(--oscuro-tenue)}

/* ═══════════ PRÓTESIS CAPILAR · panel de madera ═══════════ */
.capilar{background:var(--pale); padding:clamp(4rem,10vw,7rem) 0; color:var(--tinta)}
.capilar .etiqueta{color:var(--pale-texto)}
.capilar__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.capilar__title{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(2.25rem,5.4vw,4rem); line-height:.94; letter-spacing:-.04em;
  margin:0 0 1.25rem; max-width:14ch;
}
.capilar__lead{font-size:clamp(1.05rem,1rem + .4vw,1.25rem); margin:0 0 1rem; max-width:46ch}
.capilar__nota{color:var(--pale-texto); margin:0 0 2rem; max-width:46ch}
.capilar__cta{display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center}
.capilar__foto{margin:0}
.capilar__foto img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 45%}

/* ═══════════ TARIFA · LA FIRMA ═══════════ */
.tarifa{background:var(--tinta); color:var(--claro); padding:clamp(4rem,10vw,7.5rem) 0}
.tarifa__head{margin-bottom:clamp(2.5rem,6vw,4rem)}
.tarifa__title{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(3.5rem,11vw,7rem); line-height:.86; letter-spacing:-.05em;
  text-transform:uppercase; margin:0 0 1rem; color:var(--claro);
}
.tarifa__sub{color:var(--claro-tenue); max-width:48ch; margin:0}

.grupo{margin-bottom:clamp(2.5rem,6vw,4rem)}
.grupo__t{
  font-family:var(--f-mono); font-size:.75rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--pale);
  margin:0 0 1rem; padding-bottom:.85rem; border-bottom:1px solid var(--linea-clara);
}
.filas{list-style:none; margin:0; padding:0}

.fila{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.9rem 0; text-decoration:none; color:var(--claro);
  border-bottom:1px solid var(--linea-clara);
  position:relative;
  transition:color .18s var(--e), padding-left .18s var(--e);
}
.fila::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--brasa); transform:scaleY(0); transform-origin:bottom;
  transition:transform .2s var(--e);
}
@media (hover:hover){
  .fila:hover{color:var(--brasa); padding-left:1rem}
  .fila:hover::before{transform:scaleY(1); transform-origin:top}
  .fila:hover .fila__d{color:inherit; opacity:.75}
  .fila:hover .fila__pts{border-bottom-color:currentColor; opacity:.5}
}
.fila:active{transform:scale(.995)}

.fila__n{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.05rem,1rem + .45vw,1.4rem); letter-spacing:-.02em;
  flex:none; max-width:60%;
}
.fila__pts{
  flex:1 1 auto; min-width:1.5rem; align-self:flex-end;
  border-bottom:2px dotted rgba(228,234,236,.28); transform:translateY(-.35em);
  transition:border-color .18s var(--e), opacity .18s var(--e);
}
.fila__d{
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.06em;
  color:var(--claro-tenue); flex:none; white-space:nowrap;
  transition:color .18s var(--e), opacity .18s var(--e);
}
.fila__p{
  font-family:var(--f-mono); font-weight:700;
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2rem);   /* filas normales: ~32px */
  line-height:1; letter-spacing:-.04em; flex:none;
  min-width:3.2em; text-align:right;
}
.eur{font-size:.5em; margin-left:.12em; vertical-align:super; opacity:.8}

/* la fila cabecera de cada grupo: aquí es donde el precio se hace cartel */
.fila--lead{padding:1.5rem 0 1.6rem; border-bottom-width:2px; border-bottom-color:rgba(228,234,236,.28)}
.fila--lead .fila__n{font-weight:900; font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem)}
.fila--lead .fila__p{font-size:clamp(2.75rem,2rem + 3.4vw,4rem)}   /* 64px */
.fila--lead .fila__pts{border-bottom-color:rgba(228,234,236,.4)}

.tag{
  font-family:var(--f-mono); font-size:.75rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--pale); border:1px solid rgba(192,137,78,.5);
  padding:.15rem .5rem; margin-left:.75rem; white-space:nowrap;
  display:inline-block; transform:translateY(-.15em);
}
@media (hover:hover){ .fila:hover .tag{color:inherit; border-color:currentColor; opacity:.8} }

.tarifa__pie{color:var(--claro-tenue); max-width:52ch; margin:0 0 2rem}
.tarifa__cta{display:flex; flex-wrap:wrap; gap:.85rem}

/* ═══════════ EL LOCAL ═══════════ */
.local{background:var(--bruma); padding:clamp(4rem,10vw,7rem) 0}
.galeria{display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; grid-auto-rows:200px}
.shot{margin:0; overflow:hidden; cursor:zoom-in; background:var(--tinta-2)}
.shot--alto{grid-row:span 2}
.shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--e), filter .3s var(--e);
}
@media (hover:hover){ .shot:hover img{transform:scale(1.05); filter:brightness(1.06)} }

/* ═══════════ OPINIONES ═══════════ */
.opiniones{background:var(--tinta-2); color:var(--claro); padding:clamp(4rem,10vw,7rem) 0}
.op__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.op{
  margin:0; padding:2rem; background:rgba(228,234,236,.045);
  border-left:3px solid var(--pale);
  display:flex; flex-direction:column; gap:1rem;
}
.op__estrellas{color:var(--brasa); letter-spacing:.15em; margin:0; font-size:.95rem}
.op__txt{margin:0; font-size:1.05rem; line-height:1.6}
.op__quien{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em; color:var(--claro-tenue); text-transform:uppercase}

/* ═══════════ CÓMO LLEGAR ═══════════ */
.visitanos{background:var(--bruma); padding:0 0 0}
.visitanos__foto{margin:0; height:clamp(240px,38vh,420px); overflow:hidden}
.visitanos__foto img{width:100%; height:100%; object-fit:cover; object-position:center 58%}
.visitanos__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem);
  padding-top:clamp(3rem,7vw,5rem); padding-bottom:clamp(3rem,7vw,5rem);
}
.ficha__dir{font-size:1.15rem; font-weight:700; margin:0 0 .75rem; line-height:1.5}
.ficha__extra{color:var(--oscuro-tenue); margin:0 0 2rem}
.ficha__cta{display:flex; flex-wrap:wrap; gap:.85rem}

.horario__t{
  font-family:var(--f-mono); font-size:.75rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pale-hondo);
  margin:0 0 1rem; padding-bottom:.75rem; border-bottom:1px solid var(--linea-oscura);
}
.horario__tabla .row{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--linea-oscura);
  font-size:.95rem;
}
.horario__tabla .row span:first-child{font-weight:700}
.horario__tabla .row span:last-child{font-family:var(--f-mono); font-size:.8rem; color:var(--oscuro-tenue); text-align:right}
.horario__tabla .row.today{
  background:rgba(226,98,42,.1);
  box-shadow:inset 3px 0 0 var(--brasa);
  padding-left:.75rem; padding-right:.75rem;
}
.cerrado{opacity:.7}
.horario__estado{
  display:inline-flex; align-items:center; gap:.6rem; margin:1.25rem 0 0;
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.04em; color:var(--tinta);
  border:1px solid var(--linea-oscura); padding:.55rem .95rem;
}

.mapa{height:clamp(300px,42vh,440px); background:var(--tinta-2)}
.mapa iframe{width:100%; height:100%; border:0; display:block; filter:grayscale(1) contrast(1.1)}

/* ═══════════ PIE ═══════════ */
.pie{background:var(--tinta); color:var(--claro); padding:clamp(3rem,7vw,4.5rem) 0 1.5rem}
.pie__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-bottom:2.5rem}
.pie__marca{font-family:var(--f-display); font-weight:900; font-size:1.75rem; letter-spacing:-.04em; margin:0 0 .5rem}
.pie__h{
  font-family:var(--f-mono); font-size:.75rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pale); margin:0 0 .75rem;
}
.pie__txt{color:var(--claro-tenue); margin:0 0 .5rem; font-size:.95rem}
.pie p a{color:var(--claro); text-decoration:none; border-bottom:1px solid var(--linea-clara); font-size:.95rem}
@media (hover:hover){ .pie p a:hover{border-bottom-color:var(--brasa); color:var(--brasa)} }
.pie__grid p{margin:0 0 .5rem}

.pie__base{border-top:1px solid var(--linea-clara); padding-top:1.5rem}
.pie__legal{
  display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center;
  font-size:.8rem; color:var(--claro-tenue); margin:0 0 .75rem;
}
.pie__legal a{color:var(--claro-tenue); text-decoration:none; border-bottom:1px solid transparent}
@media (hover:hover){ .pie__legal a:hover{color:var(--claro); border-bottom-color:var(--linea-clara)} }
.demo-aviso{font-size:.75rem; color:rgba(228,234,236,.45); margin:0; line-height:1.5}

/* ═══════════ BARRA MÓVIL ═══════════ */
.callbar{display:none}

/* ═══════════ LIGHTBOX ═══════════ */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(11,11,12,.96);
  align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
}
.lightbox:not([hidden]){display:flex}
.lightbox img{max-width:100%; max-height:88vh; object-fit:contain}
.lightbox__close{
  position:absolute; top:1rem; right:1.25rem; z-index:2;
  width:48px; height:48px; font-size:2rem; line-height:1;
  background:none; border:0; color:var(--claro); cursor:pointer;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:980px){
  .capilar__grid,.visitanos__grid{grid-template-columns:1fr}
  .capilar__foto{order:-1}
  .pie__grid{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:repeat(2,1fr); grid-auto-rows:180px}
}

@media (max-width:820px){
  .hide-sm{display:none}
  .burger{display:flex}
  #nav{
    position:fixed; inset:0 0 auto; top:0; z-index:-1;
    flex-direction:column; gap:0; margin:0;
    background:var(--tinta); padding:6rem var(--pad) 2rem;
    transform:translateY(-100%); transition:transform .3s var(--e);
    border-bottom:1px solid var(--linea-clara);
  }
  #nav.open{transform:translateY(0); z-index:1}
  #nav a{padding:1rem 0; border-bottom:1px solid var(--linea-clara); font-size:1.15rem}
  #nav a.active{border-bottom-color:var(--brasa)}

  .cifras__grid{grid-template-columns:1fr; gap:1.25rem}
  .cifra{flex-direction:row; align-items:baseline; gap:.85rem}
  .cifra__n{font-size:2.25rem}
  .cifra__t{font-size:.85rem}

  .op__grid{grid-template-columns:1fr}

  /* barra fija de acción: el pulgar siempre encima de reservar */
  .callbar{
    display:grid; grid-template-columns:1fr 1.35fr; gap:0;
    position:fixed; inset:auto 0 0; z-index:90;
    border-top:1px solid var(--linea-clara);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .callbar__a{
    padding:1.05rem .75rem; text-align:center; text-decoration:none;
    font-weight:700; font-size:1rem;
  }
  .callbar__a--ghost{background:var(--tinta); color:var(--claro)}
  .callbar__a--brasa{background:var(--brasa); color:var(--tinta)}
  .callbar__a:active{opacity:.85}
  body{padding-bottom:64px}
  .pie{padding-bottom:5rem}
}

@media (max-width:640px){
  .hero__media img{object-position:center 38%}
  /* 16.5vw deja ~10% de aire: con 17vw la palabra "Bearded" roza el borde y,
     mientras carga Archivo, la fuente de respaldo la corta. */
  .hero__title{font-size:clamp(3.25rem,16.5vw,5rem); letter-spacing:-.055em}
  .hero__inner{padding-inline:1.1rem}
  .hero__actions{flex-direction:column; align-items:stretch}
  .hero__actions .btn{width:100%}

  .galeria{grid-template-columns:1fr 1fr; grid-auto-rows:140px; gap:.5rem}

  /* tarifa en móvil: dos líneas, sin puntitos, el precio manda */
  .fila{flex-wrap:wrap; gap:.25rem .6rem; padding:1rem 0}
  .fila__n{max-width:100%; flex:1 1 100%; font-size:1.15rem}
  .fila__pts{display:none}
  .fila__p{font-size:2.25rem; min-width:0; text-align:left; order:2}
  .fila__d{order:3; margin-left:auto; align-self:center}
  .fila--lead .fila__n{font-size:1.5rem}
  .fila--lead .fila__p{font-size:3.25rem}
  .tag{margin-left:.5rem}

  .pie__grid{grid-template-columns:1fr; gap:2rem}
  .op{padding:1.5rem}
}