/* ============================================================
   menús · Lleva los menús de la guardería a tu casa
   Identidad: morado #92278F · magenta #EC008C · naranja #F7941E
   Tipografía: Google Sans (Google Fonts, variable 400–700)
   ============================================================ */

:root{
  /* color */
  --morado:#92278F; --magenta:#EC008C; --naranja:#F7941E;
  --morado-s:#F5EAF5; --magenta-s:#FDE8F3; --naranja-s:#FEF2E2;
  --tinta:#1F1729; --texto:#4A3F5C; --suave:#83799A;
  --linea:#EFEAF3; --fondo:#FFFFFF; --gris:#F7F5F9; --tarjeta:#FFFFFF;
  --sombra:0 1px 2px rgba(31,23,41,.04), 0 10px 30px -20px rgba(31,23,41,.4);
  --r:18px; --max:1120px;
  --sb:env(safe-area-inset-bottom,0px); --st:env(safe-area-inset-top,0px);
  --tabs:70px;

  /* tipografía */
  --fuente:"Google Sans","Google Sans Text","Product Sans",ui-rounded,-apple-system,
           "Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:700 clamp(30px,8.2vw,42px)/1.06 var(--fuente);
  --h1:700 clamp(25px,6.8vw,34px)/1.14 var(--fuente);
  --h2:700 clamp(19px,4.6vw,22px)/1.2 var(--fuente);
  --h3:700 16.5px/1.25 var(--fuente);
  --card:600 16px/1.28 var(--fuente);
  --body:400 15.5px/1.6 var(--fuente);
  --small:500 13px/1.45 var(--fuente);
  --micro:700 11.5px/1.3 var(--fuente);
  color-scheme:light;
}
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --morado:#D79AD4; --magenta:#FF74BC; --naranja:#FFBB63;
  --morado-s:#2C2334; --magenta-s:#34212D; --naranja-s:#312718;
  --tinta:#F8F4FA; --texto:#DDD3E8; --suave:#A79BBB;
  --linea:#2F2839; --fondo:#121019; --gris:#1C1724; --tarjeta:#1F1928;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -22px #000;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font:var(--body); letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:break-word; padding-bottom:calc(var(--tabs) + var(--sb));
}
h1,h2,h3,h4{color:var(--tinta); margin:0; text-wrap:balance}
h1{font:var(--h1); letter-spacing:-.032em}
h2{font:var(--h2); letter-spacing:-.024em}
h3{font:var(--h3); letter-spacing:-.018em}
p{margin:0 0 .9em}
a{color:var(--morado); text-decoration:none}
:focus-visible{outline:3px solid var(--magenta); outline-offset:2px; border-radius:10px}
img{max-width:100%; height:auto; display:block}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0; letter-spacing:inherit}
ul,ol{margin:0; padding:0; list-style:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* rótulo superior de sección (eyebrow) */
.rotulo{font:var(--micro); letter-spacing:.16em; text-transform:uppercase; color:var(--magenta); display:block; margin-bottom:8px}
.rotulo.gris{color:var(--suave)}

/* ---------- barra superior ---------- */
.top{background:var(--fondo); padding-top:var(--st)}
.top .wrap{display:flex; align-items:center; gap:12px; min-height:58px}
.top .marca{display:flex; align-items:center; margin-right:auto}
.top .marca img{height:25px; width:auto}
.icono{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--gris); color:var(--tinta); flex:0 0 auto}
.icono svg{width:20px; height:20px}

/* interruptor de tema: control segmentado sol / luna */
.tema{display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--gris); flex:0 0 auto}
.tema button{width:36px; height:32px; border-radius:999px; display:grid; place-items:center;
  color:var(--suave); transition:background .16s ease, color .16s ease}
