/* FIESTAS DE GRANADA · concepto, dirección D (Albaicín).
   La pared encalada de un carmen con los carteles de cada pueblo; el zócalo de alicatado de huesos; las placas de
   azulejo de las calles del Albaicín; el empedrado granadino. Familia Alegreya entera.
   Cortes: móvil < 700 · tablet 700–1099 · escritorio ≥ 1100. El móvil apaisado (poca altura) va con la cabecera
   de la tablet y sin barra de abajo. */
@import url('fuentes.css');

:root{
  --cal:#f2f3ef; --cal-2:#e9eae4; --azul:#23408e; --azul-hondo:#1a3270; --verde:#2f6b4f; --melado:#c58a2b;
  --negro:#2a221f; --tapial:#a5452c; --gris:#5f5952; --junta:#d6d3ca;
  --titulo:'Alegreya',Georgia,serif; --placa:'Alegreya SC',Georgia,serif; --texto:'Alegreya Sans',system-ui,sans-serif;
  --lado:16px; --ancho:1200px;
}
@media (min-width:700px){:root{--lado:32px}}
@media (min-width:1100px){:root{--lado:48px}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--cal);color:var(--negro);font:400 17px/1.5 var(--texto);-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
/* La cal: un grano muy fino, pintado una vez (no se repinta al hacer scroll). */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .44 0 0 0 0 .4 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.envolver{width:100%;max-width:calc(var(--ancho) + 2 * var(--lado));margin:0 auto;padding:0 var(--lado)}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── La franja de concepto ── */
.concepto{background:var(--negro);color:#efece4;font:500 13px/1.35 var(--texto);text-align:center;padding:7px var(--lado)}
.concepto b{font-weight:800;color:#fff}

/* ── Cabecera ── */
.cab{padding:18px 0 6px}
.cab .envolver{display:flex;align-items:center;justify-content:space-between;gap:24px}
.cab .logo{display:block;flex-shrink:0;text-decoration:none}
.cab .logo .placa{height:42px;width:auto;box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 10px -6px rgba(40,30,20,.35)}
.cab nav{display:none;gap:26px;font:700 16px/1 var(--texto)}
.cab nav a{text-decoration:none;color:var(--gris);padding:8px 0;border-bottom:2px solid transparent}
.cab nav a:hover{color:var(--negro)}
.cab nav a[aria-current="page"]{color:var(--azul);border-color:var(--azul)}
@media (min-width:700px){.cab{padding:22px 0 8px}.cab nav{display:flex}.cab .logo .placa{height:46px}}
@media (max-height:500px) and (orientation:landscape){.cab nav{display:flex;gap:18px;font-size:14px}.cab .logo .placa{height:34px}.cab{padding:10px 0 4px}}

/* ── Barra de abajo (solo móvil vertical): pestañas y una tira de zócalo ── */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--cal);box-shadow:0 -1px 0 var(--junta)}
.barra nav{display:grid;grid-template-columns:repeat(4,1fr);height:54px}
.barra a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--gris);font:700 12px/1 var(--texto)}
.barra a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.barra a[aria-current="page"]{color:var(--azul)}
.barra .tira{height:22px;position:relative;overflow:hidden}
body.con-barra{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.barra{padding-bottom:env(safe-area-inset-bottom)}
@media (min-width:700px),(max-height:500px) and (orientation:landscape){.barra{display:none}body.con-barra{padding-bottom:0}}

/* ── El zócalo y su brillo ── */
[data-zocalo]{position:relative;overflow:hidden}
[data-zocalo] .azulejo{position:absolute;inset:0}
.brillo{position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,250,235,.55) 46%,rgba(255,255,255,.75) 50%,rgba(255,250,235,.55) 54%,rgba(255,255,255,0) 100%)}