.tema button svg{width:17px; height:17px}
.tema button[aria-pressed="true"]{background:var(--fondo); color:var(--magenta); box-shadow:0 1px 3px rgba(31,23,41,.14)}
:root[data-tema="oscuro"] .tema button[aria-pressed="true"]{background:var(--tarjeta); box-shadow:0 1px 3px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.tema button{transition:none}}
/* sobre el degradado de la ficha */
.portada .tema{background:rgba(255,255,255,.22); backdrop-filter:blur(6px)}
.portada .tema button{color:rgba(255,255,255,.85)}
.portada .tema button[aria-pressed="true"],
:root[data-tema="oscuro"] .portada .tema button[aria-pressed="true"]{background:#fff; color:var(--magenta); box-shadow:none}
.top.borde{border-bottom:1px solid var(--linea)}

/* ---------- portada de inicio ---------- */
.hero{text-align:center; padding:10px 0 4px}
.hero img{width:min(200px,52vw); margin:0 auto}

/* ---------- encabezado de página ---------- */
.titulo{padding:8px 0 16px}
.titulo h1{font:var(--display); letter-spacing:-.038em; color:var(--tinta); max-width:15ch}
.titulo h1 em{font-style:normal; color:var(--magenta)}
.titulo p{margin:10px 0 0; color:var(--suave); font:var(--body); max-width:42ch}

/* ---------- buscador ---------- */
.buscador{display:flex; align-items:center; gap:8px; background:var(--gris); border-radius:999px; padding:5px 5px 5px 16px}
.buscador svg.lupa{width:19px; height:19px; color:var(--suave); flex:0 0 auto}
.buscador input{flex:1; min-width:0; border:0; background:none; font:500 16px/1.4 var(--fuente); color:var(--tinta); padding:12px 0; min-height:44px; letter-spacing:-.01em}
.buscador input::placeholder{color:var(--suave); font-weight:400}
.buscador input:focus{outline:0}
.buscador .x{width:34px; height:34px; border-radius:50%; color:var(--suave); font-size:19px; line-height:1; display:grid; place-items:center}
.f-btn{width:46px; height:46px; border-radius:50%; background:var(--fondo); display:grid; place-items:center; position:relative; flex:0 0 auto; box-shadow:var(--sombra)}
.f-btn svg{width:20px; height:20px; color:var(--tinta)}
.f-btn .n{position:absolute; top:-2px; right:-2px; background:var(--magenta); color:#fff; font:var(--micro);
  min-width:19px; height:19px; border-radius:999px; display:grid; place-items:center; padding:0 5px; border:2px solid var(--fondo)}

/* ---------- secciones ---------- */
.seccion{margin-top:26px}
#resultados{scroll-margin-top:14px}
.seccion-cab{display:flex; align-items:baseline; gap:12px; margin-bottom:13px}
.seccion-cab h2{margin-right:auto}
.seccion-cab button, .seccion-cab a{font:700 13.5px/1 var(--fuente); color:var(--magenta); letter-spacing:-.01em}

/* categorías */
.categorias{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(min-width:620px){.categorias{grid-template-columns:repeat(4,1fr)}}
.cat{background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--r); padding:14px; text-align:left;
  box-shadow:var(--sombra); display:flex; flex-direction:column; gap:11px; min-height:118px}
.cat .em{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:24px; background:var(--morado-s)}
.cat.c1 .em{background:var(--magenta-s)} .cat.c2 .em{background:var(--naranja-s)}
.cat .tx{margin-top:auto}
.cat b{color:var(--tinta); font:600 14.5px/1.22 var(--fuente); letter-spacing:-.018em; display:block}
.cat i{color:var(--suave); font:var(--micro); letter-spacing:.02em; font-style:normal; display:block; margin-top:4px}
.cat[aria-pressed="true"]{border-color:var(--morado); background:var(--morado-s)}
.cat[aria-pressed="true"] b{color:var(--morado)}

/* chips */
.chips-fila{display:flex; gap:8px; overflow-x:auto; padding:2px 18px 4px; margin:0 -18px; scrollbar-width:none; scroll-snap-type:x proximity}
.chips-fila::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; scroll-snap-align:start; background:var(--gris); border-radius:999px; padding:9px 15px;
  font:600 14px/1 var(--fuente); letter-spacing:-.012em; color:var(--texto); min-height:40px;
  display:inline-flex; align-items:center; gap:6px; border:1.5px solid transparent}
.chip .c{font:var(--micro); color:var(--suave)}
.chip[aria-pressed="true"]{background:var(--morado); color:#fff; border-color:var(--morado); font-weight:700}
.chip[aria-pressed="true"] .c{color:rgba(255,255,255,.72)}
:root[data-tema="oscuro"] .chip[aria-pressed="true"]{color:#1a1522}
:root[data-tema="oscuro"] .chip[aria-pressed="true"] .c{color:rgba(0,0,0,.5)}

/* ---------- lista de recetas ---------- */
.lista{display:grid; gap:10px}
@media(min-width:700px){.lista{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.lista{grid-template-columns:1fr 1fr 1fr}}
.fila{position:relative; display:flex; gap:12px; align-items:center; background:var(--tarjeta); border:1px solid var(--linea);
  border-radius:var(--r); padding:11px; box-shadow:var(--sombra); min-height:82px}
.fila .em{width:58px; height:58px; flex:0 0 auto; border-radius:15px; display:grid; place-items:center; font-size:27px; background:var(--morado-s)}
.fila.c1 .em{background:var(--magenta-s)} .fila.c2 .em{background:var(--naranja-s)}
.fila .txt{min-width:0; flex:1}
.fila .cubre{position:absolute; inset:0; border-radius:var(--r); z-index:1}
.fila .marcar{position:relative; z-index:2}
.fila:active{transform:scale(.995)}
.fila h3, .fila b.t{font:var(--card); letter-spacing:-.02em; margin-bottom:5px; color:var(--tinta); display:block}
.fila .datos{display:flex; flex-wrap:wrap; gap:10px; font:600 12px/1.3 var(--fuente); color:var(--suave); letter-spacing:-.005em}
.fila .datos i{font-style:normal; display:inline-flex; align-items:center; gap:4px}
.fila .datos svg{width:13px; height:13px}
.marcar{width:40px; height:40px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; color:var(--suave)}
.marcar svg{width:19px; height:19px}
.marcar[aria-pressed="true"]{color:var(--magenta)}
.marcar[aria-pressed="true"] svg{fill:currentColor}
.vacio{text-align:center; padding:54px 18px; color:var(--suave)}
.vacio strong{display:block; color:var(--tinta); font:var(--h3); margin-bottom:6px}
.boton{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--magenta); color:#fff;
  font:700 15px/1 var(--fuente); letter-spacing:-.012em; border-radius:999px; padding:15px 22px; min-height:50px}
.boton.claro{background:var(--gris); color:var(--tinta)}
.boton svg{width:18px; height:18px}
.cuenta{font:600 13.5px/1 var(--fuente); color:var(--suave); padding:20px 0 10px; letter-spacing:-.005em}
.cuenta strong{color:var(--tinta); font-weight:700}

/* ---------- hoja de filtros ---------- */
.hoja[hidden]{display:none}
.hoja{position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end; justify-content:center}
.hoja .velo{position:absolute; inset:0; background:rgba(20,14,28,.55); width:100%}
.hoja .panel{position:relative; background:var(--fondo); width:100%; max-width:600px; border-radius:24px 24px 0 0;
  max-height:90vh; display:flex; flex-direction:column; animation:sube .24s cubic-bezier(.2,.8,.3,1)}
@media(min-width:620px){.hoja{align-items:center}.hoja .panel{border-radius:24px; max-height:84vh}}
@keyframes sube{from{transform:translateY(22px); opacity:.5}to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){.hoja .panel{animation:none}}
.hoja .asa{width:40px; height:4px; border-radius:99px; background:var(--linea); margin:10px auto 0}
.hoja header{display:flex; align-items:center; gap:10px; padding:14px 18px 10px}
.hoja header h2{font:var(--h1); letter-spacing:-.034em; margin-right:auto}
.hoja header button{font:700 14px/1 var(--fuente); color:var(--magenta); padding:10px; min-height:44px}
.hoja .cuerpo{overflow:auto; padding:0 18px 10px; -webkit-overflow-scrolling:touch}
.grupo{padding:16px 0; border-top:1px solid var(--linea)}
.grupo:first-child{border-top:0; padding-top:6px}
.grupo h3{font:var(--h3); margin-bottom:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.hoja footer{padding:12px 18px calc(14px + var(--sb)); border-top:1px solid var(--linea)}
.hoja footer .boton{width:100%}

/* ---------- ficha ---------- */
.portada{position:relative; margin:0 0 -26px; padding:18px 18px 46px; background:linear-gradient(140deg,var(--morado),var(--magenta))}
.portada.g1{background:linear-gradient(140deg,var(--magenta),var(--naranja))}
.portada.g2{background:linear-gradient(140deg,var(--naranja),var(--morado))}
.portada .barra{display:flex; align-items:center; gap:10px; padding-top:var(--st)}
.portada .barra .icono{background:rgba(255,255,255,.24); color:#fff; backdrop-filter:blur(6px)}
.portada .barra .icono[data-favorito][aria-pressed="true"]{background:#fff; color:var(--magenta)}
.portada .barra .icono[data-favorito][aria-pressed="true"] svg{fill:currentColor}
.portada .barra .esp{margin-right:auto}
.portada .gran{font-size:72px; text-align:center; line-height:1; margin:12px 0 2px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.24))}
.hoja-ficha{position:relative; background:var(--fondo); border-radius:26px 26px 0 0; padding-top:24px}
.ficha .cat-chip{display:inline-block; font:var(--micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--magenta); background:var(--magenta-s); border-radius:999px; padding:6px 12px; margin-bottom:11px}
.ficha h1{letter-spacing:-.035em; margin-bottom:14px}
.ficha .entradilla{color:var(--suave); font:var(--body); max-width:46ch; margin:0}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:20px 0 26px}
.tile{background:var(--gris); border-radius:15px; padding:13px 8px; text-align:center}
.tile b{display:block; color:var(--tinta); font:700 18px/1.1 var(--fuente); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.tile span{font:var(--micro); letter-spacing:.09em; text-transform:uppercase; color:var(--suave); display:block; margin-top:4px}
.bloque{margin-bottom:28px}
.bloque > h2{margin-bottom:13px; display:flex; align-items:baseline; gap:10px}
.bloque > h2 small{font:600 13px/1 var(--fuente); color:var(--suave); margin-left:auto; letter-spacing:-.005em}
ul.ings li{border-bottom:1px solid var(--linea)}
ul.ings label{display:flex; gap:12px; align-items:center; padding:10px 2px; cursor:pointer; min-height:54px}
ul.ings .em{width:34px; height:34px; flex:0 0 auto; border-radius:11px; background:var(--gris); display:grid; place-items:center; font-size:17px}
ul.ings input{width:20px; height:20px; margin:0; accent-color:var(--magenta); flex:0 0 auto}
ul.ings .n{flex:1; font:500 15.5px/1.35 var(--fuente); color:var(--tinta); letter-spacing:-.012em}
ul.ings .q{color:var(--suave); font:700 13.5px/1.3 var(--fuente); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
ul.ings input:checked ~ .n, ul.ings input:checked ~ .q{text-decoration:line-through; color:var(--suave); font-weight:500}
ol.pasos li{display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--linea); font:var(--body); color:var(--texto)}
ol.pasos .num{flex:0 0 27px; height:27px; border-radius:50%; background:var(--morado-s); color:var(--morado);
  font:700 13px/1 var(--fuente); display:grid; place-items:center; margin-top:3px; font-variant-numeric:tabular-nums}
.acciones{display:grid; gap:9px; margin:8px 0 28px}
@media(min-width:520px){.acciones{grid-template-columns:1fr 1fr}}
  color:var(--tinta); min-height:36px; display:inline-flex; align-items:center; font-variant-numeric:tabular-nums}
.relacionadas{display:grid; gap:9px}
.nav-rec{display:flex; gap:9px; margin:28px 0 10px}
.nav-rec a{flex:1; background:var(--gris); border-radius:15px; padding:12px 14px; min-height:64px; display:flex; flex-direction:column; justify-content:center; gap:3px}
.nav-rec a small{color:var(--suave); font:var(--micro); letter-spacing:.09em; text-transform:uppercase}
.nav-rec a b{color:var(--tinta); font:600 14px/1.22 var(--fuente); letter-spacing:-.018em}
.nav-rec a.der{text-align:right}

/* ---------- modo cocina ---------- */
.cocina[hidden]{display:none}
.cocina{position:fixed; inset:0; z-index:80; background:var(--fondo); display:flex; flex-direction:column; padding-top:var(--st)}
.cocina .cab{display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--linea)}
.cocina .cab h2{font:600 15.5px/1.3 var(--fuente); letter-spacing:-.02em; margin-right:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.puntos{display:flex; gap:7px; justify-content:center; flex-wrap:wrap; padding:18px 18px 4px}
.puntos button{width:30px; height:30px; border-radius:50%; background:var(--gris); color:var(--suave);
  font:700 12.5px/1 var(--fuente); font-variant-numeric:tabular-nums}
.puntos button[data-e="hecho"]{background:var(--morado-s); color:var(--morado)}
.puntos button[aria-current="true"]{background:var(--magenta); color:#fff}
.cocina .cuerpo{flex:1; overflow:auto; padding:10px 22px 20px; display:flex; flex-direction:column; justify-content:center; text-align:center}
.cocina .cuerpo .paso-n{font:var(--micro); letter-spacing:.16em; text-transform:uppercase; color:var(--magenta); margin-bottom:16px}
.cocina .cuerpo p{font:500 clamp(19px,5.2vw,27px)/1.4 var(--fuente); letter-spacing:-.022em; color:var(--tinta); max-width:22ch; margin:0 auto}
.cocina .pie{display:flex; gap:10px; padding:14px 18px calc(16px + var(--sb)); border-top:1px solid var(--linea)}
.cocina .pie .boton{flex:1}

  text-transform:uppercase; padding:13px 16px}


/* ---------- aparece en los menús (ficha) ---------- */
.enmenus{background:var(--naranja-s); border-radius:var(--r); padding:16px; font:var(--small); font-size:14px; margin-bottom:28px}
.enmenus b{color:var(--tinta); font-weight:700}
.enmenus .lista-m{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.enmenus .lista-m a{background:var(--fondo); border-radius:11px; padding:7px 12px; font:700 13px/1 var(--fuente);
  color:var(--tinta); min-height:36px; display:inline-flex; align-items:center; font-variant-numeric:tabular-nums}

/* ---------- menús diarios ---------- */
.intro{background:var(--gris); border-radius:var(--r); padding:17px; font:var(--body); margin-bottom:20px}
.intro ol{padding-left:20px; margin-top:10px; list-style:decimal}
.intro li{margin-bottom:5px}
.intro li::marker{font-weight:700; color:var(--magenta)}
.menus{display:grid; gap:12px}
@media(min-width:760px){.menus{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.menus{grid-template-columns:1fr 1fr 1fr}}
.menu{background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra); overflow:hidden; scroll-margin-top:20px}
.menu > h2{background:var(--morado); color:#fff; font:700 12.5px/1 var(--fuente); letter-spacing:.12em; text-transform:uppercase; padding:13px 16px}
.menu.m1 > h2{background:var(--magenta)}
.menu.m2 > h2{background:var(--naranja); color:#3b2600}
.tiempo{padding:13px 16px; border-top:1px solid var(--linea)}
.tiempo:first-of-type{border-top:0}
.tiempo h3{font:var(--micro); letter-spacing:.13em; text-transform:uppercase; color:var(--suave); margin-bottom:7px}
.tiempo li a{font:600 15px/1.35 var(--fuente); letter-spacing:-.018em; color:var(--tinta); display:inline-block; padding:4px 0}
.tiempo li.fijo{color:var(--suave); font:var(--small); padding:3px 0}
.notas{margin:26px 0 8px; font:var(--small); color:var(--suave); background:var(--gris); border-radius:var(--r); padding:16px}
.notas p{margin:0 0 8px}
.notas p:last-child{margin:0}
.notas b{color:var(--texto); font-weight:700}

/* ---------- aviso flotante de confirmación ---------- */
.aviso{position:fixed; left:12px; right:12px; bottom:calc(var(--tabs) + var(--sb) + 12px); z-index:65;
  max-width:520px; margin:0 auto; background:var(--tinta); color:var(--fondo);
  border-radius:15px; padding:14px 16px; display:flex; align-items:center; gap:14px;
  box-shadow:0 12px 32px -12px rgba(0,0,0,.5); font:600 14px/1.35 var(--fuente); letter-spacing:-.012em;
  opacity:0; transform:translateY(14px); transition:opacity .2s ease, transform .2s ease}
.aviso.visible{opacity:1; transform:none}
.aviso a{margin-left:auto; color:inherit; font-weight:700; white-space:nowrap;
  text-decoration:underline; text-underline-offset:3px; padding:4px 0}
@media (prefers-reduced-motion:reduce){.aviso{transition:none}}

/* botón cuando la receta ya está en la lista */
.boton .ok{display:none; font-size:15px; line-height:1}
.boton.puesto{background:var(--magenta-s); color:var(--magenta)}
.boton.puesto .ok{display:inline}

/* ---------- lista de compras ---------- */
.grupo-compra{background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra); margin-bottom:12px; overflow:hidden}
.grupo-compra h3{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--linea)}
.grupo-compra h3 a{color:var(--tinta); flex:1; font:inherit}
.grupo-compra h3 button{color:var(--suave); font:700 12.5px/1 var(--fuente); min-height:40px; padding:0 4px}
.grupo-compra ul{padding:4px 16px 8px}

/* ---------- pestañas inferiores ---------- */
.tabs{position:fixed; left:0; right:0; bottom:0; z-index:50; background:color-mix(in srgb,var(--fondo) 92%, transparent);
  backdrop-filter:saturate(1.6) blur(14px); border-top:1px solid var(--linea); padding-bottom:var(--sb)}
.tabs ul{display:flex; max-width:520px; margin:0 auto}
.tabs li{flex:1}
.tabs a{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 4px 8px;
  color:var(--suave); font:700 10.5px/1 var(--fuente); letter-spacing:.01em; min-height:60px; justify-content:center}
.tabs svg{width:22px; height:22px}
.tabs a[aria-current]{color:var(--magenta)}
.tabs a .globo{position:absolute; top:6px; left:50%; margin-left:6px; background:var(--magenta); color:#fff;
  font:700 10px/1 var(--fuente); min-width:17px; height:17px; border-radius:99px; display:grid; place-items:center;
  padding:0 4px; border:2px solid var(--fondo)}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea); background:var(--gris); padding:26px 18px 30px; margin-top:30px}
.pie img{width:118px; opacity:.9; margin-bottom:12px}
.pie p{margin:0 0 7px; font:var(--small); font-size:12.5px; color:var(--suave); max-width:62ch}
.pie p:last-child{margin:0}