/* ── Pie de la web ── */
.pie{margin-top:auto;padding-top:56px}
.pie .envolver{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;padding-bottom:16px;font:500 15px/1.4 var(--texto);color:var(--gris)}
.pie .envolver b{font-weight:800;color:var(--azul)}
.pie .envolver a{text-decoration:none}
.pie .envolver a:hover{color:var(--negro);text-decoration:underline}
.pie .zocalo{height:64px}
.pie .firma{background:var(--negro);color:#d8d3c8;font:500 13px/1.4 var(--texto);padding:10px var(--lado);text-align:center}
@media (max-width:699px){.pie{padding-top:40px}.pie .zocalo{height:40px}.pie .envolver{font-size:14px;gap:8px 16px}}

/* ── Titulares y texto ── */
h1{font:700 clamp(30px,4.3vw,48px)/1.05 var(--titulo);letter-spacing:-.005em;text-wrap:balance}
h2{font:700 clamp(23px,2.5vw,30px)/1.1 var(--titulo);text-wrap:balance}
.sub{font:500 clamp(16px,1.6vw,18px)/1.35 var(--texto);color:var(--tapial);margin-top:8px}
.lead{font:400 clamp(17px,1.7vw,20px)/1.5 var(--texto);margin-top:14px;max-width:62ch}
p{max-width:68ch}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;
  font:800 15px/1.15 var(--texto);text-decoration:none;text-align:center;color:var(--azul);border:1.5px solid var(--azul);background:transparent;cursor:pointer}
.boton.lleno{background:var(--azul);color:#fff}
.boton:hover{background:var(--azul-hondo);border-color:var(--azul-hondo);color:#fff}
.boton svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

#contenido > .envolver > h1:first-child{margin-top:22px}
@media (min-width:700px){#contenido > .envolver > h1:first-child{margin-top:30px}}

/* ── Inicio: arriba ── */
.arriba{padding-top:22px;display:grid;gap:22px}
.arriba .mapa-mini{display:none}
@media (min-width:700px){.arriba{grid-template-columns:minmax(0,1fr) 240px;align-items:center;padding-top:26px}.arriba .mapa-mini{display:block}}
@media (min-width:1100px){.arriba{grid-template-columns:minmax(0,1fr) 300px;padding-top:28px}}
.mapa-mini{text-decoration:none}
.mapa-mini svg{width:100%;height:auto}
.mapa-mini span{display:block;font:600 14px/1.35 var(--texto);color:var(--gris);margin-top:4px}
.mapa-mini span b{color:var(--negro)}
.ver-mapa{display:inline-flex;margin-top:12px;font:800 15px/1 var(--texto);color:var(--azul)}
@media (min-width:700px){.ver-mapa{display:none}}

/* ── La pared de carteles ── */
.pared{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;margin-top:26px}
@media (min-width:700px){.pared{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px;margin-top:34px}}
@media (min-width:1100px){.pared{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 30px}}
@media (max-height:500px) and (orientation:landscape){.pared{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pegado{display:block;text-decoration:none;color:inherit}
.pegado .marco{position:relative}
.pegado .rodillo{position:absolute;left:-3px;right:-3px;top:0;height:12px;margin-top:-6px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.9) 40%,rgba(120,105,85,.35) 60%,rgba(255,255,255,0))}
.pegado .pie-c{margin-top:10px}
.pegado .pie-c b{display:block;font:800 17px/1.15 var(--texto)}
.pegado .pie-c span{display:block;font:500 14.5px/1.35 var(--texto);color:var(--gris);margin-top:2px}
.pegado .pie-c em{display:block;font:700 14.5px/1.35 var(--texto);font-style:normal;color:var(--tapial);margin-top:2px}
.pegado:hover .cartel{box-shadow:0 1px 0 rgba(0,0,0,.08),0 14px 26px -12px rgba(40,30,20,.45)}
.pegado:hover .pie-c b{color:var(--azul)}
@media (max-width:699px){.pegado .pie-c b{font-size:15.5px}.pegado .pie-c span,.pegado .pie-c em{font-size:13px}}

/* ── Los carteles: dibujados a escala de su propio ancho (cqw) ──
   🪤 El relleno va en una capa interior (.lz): puesto en el propio contenedor, sus cqw se miden contra la ventana
   (no tiene contenedor por encima) y le comía casi todo el ancho; la letra salía a un tercio. */
.cartel{container-type:inline-size;aspect-ratio:186/262;position:relative;overflow:hidden;width:100%;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 8px 18px -10px rgba(40,30,20,.4);transition:box-shadow .3s}
.cartel .lz{position:absolute;inset:0;display:flex;flex-direction:column}
.c0{background:var(--bg);color:var(--t)}
.c0 .lz{padding:7.5cqw 6.5cqw}
.c0 .anio{font:400 31cqw/.9 'Alfa Slab One';color:var(--a);letter-spacing:-.02em}
.c0 .banda{position:absolute;right:0;top:34cqw;width:14cqw;height:63cqw;background:var(--b)}
.c0 .t{font:400 10.4cqw/1.02 'Alfa Slab One';margin-top:auto;max-width:82%}
.c0 .s{font:700 5.4cqw/1.3 'Bricolage Grotesque';margin-top:3cqw;color:#1d1c1a}
.c1{background:var(--bg);color:var(--a);text-align:center}
.c1 .lz{padding:8.6cqw 5.4cqw;align-items:center}
.c1 .s1{font:700 4.8cqw/1.3 'Bricolage Grotesque';letter-spacing:.12em;text-transform:uppercase;color:var(--t)}
.c1 .estrella{width:31cqw;height:31cqw;margin-top:7cqw}
.c1 .t{font:400 13.4cqw/1 'Abril Fatface';margin-top:auto}
.c1 .s{font:400 7.5cqw/1.1 'Abril Fatface';color:var(--t);margin-top:3cqw}
.c1 .f{font:700 5.4cqw/1.3 'Bricolage Grotesque';color:var(--t);margin-top:auto}
.c2{background:var(--bg);color:var(--t)}
.c2 .lz{padding:6.5cqw 6.5cqw 0}
.c2 .t{font:400 22cqw/.92 'Anton';text-transform:uppercase}
.c2 .anio{font:400 13cqw/1 'Anton';color:var(--a);margin-top:3cqw}
.c2 .s{font:700 5.4cqw/1.3 'Bricolage Grotesque';margin-top:auto}
.c2 .rayas{height:8.6cqw;margin:5cqw -6.5cqw 0;background:repeating-linear-gradient(90deg,var(--t) 0 6.5cqw,var(--bg) 6.5cqw 13cqw)}
.c3{background:var(--bg);color:#1a1a1a}
.c3 .tira{height:31cqw;flex-shrink:0;background:repeating-linear-gradient(90deg,var(--a) 0 8.6cqw,#fff 8.6cqw 17.2cqw);position:relative}
.c3 .farol{position:absolute;top:23.7cqw;width:9.7cqw;height:11.8cqw;border-radius:4.8cqw;background:var(--f)}
.c3 .farol:nth-child(1){left:12cqw}.c3 .farol:nth-child(2){left:45cqw;background:#f2c230}.c3 .farol:nth-child(3){left:78cqw}
.c3 .cuerpo{padding:17cqw 6.5cqw 6.5cqw;display:flex;flex-direction:column;flex:1}
.c3 .t{font:400 17cqw/.95 'Anton';text-transform:uppercase;color:var(--a)}
.c3 .s{font:700 5.4cqw/1.3 'Bricolage Grotesque';margin-top:auto}
.largo.c0 .t{font-size:9cqw}.largo.c1 .t{font-size:11.2cqw}.largo.c2 .t{font-size:15.5cqw}.largo.c2 .anio{font-size:10cqw}.largo.c3 .t{font-size:13.5cqw}

/* ── Los próximos fines de semana ── */
.seccion{margin-top:56px}
@media (max-width:699px){.seccion{margin-top:44px}}
.findes{list-style:none;margin-top:16px;border-top:1px solid var(--junta)}
.findes li{display:grid;grid-template-columns:210px minmax(0,1fr) auto;gap:6px 22px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--junta)}
.findes .fecha{font:700 20px/1.1 var(--titulo);color:var(--azul)}
.findes .cuantos{display:block;font:700 14px/1.3 var(--texto);color:var(--tapial);margin-top:3px}
.findes .quien{font:500 16px/1.5 var(--texto);color:var(--gris)}
.findes .quien a{color:var(--negro);text-decoration:none;font-weight:700}
.findes .quien a:hover{color:var(--azul);text-decoration:underline}
@media (max-width:699px){.findes li{grid-template-columns:1fr;gap:4px}.findes li > a{justify-self:start}}

/* ── La franja para ayuntamientos ── */
.ayto{display:grid;gap:16px 34px;align-items:center;margin-top:56px;padding:26px;background:#f8f7f2;
  box-shadow:inset 0 0 0 1px var(--junta),inset 0 0 0 6px #f8f7f2,inset 0 0 0 7.5px var(--azul)}
.ayto h2{font-size:clamp(22px,2.4vw,28px)}
.ayto p{margin-top:6px;color:var(--gris)}
@media (min-width:700px){.ayto{grid-template-columns:minmax(0,1fr) auto;padding:32px 36px}}

/* ── Página del pueblo ── */
.volver{display:inline-block;margin-top:18px;font:700 15px/1 var(--texto);color:var(--azul);text-decoration:none}
.volver:hover{text-decoration:underline}
.ficha{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start;margin-top:18px}
.ficha .cartel-p{width:104px}
.ficha .placa-p .placa{width:100%;max-width:300px;height:auto;box-shadow:0 1px 0 rgba(0,0,0,.06),0 5px 12px -7px rgba(40,30,20,.4)}
.ficha .cuando{font:700 16px/1.35 var(--texto);color:var(--tapial);margin-top:12px}
.ficha .lejos{font:500 15px/1.35 var(--texto);color:var(--gris);margin-top:2px}
.acciones{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acciones .boton.cal{grid-column:1/-1}
@media (min-width:700px){
  .ficha{grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 30px;margin-top:22px}
  .ficha .cartel-p{width:220px;grid-row:1/3}
  .acciones{grid-column:2;align-self:start;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
}
.ficha .proximo{font:700 clamp(19px,2vw,24px)/1.3 var(--titulo);margin-top:16px;max-width:30ch}
.ficha .proximo span{display:block;font:800 13px/1.2 var(--texto);color:var(--verde);margin-bottom:4px}
@media (max-width:699px){.ficha .proximo{grid-column:1/-1;font-size:18px}}
/* En el escritorio, los tres días del programa a la vez; en el móvil y la tablet, por pestañas. */
@media (min-width:1100px){
  .pueblo-cuerpo .dias{display:none}
  .programa-dias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:16px}
  .programa-dias .actos[hidden]{display:block}
  .programa-dias .actos::before{content:attr(data-dia);display:block;font:700 20px/1.2 var(--titulo);color:var(--azul);padding-bottom:10px;border-bottom:2px solid var(--azul)}
  .programa-dias .actos li{grid-template-columns:54px minmax(0,1fr)}
}
@media (min-width:1100px){.ficha{grid-template-columns:280px minmax(0,1fr)}.ficha .cartel-p{width:280px}.ficha .placa-p .placa{max-width:360px}}
.pueblo-cuerpo{display:grid;gap:40px;margin-top:36px}
@media (min-width:1100px){.pueblo-cuerpo{grid-template-columns:minmax(0,1fr) 340px;gap:56px;margin-top:44px}}
.dias{display:flex;gap:6px;margin-top:14px;border-bottom:1px solid var(--junta)}
.dias button{flex:1;max-width:160px;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 6px;
  font:800 16px/1 var(--texto);color:var(--gris);cursor:pointer}
.dias button[aria-selected="true"]{color:var(--azul);border-color:var(--azul)}
.actos{list-style:none}
.actos li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--junta)}
.actos .h{font:800 18px/1.25 var(--texto);color:var(--tapial);font-variant-numeric:tabular-nums}
.actos .t{font:700 18px/1.25 var(--texto)}
.actos .l{display:block;font:500 15px/1.35 var(--texto);color:var(--gris);margin-top:2px}
.aparte h2{font-size:22px}
.aparte .mapa-p svg{width:100%;height:auto;margin-top:10px}
.aparte .mapa-p p{font:500 15px/1.4 var(--texto);color:var(--gris);margin-top:4px}
.cerca{list-style:none;margin-top:12px;border-top:1px solid var(--junta)}
.cerca a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--junta);text-decoration:none}
.cerca a:hover b{color:var(--azul)}
.cerca b{display:block;font:800 16px/1.2 var(--texto)}
.cerca span{display:block;font:500 14px/1.35 var(--texto);color:var(--gris)}

/* ── Mapa ── */
.mapa-pagina{display:grid;gap:24px;margin-top:18px}
@media (min-width:1100px){.mapa-pagina{grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start;margin-top:26px}}
.selector{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.selector button{background:#f8f7f2;border:1.5px solid var(--junta);padding:9px 14px;font:800 15px/1 var(--texto);color:var(--gris);cursor:pointer}
.selector button[aria-pressed="true"]{border-color:var(--azul);color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul)}
.lienzo svg{width:100%;height:auto}
.roseta{cursor:pointer}
.roseta .petalo{transform-box:fill-box;transform-origin:center}
.roseta:hover .petalo,.roseta.activa .petalo{fill:var(--tapial)}
.roseta:focus-visible{outline:none}
.roseta:focus-visible .toque{stroke:var(--azul);stroke-width:2}
.leyenda{display:flex;flex-wrap:wrap;gap:8px 20px;font:600 14px/1.3 var(--texto);color:var(--gris);margin-top:8px}
.leyenda i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.tarjeta{padding:20px;background:#f8f7f2;box-shadow:inset 0 0 0 1px var(--junta)}
.tarjeta .vacia{color:var(--gris)}
.tarjeta .t-c{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start}
.tarjeta b{display:block;font:700 22px/1.15 var(--titulo)}
.tarjeta span{display:block;font:500 15px/1.4 var(--texto);color:var(--gris);margin-top:3px}
.tarjeta em{display:block;font:700 15px/1.4 var(--texto);font-style:normal;color:var(--tapial);margin-top:4px}
.tarjeta .boton{margin-top:14px}
.lista-finde{list-style:none;margin-top:16px;columns:2;column-gap:24px}
@media (max-width:699px){.lista-finde{columns:1}}
.lista-finde li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--junta);font:600 15px/1.3 var(--texto)}
.lista-finde a{text-decoration:none}
.lista-finde a:hover{color:var(--azul);text-decoration:underline}
.lista-finde span{color:var(--gris);font-weight:500}

/* ── Calendario ── */
.mes{display:grid;gap:34px;margin-top:26px}
@media (min-width:1100px){.mes{grid-template-columns:1fr 1fr;gap:44px 56px}}
.semana header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--azul)}
.semana header b{font:700 24px/1.1 var(--titulo);color:var(--azul)}
.semana header span{font:700 15px/1.2 var(--texto);color:var(--tapial)}
.semana ul{list-style:none}
.semana li a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:11px 0;border-bottom:1px solid var(--junta);text-decoration:none}
.semana li a:hover b{color:var(--azul)}
.semana li b{font:800 17px/1.2 var(--texto)}
.semana li span{font:500 15px/1.3 var(--texto);color:var(--gris);grid-column:1}
.semana li i{font:700 14px/1.2 var(--texto);font-style:normal;color:var(--gris);grid-column:2;grid-row:1/3;align-self:center}

/* ── Ayuntamientos ── */
.pasos-a{list-style:none;counter-reset:paso;display:grid;gap:18px;margin-top:22px}
@media (min-width:1100px){.pasos-a{grid-template-columns:repeat(3,1fr);gap:28px}}
.pasos-a li{counter-increment:paso;padding:22px 22px 24px;background:#f8f7f2;box-shadow:inset 0 0 0 1px var(--junta);display:grid;gap:8px;align-content:start}
.pasos-a li::before{content:counter(paso);display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  font:700 20px/1 var(--placa);color:var(--azul);background:#fff;box-shadow:inset 0 0 0 2px var(--azul),inset 0 0 0 4px #fff,inset 0 0 0 5px var(--azul)}
.pasos-a b{font:700 21px/1.2 var(--titulo)}
.pasos-a p{color:var(--gris);font-size:16px}
.dos-a{display:grid;gap:34px;margin-top:56px;align-items:start}
@media (min-width:1100px){.dos-a{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.puntos{list-style:none;margin-top:14px;border-top:1px solid var(--junta)}
.puntos li{padding:12px 0 12px 22px;border-bottom:1px solid var(--junta);position:relative;font-size:16.5px}
.puntos li::before{content:"";position:absolute;left:2px;top:20px;width:9px;height:9px;background:var(--verde);transform:rotate(45deg)}
.puntos b{font-weight:800}
.formulario{display:grid;gap:14px;margin-top:16px;padding:24px;background:#f8f7f2;box-shadow:inset 0 0 0 1px var(--junta)}
.formulario label{display:grid;gap:6px;font:700 15px/1.2 var(--texto)}
.formulario input,.formulario select{font:500 16px/1.3 var(--texto);padding:12px;border:1.5px solid #c9c5bb;background:#fff;color:var(--negro);border-radius:0}
.formulario input:focus,.formulario select:focus{outline:none;border-color:var(--azul)}
.formulario .nota{font:500 14px/1.4 var(--texto);color:var(--gris)}
.formulario .hecho{font:700 15px/1.4 var(--texto);color:var(--verde)}

/* Antes de pegarse, el cartel está «enrollado» (solo con JS: sin él, se ve todo). */
.js .pegado.espera .cartel{clip-path:inset(0 0 100% 0)}
.js .pegado.espera .pie-c{opacity:0}