/* ═══════════════════════════════════════════════════════════════════════════
   AIMA · assets/aima-piel-web.css — LA PIEL DE LA APP, EN CLARO, EN LA WEB
   ───────────────────────────────────────────────────────────────────────────
   ⚫ 05/10/2026 · Bratney: «en portafolio necesito un rediseño en tema
   iconografía, la oficial es la de la app (…) te he dejado dos ejemplos que
   me gustan de la app, el CRM y Mazo (…) no busco que me lo cambies de decir
   algo diferente, me gusta el estilo Instagram, pero para tipografías,
   combinaciones, y que conserve obviamente el blanco. Aplica esto para
   portafolio y para asistencia. Lo mismo para perfil, mis pedidos, y todo,
   así unifico en claro en la web lo que hay en la app».
   Decidido el 05/10: el alcance es el portafolio y la zona de cliente
   (Asistencia, Entrar, Mi perfil, Mis pedidos y «Cómo va tu pedido»), y los
   titulares de Anton pasan a Poppins (AIMA Negra), como en la app.
   ⚫ 05/10/2026, noche · SEGUNDO ENCARGO, LA ZONA TÉCNICA: «ponte con
   desarrolladores, sin perder elegancia eso sí, tanto API AMI, flujo de
   nodos, equipo y núcleo de datos. No quiero perder la elegancia ya que es
   una parte más elegante, pero sí hay que adaptarlo a la estética que estamos
   aplicando». Son las secciones 14 a 19; lo que se queda y lo que cambia
   allí está escrito al principio de la 14.

   ES `aima-piel.css` (la piel AIMA de la app, 30/09) LLEVADA AL MARCADO DE LA
   WEB, igual que `crm/crm-piel.css` la lleva al del CRM. Ni un valor nuevo:
   las letras, los colores claros, las tarjetas, los botones, el chip con su
   LED y la ceja con su raya roja son los de la app en claro.
     · LAS LETRAS: AIMA Negra (Poppins 800) para los titulares, AIMA Serif en
       cursiva (Cormorant) para la frase de debajo, AIMA Serif recta para la
       cifra que se quiere mirar, Poppins en mayúsculas espaciadas para las
       cejas y Montserrat para leer, como hasta ahora.
     · LOS ICONOS, las dos familias de la app y ninguna más:
         – la sencilla (`aima-trazos.js`, trazo redondo, sin caja ni círculo)
           sustituye al dibujo de cada `#i-…` de la web: lo hace
           `aima-piel-web.js`, sin tocar ni un <use> de las páginas;
         – la pesada (`aima-baldosas.js`) va donde el icono dice QUÉ ES algo:
           el canal de Asistencia, la cabecera de una tarjeta de tu cuenta,
           la marca de la pantalla. También la pone `aima-piel-web.js`.
     · EL BLANCO SE QUEDA: el fondo de cada página es el que era. Lo que pasa
       a ser de la app son las tarjetas, los botones, las cejas y los chips.

   🔴 TODO CUELGA DE `html.piel-web`. Esa clase va escrita en el <html> de
      cada página que la lleva (sin parpadeo). Quitar la clase —o las cuatro
      líneas del <head>— es volver a la web de antes, entera.
   🔴 NO SE TOCA: ni un texto, ni el orden de nada, ni el estilo Instagram
      del portafolio, ni las láminas oscuras (la portada del portafolio, la
      franja de captación de Asistencia, la lista de espera): éstas cambian
      sólo de letra. Si una regla de aquí mueve algo de sitio, está mal puesta.
   🔴 LA LEY DEL ROJO DE LA APP: acento, no fondo. Un botón rojo por
      pantalla, las luces de estado, la raya de la ceja y poco más.
   🔴 LA PANTALLA DE APP DEL MÓVIL NO LLEVA ESTA PIEL. En el teléfono,
      aima-app-movil.js convierte Asistencia, «Cómo va tu pedido», Mi perfil
      y Mis pedidos en la pantalla negra de la app (pone `appm` en el <body>).
      Esa cara ya es la de la app, así que cada regla de aquí lleva
      `body:not(.appm)`. Lo único que comparten las dos caras son los iconos
      (secciones 1 y 9): son los de la app en las dos.

   COPIAS: este fichero vive igual en `03_AIMA Web (P.almc). /assets/` (web)
   y en `04_AIMA App (P.almc)/01_APP/_COMPARTIDO/assets/` (Entrar, Mi perfil y
   Mis pedidos viven en la app, en 06_CUENTA). Si se toca uno, se copia al otro
   (el md5 tiene que coincidir). `aima-piel.css` y `aima-baldosas.js` de la web
   son copias exactas de los de la app.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══ 0 · LAS VARIABLES · las de la piel AIMA en claro, siempre ═══════════════
   aima-piel.css pone el oscuro en :root y el claro en html[data-tema=claro].
   La web es clara siempre, así que aquí va el claro, sin depender del tema. */
html.piel-web{
  --piel-fondo:#F2F2F0;
  --piel-tinta:#0B0B0D;
  --piel-tinta-2:rgba(11,11,13,.66);
  --piel-gris:#5F6365;                    /* 5,42:1 sobre papel: el gris que se lee */
  --piel-card:linear-gradient(180deg,#FFFFFF,#F6F6F3);
  --piel-card-plano:#FFFFFF;
  --piel-borde:rgba(11,11,13,.085);
  --piel-borde-2:rgba(11,11,13,.16);
  --piel-sombra:inset 0 1px 0 #fff,0 14px 30px -22px rgba(11,11,13,.38);
  --piel-sombra-alta:inset 0 1px 0 #fff,0 22px 44px -26px rgba(11,11,13,.42);
  --piel-raya:rgba(11,11,13,.08);
  --piel-hueco:rgba(11,11,13,.055);
  --piel-grande:radial-gradient(70% 120% at 100% 0%,rgba(193,39,45,.12),rgba(193,39,45,0) 60%),linear-gradient(180deg,#FFFFFF,#F3F3F0);

  /* los de la web, sacados de los de arriba */
  --pw-tinta-2:#3A3C3F;                   /* el texto de leer de la app (CRM, --tx-2) */
  --pw-frase:rgba(11,11,13,.74);          /* la cursiva de debajo del titular (Mazo, .sub) */
  --pw-verde:#1F7A45;  --pw-verde-led:#34C759;
  --pw-ambar:#9A6B00;  --pw-ambar-led:#F5A623;
  --pw-r1:22px;  --pw-r2:16px;  --pw-r3:12px;
}

/* las mismas dos reglas que aima-piel.css sólo da en [data-tema=claro] */
html.piel-web body:not(.appm) .piel-chip{color:#C1272D}
html.piel-web body:not(.appm) .ab-tile{box-shadow:0 4px 9px -5px rgba(11,11,13,.55)}


/* ══ 1 · LA FAMILIA SENCILLA · el trazo de la app es redondo ════════════════
   aima-iconos.js pinta sus `.ic` a inglete y con remate cuadrado (la ley de
   agosto). Los dibujos nuevos (aima-piel-web.js) son los de aima-trazos.js:
   redondos. Las marcas de otros (`.ic-marca`) no se tocan. */
html.piel-web .ic:not(.ic-marca){stroke-linejoin:round;stroke-linecap:round}


/* ══ 2 · LAS LETRAS ═══════════════════════════════════════════════════════
   Titular: AIMA Negra, en minúscula de frase, apretada como «Mazo» e «Inicio».
   La palabra que se marca sigue en rojo, pero recta: en la app el rojo no va
   en cursiva. */
html.piel-web body:not(.appm) .anton,
html.piel-web body:not(.appm) #hero h1,
html.piel-web body:not(.appm) .pp-cab h2,
html.piel-web body:not(.appm) #cierre h2,
html.piel-web body:not(.appm) .espera-cab h2{
  font-family:var(--piel-negra);font-weight:800;font-style:normal;
  text-transform:none;letter-spacing:-.022em;word-spacing:.06em;line-height:1.04;
}
html.piel-web body:not(.appm) #hero h1 em,
html.piel-web body:not(.appm) .pp-cab h2 em,
html.piel-web body:not(.appm) #cierre h2 em,
html.piel-web body:not(.appm) .espera-cab h2 em{font-style:normal;color:var(--piel-rojo)}
html.piel-web body:not(.appm) .espera-cab h2 em{color:var(--piel-led)}


/* ══ 3 · LA CEJA · el rótulo de encima del título, con su raya roja 24×2 ═══
   Sustituye a la faceta roja (`.facet`, `.kicker i`) y a las cejas doradas.
   Es `.piel-ceja` de aima-piel.css, escrita sobre las clases de la web. */
html.piel-web body:not(.appm) #hero .tag,
html.piel-web body:not(.appm) .pp-cab .kicker,
html.piel-web body:not(.appm) .espera-cab .kicker{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:600 10.5px/1 var(--piel-pop);letter-spacing:.24em;text-transform:uppercase;
  color:var(--piel-gris);
}
html.piel-web body:not(.appm) #hero .tag::before,
html.piel-web body:not(.appm) .pp-cab .kicker::before,
html.piel-web body:not(.appm) .espera-cab .kicker::before{
  content:'';display:block;flex:none;width:24px;height:2px;border-radius:2px;
  background:var(--piel-led);box-shadow:0 0 8px rgba(254,49,66,.45);
}
html.piel-web body:not(.appm) #hero .tag .facet,
html.piel-web body:not(.appm) .pp-cab .kicker i,
html.piel-web body:not(.appm) .espera-cab .kicker i{display:none}
html.piel-web body:not(.appm) .espera-cab .kicker{color:rgba(242,242,240,.62)}


/* ══ 4 · LOS BOTONES · los del Mazo y el CRM ════════════════════════════════
   El de la acción, rojo con su degradado y su halo (uno por pantalla); los
   demás, blancos con su pelo y su sombra. Siempre en pastilla. */
html.piel-web body:not(.appm) .pill{
  background:var(--piel-rojo-g);color:#fff;border:0;
  box-shadow:var(--piel-boton-sombra);
  font:700 13.4px/1 var(--piel-pop);letter-spacing:0;
}
html.piel-web body:not(.appm) .pill:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 34px -16px rgba(193,39,45,.95)}
html.piel-web body:not(.appm) .pill.linea,
html.piel-web body:not(.appm) .pill.espera{
  background:var(--piel-card-plano);color:var(--piel-tinta);
  border:1px solid var(--piel-borde-2);box-shadow:var(--piel-sombra);
}
html.piel-web body:not(.appm) .pill.espera{border-style:dashed;color:var(--pw-tinta-2)}
html.piel-web body:not(.appm) .pill.linea:hover,
html.piel-web body:not(.appm) .pill.espera:hover{border-color:rgba(11,11,13,.32);box-shadow:var(--piel-sombra-alta)}


/* ══ 5 · LA CABECERA, EL MENÚ Y EL PIE · lo que comparten las tres páginas ══ */
/* el menú a pantalla completa: AIMA Negra, como los títulos de la app */
html.piel-web body:not(.appm) #mmenu a{font-family:var(--piel-negra);font-weight:800;letter-spacing:-.03em}
html.piel-web body:not(.appm) #mmenu a:hover{color:var(--piel-rojo)}
/* el pie: los títulos de columna son rótulos de la app, con su raya de 18×2 */
html.piel-web body:not(.appm) .pie-col b{
  display:flex;align-items:center;gap:10px;
  font:600 10.5px/1 var(--piel-pop);letter-spacing:.22em;color:var(--piel-gris);
}
html.piel-web body:not(.appm) .pie-col b::before{
  content:'';display:block;flex:none;width:18px;height:2px;border-radius:2px;background:var(--piel-led);
}
/* la ventana de las cookies: el botón de aceptar es la acción de la pantalla */
html.piel-web body:not(.appm) .ck-caja{border-radius:28px;box-shadow:0 40px 90px -40px rgba(11,11,13,.45),0 0 0 1px var(--piel-borde)}
html.piel-web body:not(.appm) .ck-caja h2{font-family:var(--piel-negra);font-weight:800;letter-spacing:-.03em}
html.piel-web body:not(.appm) .ck-ops button{font:700 13px/1 var(--piel-pop)}
html.piel-web body:not(.appm) .ck-ops .si{background:var(--piel-rojo-g);box-shadow:var(--piel-boton-sombra)}
html.piel-web body:not(.appm) .ck-ops .no{border:1px solid var(--piel-borde-2);background:#fff;box-shadow:var(--piel-sombra)}


/* ═══════════════════════════════════════════════════════════════════════════
   6 · EL PORTAFOLIO (html[data-piel=portafolio]) — el Instagram se queda;
   cambian la letra, los iconos y las combinaciones
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 6.1 · la portada oscura de antes del perfil: sólo letra ─────────────── */
html.piel-web[data-piel="portafolio"] body:not(.appm) .rv-in .et{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font:600 10.5px/1 var(--piel-pop);letter-spacing:.24em;color:rgba(242,242,240,.62);
}
html.piel-web[data-piel="portafolio"] body:not(.appm) .rv-in .et::before{
  content:'';width:24px;height:2px;border-radius:2px;background:var(--piel-led);
  box-shadow:0 0 10px rgba(254,49,66,.7);
}
html.piel-web[data-piel="portafolio"] body:not(.appm) .rv-in h2{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;
  font-size:clamp(40px,8.6vw,100px);line-height:1.05;letter-spacing:-.03em;word-spacing:.07em;
}
html.piel-web[data-piel="portafolio"] body:not(.appm) .rv-in h2 i{color:var(--piel-led)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .rv-in > p{
  max-width:34ch;font-family:var(--piel-serif);font-style:italic;font-weight:600;
  font-size:clamp(18px,2.1vw,22px);line-height:1.42;color:rgba(242,242,240,.74);
}
html.piel-web[data-piel="portafolio"] body:not(.appm) .rv-tiras .cinta b{color:var(--piel-led)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .rv-baja i{background:linear-gradient(var(--piel-led),transparent)}

/* ── 6.2 · la cabecera del perfil ───────────────────────────────────────── */
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-nombre h1{
  font-family:var(--piel-negra);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(20px,5vw,28px);
}
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-nombre .verif{color:var(--piel-rojo);width:21px;height:21px;stroke-width:1.9}
/* «9 plazas al año» es el chip de la app: su LED rojo encendido */
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-plaza{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  padding:5px 11px 5px 9px;border-radius:999px;
  background:rgba(254,49,66,.08);border:1px solid rgba(254,49,66,.32);
  font:700 9.5px/1 var(--piel-pop);letter-spacing:.16em;color:var(--piel-rojo);
}
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-plaza b{
  width:6px;height:6px;border-radius:50%;background:var(--piel-led);
  box-shadow:0 0 0 3px rgba(254,49,66,.14),0 0 8px rgba(254,49,66,.75);
}
/* el lema: la cursiva de la app, la de debajo de «Mazo» */
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-bio .lema{
  font-family:var(--piel-serif);font-style:italic;font-weight:600;
  font-size:clamp(18px,4.4vw,23px);line-height:1.3;color:var(--pw-frase);
}
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-bio .lema em{color:var(--piel-rojo)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-bio p{color:var(--pw-tinta-2)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-bio a.link{font:600 12.5px var(--piel-pop);color:var(--piel-rojo)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-bio a.link svg{stroke-width:2}

/* los botones del perfil: Seguir es la acción (rojo); los demás, blancos */
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-ops button,
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-ops a{border-radius:999px;font:700 13px/1 var(--piel-pop);letter-spacing:0}
html.piel-web[data-piel="portafolio"] body:not(.appm) .btn-seguir{background:var(--piel-rojo-g);color:#fff;box-shadow:var(--piel-boton-sombra)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .btn-seguir::after{display:none}
html.piel-web[data-piel="portafolio"] body:not(.appm) .btn-seguir:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 34px -16px rgba(193,39,45,.95)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .btn-seguir.ya{background:var(--piel-card-plano);color:var(--piel-tinta);
  border:1px solid var(--piel-borde-2);box-shadow:var(--piel-sombra)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-ops .sec{border:1px solid var(--piel-borde-2);background:var(--piel-card);box-shadow:var(--piel-sombra)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-ops .sec:hover{border-color:rgba(11,11,13,.3);box-shadow:var(--piel-sombra-alta)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-ops .icono svg{stroke-width:1.8}

/* la ventanita de «Seguir» */
html.piel-web[data-piel="portafolio"] body:not(.appm) .seguir-caja{border-radius:var(--pw-r2)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .seguir-caja button[type="submit"]{background:var(--piel-rojo-g);box-shadow:var(--piel-boton-sombra);font-family:var(--piel-pop);font-weight:700}

/* ── 6.3 · las historias destacadas: sólo el rótulo ─────────────────────── */
html.piel-web[data-piel="portafolio"] body:not(.appm) .dest span{font:600 10.5px var(--piel-pop);letter-spacing:0;color:var(--pw-tinta-2)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .dest.visto span,
html.piel-web[data-piel="portafolio"] body:not(.appm) .dest.obras span{color:var(--piel-gris)}

/* ── 6.4 · las pestañas: la viva, en tinta y con la raya roja de la app ─── */
html.piel-web[data-piel="portafolio"] body:not(.appm) .pest button{color:var(--piel-gris)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .pest button svg{stroke-width:1.7}
html.piel-web[data-piel="portafolio"] body:not(.appm) .pest button span{font:600 12.5px var(--piel-pop);letter-spacing:0}
html.piel-web[data-piel="portafolio"] body:not(.appm) .pest button.viva{color:var(--piel-tinta)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .pest .subraya{background:var(--piel-led);height:2px;border-radius:2px;
  box-shadow:0 0 10px rgba(254,49,66,.55)}

/* ── 6.5 · la rejilla: la cifra de cada hueco es la de la app ───────────── */
html.piel-web[data-piel="portafolio"] body:not(.appm) .arte .glifo{font-family:var(--piel-serif);font-weight:700;letter-spacing:-.02em;text-transform:none;font-variant-numeric:lining-nums}
html.piel-web[data-piel="portafolio"] body:not(.appm) .rej-nota{font-family:var(--piel-mont)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .rej-nota b{font-family:var(--piel-serif);font-weight:700;font-size:1.25em;font-variant-numeric:lining-nums}

/* ── 6.6 · la barra de abajo: la viva, en tinta, con su luz roja encima ─── */
html.piel-web[data-piel="portafolio"] body:not(.appm) .ba-in button{color:var(--piel-gris)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .ba-in button.viva{color:var(--piel-tinta)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .ba-in button svg{stroke-width:1.7}
html.piel-web[data-piel="portafolio"] body:not(.appm) .ba-in button small{font:600 9.5px var(--piel-pop);letter-spacing:.02em}
html.piel-web[data-piel="portafolio"] body:not(.appm) .ba-in .burbuja{background:var(--piel-hueco)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .ba-in .burbuja::before{
  content:'';position:absolute;top:-8px;left:50%;width:18px;height:2px;margin-left:-9px;
  border-radius:2px;background:var(--piel-led);box-shadow:0 0 8px rgba(254,49,66,.7);
}
html.piel-web[data-piel="portafolio"] body:not(.appm) #metro .que{font-family:var(--piel-pop);font-weight:700}

/* ── 6.7 · las hojas oscuras (historia, publicación, reels, veredicto,
   valorar) y «Tú»: titulares en AIMA Negra, cifras en AIMA Serif, cejas con
   su raya. Los fondos se quedan como están. ────────────────────────────── */
html.piel-web[data-piel="portafolio"] body:not(.appm) .hs-cuerpo h3,
html.piel-web[data-piel="portafolio"] body:not(.appm) .po-titular,
html.piel-web[data-piel="portafolio"] body:not(.appm) .reel .txt h3,
html.piel-web[data-piel="portafolio"] body:not(.appm) .bs-vacio b,
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-cab h3,
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-fuera h3,
html.piel-web[data-piel="portafolio"] body:not(.appm) .tu-cab h3,
html.piel-web[data-piel="portafolio"] body:not(.appm) .va-caja h3,
html.piel-web[data-piel="portafolio"] body:not(.appm) .vd-caja h3{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;letter-spacing:-.03em;line-height:1.02;
}
html.piel-web[data-piel="portafolio"] body:not(.appm) .hs-cuerpo h3 i,
html.piel-web[data-piel="portafolio"] body:not(.appm) .vd-caja h3 i{color:var(--piel-led)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-fuera h3 i,
html.piel-web[data-piel="portafolio"] body:not(.appm) .tu-cab h3 i{color:var(--piel-rojo)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .p-cifras b,
html.piel-web[data-piel="portafolio"] body:not(.appm) .po-cifras b,
html.piel-web[data-piel="portafolio"] body:not(.appm) .val .vt u,
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-nota .gr b,
html.piel-web[data-piel="portafolio"] body:not(.appm) .va-general b{font-family:var(--piel-serif);font-weight:700;letter-spacing:-.01em;font-variant-numeric:lining-nums}
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-nota .gr b.sin{font-family:var(--piel-negra);font-weight:800;letter-spacing:-.02em}

html.piel-web[data-piel="portafolio"] body:not(.appm) .hs-cuerpo .et,
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-cab .et,
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-fuera .et,
html.piel-web[data-piel="portafolio"] body:not(.appm) .tu-cab .et,
html.piel-web[data-piel="portafolio"] body:not(.appm) .va-caja .et,
html.piel-web[data-piel="portafolio"] body:not(.appm) .vd-caja .et{
  display:flex;align-items:center;gap:10px;
  font:600 10.5px/1 var(--piel-pop);letter-spacing:.24em;text-transform:uppercase;
}
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-cab .et,
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-fuera .et,
html.piel-web[data-piel="portafolio"] body:not(.appm) .vd-caja .et{justify-content:center}
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-cab .et,
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-fuera .et,
html.piel-web[data-piel="portafolio"] body:not(.appm) .tu-cab .et{color:var(--piel-gris)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .hs-cuerpo .et,
html.piel-web[data-piel="portafolio"] body:not(.appm) .va-caja .et,
html.piel-web[data-piel="portafolio"] body:not(.appm) .vd-caja .et{color:rgba(242,242,240,.62)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .hs-cuerpo .et::before,
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-cab .et::before,
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-fuera .et::before,
html.piel-web[data-piel="portafolio"] body:not(.appm) .tu-cab .et::before,
html.piel-web[data-piel="portafolio"] body:not(.appm) .va-caja .et::before,
html.piel-web[data-piel="portafolio"] body:not(.appm) .vd-caja .et::before{
  content:'';flex:none;width:24px;height:2px;border-radius:2px;background:var(--piel-led);
}
/* la frase de debajo de esos titulares: la cursiva de la app */
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-cab p,
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-sub,
html.piel-web[data-piel="portafolio"] body:not(.appm) #tuSub{
  font-family:var(--piel-serif);font-style:italic;font-weight:600;
  font-size:17px;line-height:1.45;color:var(--pw-frase);
}
/* las tarjetas de «Tú»: las de la app */
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-nota,
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-tu,
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-fuera{
  background:var(--piel-card);border:1px solid var(--piel-borde);
  box-shadow:var(--piel-sombra);border-radius:var(--pw-r1);
}
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-tu h4{
  display:flex;align-items:center;gap:10px;
  font:600 10px/1 var(--piel-pop);letter-spacing:.22em;color:var(--piel-gris);
}
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-tu h4::before{content:'';width:18px;height:2px;border-radius:2px;background:var(--piel-led)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-ops a{border-radius:999px;background:var(--piel-rojo-g);box-shadow:var(--piel-boton-sombra);font:700 13px var(--piel-pop)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .fi-ops button{border-radius:999px;border:1px solid var(--piel-borde-2);background:#fff;font:700 13px var(--piel-pop)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .vd-ops a,
html.piel-web[data-piel="portafolio"] body:not(.appm) .vd-ops button{border-radius:999px;font:700 13px var(--piel-pop)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-entrar{background:var(--piel-rojo-g);color:#fff;box-shadow:var(--piel-boton-sombra);border-radius:999px;font:700 13.4px/1 var(--piel-pop)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-crear{border-radius:999px;border:1px solid var(--piel-borde-2);background:#fff;box-shadow:var(--piel-sombra);font:700 13.4px/1 var(--piel-pop)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-dentro{background:var(--piel-card);border:1px solid var(--piel-borde);box-shadow:var(--piel-sombra);border-radius:var(--pw-r2)}
html.piel-web[data-piel="portafolio"] body:not(.appm) .cu-salir{border:1px solid var(--piel-borde-2);font-family:var(--piel-pop);font-weight:700}


/* ═══════════════════════════════════════════════════════════════════════════
   7 · ASISTENCIA (html[data-piel=asistencia]) — contacto.html
   ═══════════════════════════════════════════════════════════════════════════ */
html.piel-web[data-piel="asistencia"] body:not(.appm) #hero h1{font-size:clamp(42px,6.4vw,88px);letter-spacing:-.028em;word-spacing:.07em}
html.piel-web[data-piel="asistencia"] body:not(.appm) #hero .sub{
  font-family:var(--piel-serif);font-style:italic;font-weight:600;
  font-size:clamp(18px,1.9vw,22px);line-height:1.42;color:var(--pw-frase);max-width:30em;
}
/* la hora de Sabadell: el chip de la app, con el LED del estado */
html.piel-web[data-piel="asistencia"] body:not(.appm) .ahora{
  background:var(--piel-card);border:1px solid var(--piel-borde);box-shadow:var(--piel-sombra);
  color:var(--pw-tinta-2);
}
html.piel-web[data-piel="asistencia"] body:not(.appm) .ahora i{width:7px;height:7px}
html.piel-web[data-piel="asistencia"] body:not(.appm) .ahora.abierto i{background:var(--pw-verde-led);box-shadow:var(--piel-verde-halo);animation:none}
html.piel-web[data-piel="asistencia"] body:not(.appm) .ahora.cerrado i{background:var(--pw-ambar-led);box-shadow:0 0 0 3px rgba(245,166,35,.16),0 0 10px 1px rgba(245,166,35,.6)}

/* los tres canales: tarjeta de la app, con su baldosa */
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal{
  background:var(--piel-card);border:1px solid var(--piel-borde);
  box-shadow:var(--piel-sombra);border-radius:var(--pw-r1);
}
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal:hover{box-shadow:var(--piel-sombra-alta)}
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal.proxima:hover{box-shadow:var(--piel-sombra)}
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal .ico.pw-baldosa{width:auto;height:auto;background:none;border-radius:0;justify-self:start;place-items:start}
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal .ico.pw-baldosa::after{display:none}
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal h3{font:700 19px/1.25 var(--piel-pop);letter-spacing:-.015em}
/* la cifra que se viene a buscar (el número, el correo): AIMA Serif */
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal .dato{font-family:var(--piel-serif);font-weight:700;font-size:clamp(25px,2.7vw,31px);letter-spacing:-.005em;line-height:1.1;font-variant-numeric:lining-nums}
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal .dato.correo{font-size:clamp(21px,2.2vw,25px)}
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal .dato.espera{font-family:var(--piel-serif);font-style:italic;font-weight:600;color:var(--piel-gris)}
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal .nota i{width:6px;height:6px}
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal .nota.vivo i{background:var(--pw-verde-led);box-shadow:var(--piel-verde-halo);animation:none}
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal .nota.parado i{background:var(--pw-ambar-led)}
/* «Próximamente»: el chip con su LED */
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal h3 .chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;
  background:rgba(254,49,66,.08);border:1px solid rgba(254,49,66,.32);
  font:700 9.5px/1 var(--piel-pop);letter-spacing:.16em;color:var(--piel-rojo);
}
html.piel-web[data-piel="asistencia"] body:not(.appm) .canal h3 .chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--piel-led);box-shadow:0 0 8px rgba(254,49,66,.8)}
html.piel-web[data-piel="asistencia"] body:not(.appm) .micro a.liga{color:var(--piel-rojo)}

/* el cupón (oscuro): la baldosa en el sello, la ceja en el antetítulo */
html.piel-web[data-piel="asistencia"] body:not(.appm) .cup-sello.pw-baldosa{background:none;border:0;box-shadow:none;width:auto;height:auto}
html.piel-web[data-piel="asistencia"] body:not(.appm) .cup-sello.pw-baldosa::after{display:none}
html.piel-web[data-piel="asistencia"] body:not(.appm) .cup-kick{display:flex;align-items:center;gap:10px;font:600 10.5px/1 var(--piel-pop);letter-spacing:.24em;color:rgba(242,242,240,.62)}
html.piel-web[data-piel="asistencia"] body:not(.appm) .cup-kick::before{content:'';flex:none;width:24px;height:2px;border-radius:2px;background:var(--piel-led);box-shadow:0 0 10px rgba(254,49,66,.7)}
html.piel-web[data-piel="asistencia"] body:not(.appm) .cup-tit{font-family:var(--piel-negra);font-weight:800;letter-spacing:-.025em}
html.piel-web[data-piel="asistencia"] body:not(.appm) .cup-tit u{border-bottom-color:var(--piel-led)}
html.piel-web[data-piel="asistencia"] body:not(.appm) .cup-sub{font-family:var(--piel-serif);font-style:italic;font-weight:600;font-size:17px;line-height:1.45;color:rgba(242,242,240,.7)}
html.piel-web[data-piel="asistencia"] body:not(.appm) .cup-form button,
html.piel-web[data-piel="asistencia"] body:not(.appm) .cup-envia{background:var(--piel-rojo-g);box-shadow:var(--piel-boton-sombra);border-radius:999px;font-family:var(--piel-pop);font-weight:700}

/* la franja de captación (oscura, la monta aima-lead.js): sólo letra y botón */
html.piel-web[data-piel="asistencia"] body:not(.appm) #aima-lead .alv-kicker{
  display:flex;align-items:center;gap:10px;font:600 10.5px/1 var(--piel-pop);
  letter-spacing:.24em;color:rgba(242,242,240,.62);
}
html.piel-web[data-piel="asistencia"] body:not(.appm) #aima-lead .alv-kicker::before{content:'';flex:none;width:24px;height:2px;border-radius:2px;background:var(--piel-led);box-shadow:0 0 10px rgba(254,49,66,.7)}
html.piel-web[data-piel="asistencia"] body:not(.appm) #aima-lead h2{font-family:var(--piel-negra);font-weight:800;text-transform:none;letter-spacing:-.025em;word-spacing:.06em;line-height:1.04}
html.piel-web[data-piel="asistencia"] body:not(.appm) #aima-lead .alv-sub{font-family:var(--piel-serif);font-style:italic;font-weight:600;font-size:clamp(18px,1.9vw,21px);line-height:1.45;color:rgba(242,242,240,.78)}
html.piel-web[data-piel="asistencia"] body:not(.appm) #aima-lead button.alv-btn{background:var(--piel-rojo-g);box-shadow:var(--piel-boton-sombra);border-radius:999px;font-family:var(--piel-pop);font-weight:700}
html.piel-web[data-piel="asistencia"] body:not(.appm) #aima-lead form{border-radius:var(--pw-r1)}


/* ═══════════════════════════════════════════════════════════════════════════
   8 · «CÓMO VA TU PEDIDO» (html[data-piel=pedidos]) — la cola de la web
   ═══════════════════════════════════════════════════════════════════════════ */
html.piel-web[data-piel="pedidos"] body:not(.appm) #hero h1{font-size:clamp(40px,6vw,84px);letter-spacing:-.028em;word-spacing:.07em;line-height:1.08}
html.piel-web[data-piel="pedidos"] body:not(.appm) #hero .lead{margin-top:clamp(16px,2.4vh,22px)}
html.piel-web[data-piel="pedidos"] body:not(.appm) #hero .lead,
html.piel-web[data-piel="pedidos"] body:not(.appm) .pp-cab p,
html.piel-web[data-piel="pedidos"] body:not(.appm) #cierre p,
html.piel-web[data-piel="pedidos"] body:not(.appm) .espera-cab p{
  font-family:var(--piel-serif);font-style:italic;font-weight:600;
  font-size:clamp(17px,1.7vw,20px);line-height:1.45;color:var(--pw-frase);
}
html.piel-web[data-piel="pedidos"] body:not(.appm) .espera-cab p{color:rgba(242,242,240,.74)}
html.piel-web[data-piel="pedidos"] body:not(.appm) #hero .lead b{font-family:var(--piel-serif);font-weight:700;color:var(--piel-tinta);font-variant-numeric:lining-nums}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pp-cab h2,
html.piel-web[data-piel="pedidos"] body:not(.appm) #cierre h2,
html.piel-web[data-piel="pedidos"] body:not(.appm) .espera-cab h2{font-size:clamp(30px,4.2vw,50px)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pp-mio-btn{
  border-radius:999px;border:1px solid var(--piel-borde-2);background:var(--piel-card);
  box-shadow:var(--piel-sombra);color:var(--piel-tinta);font:700 13px/1 var(--piel-pop);
}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pp-mio-btn:hover{background:var(--piel-card);color:var(--piel-tinta);border-color:rgba(11,11,13,.32);box-shadow:var(--piel-sombra-alta)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pp-mio span{font-family:var(--piel-mont);color:var(--piel-gris)}
/* «Comienza gratis», arriba: pastilla blanca de la app */
html.piel-web[data-piel="pedidos"] body:not(.appm) .cta-alta{background:#fff;border:1px solid var(--piel-borde-2);box-shadow:var(--piel-sombra);font-family:var(--piel-pop);font-weight:700}

/* la cola: tarjetas de la app, cifras en AIMA Serif, estados con su LED */
html.piel-web[data-piel="pedidos"] body:not(.appm) .cola-estado,
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu,
html.piel-web[data-piel="pedidos"] body:not(.appm) .pq,
html.piel-web[data-piel="pedidos"] body:not(.appm) .pasos,
html.piel-web[data-piel="pedidos"] body:not(.appm) .pm{
  background:var(--piel-card);border:1px solid var(--piel-borde);
  box-shadow:var(--piel-sombra);border-radius:var(--pw-r1);
}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pp.hueso .pq{background:var(--piel-card)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu.tuyo{background:linear-gradient(160deg,rgba(193,39,45,.06),rgba(255,255,255,0) 62%),var(--piel-card);border:1.5px dashed rgba(193,39,45,.55)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu.libre{background:transparent;box-shadow:none}
html.piel-web[data-piel="pedidos"] body:not(.appm) .cola-estado .txt b{font-family:var(--piel-negra);font-weight:800;text-transform:none;letter-spacing:-.03em}
html.piel-web[data-piel="pedidos"] body:not(.appm) .cola-estado .cupo b{font-family:var(--piel-serif);font-weight:700;letter-spacing:-.01em;font-variant-numeric:lining-nums}
html.piel-web[data-piel="pedidos"] body:not(.appm) .cola-estado .cupo span{font:600 10px/1 var(--piel-pop);letter-spacing:.2em}
html.piel-web[data-piel="pedidos"] body:not(.appm) .cola-estado.abierta .bola,
html.piel-web[data-piel="pedidos"] body:not(.appm) .cola-estado.abierta .bola::after{background:var(--pw-verde-led)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .cola-estado.justa .bola,
html.piel-web[data-piel="pedidos"] body:not(.appm) .cola-estado.justa .bola::after{background:var(--pw-ambar-led)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .cola-estado.llena .bola,
html.piel-web[data-piel="pedidos"] body:not(.appm) .cola-estado.llena .bola::after{background:var(--piel-led)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu .n{font:700 17px/1 var(--piel-serif);font-variant-numeric:lining-nums;border-radius:9px;background:var(--piel-hueco)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu.tuyo .n{background:var(--piel-rojo-g);color:#fff}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu .qu b{font:700 14.5px/1.25 var(--piel-pop)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu .etiq{border-radius:999px;font:700 9.5px/1 var(--piel-pop);letter-spacing:.16em;padding:5px 10px 5px 8px}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu .etiq::before{width:6px;height:6px;box-shadow:0 0 6px currentColor}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu .etiq.rodando{background:rgba(254,49,66,.08);border:1px solid rgba(254,49,66,.3);color:var(--piel-rojo)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu .etiq.montaje{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.38);color:var(--pw-ambar)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu .etiq.revision{background:rgba(52,199,89,.1);border:1px solid rgba(52,199,89,.36);color:var(--pw-verde)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pu.tuyo .etiq{background:var(--piel-rojo-g);border:0;color:#fff}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pq b{font-family:var(--piel-negra);font-weight:800;text-transform:none;letter-spacing:-.025em;font-size:clamp(18px,2vw,21px);line-height:1.15}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pm b{font-family:var(--piel-pop);font-weight:700}

/* la lista de espera (oscura): el botón es la acción de la franja */
html.piel-web[data-piel="pedidos"] body:not(.appm) .form-espera button{background:var(--piel-rojo-g);color:#fff;box-shadow:var(--piel-boton-sombra);font:700 13.4px/1 var(--piel-pop)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .form-espera label{font:600 10px var(--piel-pop);letter-spacing:.2em}

/* «Ya eres cliente»: el acceso (oscuro) y las cinco fases */
html.piel-web[data-piel="pedidos"] body:not(.appm) .acceso{border-radius:var(--pw-r1)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .acceso .et,
html.piel-web[data-piel="pedidos"] body:not(.appm) .pasos .et{display:flex;align-items:center;gap:10px;font:600 10.5px/1 var(--piel-pop);letter-spacing:.24em}
html.piel-web[data-piel="pedidos"] body:not(.appm) .acceso .et{color:rgba(242,242,240,.62)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .pasos .et{color:var(--piel-gris)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .acceso .et::before,
html.piel-web[data-piel="pedidos"] body:not(.appm) .pasos .et::before{content:'';flex:none;width:24px;height:2px;border-radius:2px;background:var(--piel-led)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .acceso h3,
html.piel-web[data-piel="pedidos"] body:not(.appm) .pasos h3{font-family:var(--piel-negra);font-weight:800;text-transform:none;letter-spacing:-.03em;line-height:1.05}
html.piel-web[data-piel="pedidos"] body:not(.appm) .acceso .entrar,
html.piel-web[data-piel="pedidos"] body:not(.appm) .acceso button{background:var(--piel-rojo-g);color:#fff;box-shadow:var(--piel-boton-sombra);font:700 13.4px/1 var(--piel-pop)}
html.piel-web[data-piel="pedidos"] body:not(.appm) .linea-t .cuando{border-radius:999px;font-family:var(--piel-pop);font-weight:700;background:var(--piel-hueco);color:var(--piel-gris)}


/* ═══════════════════════════════════════════════════════════════════════════
   9 · LAS BALDOSAS · donde aima-piel-web.js puso una, el trazo de antes se
   esconde (no se borra: sin aima-baldosas.js la página sigue con sus iconos)
   ═══════════════════════════════════════════════════════════════════════════ */
html.piel-web .pw-baldosa > svg{display:none !important}
html.piel-web .pw-baldosa > .ab-tile{flex:none}


/* ═══════════════════════════════════════════════════════════════════════════
   10 · ENTRAR (html[data-piel=entrar]) — 06_CUENTA/login.html
   La columna oscura de la mascota se queda oscura: cambia la letra.
   ═══════════════════════════════════════════════════════════════════════════ */
html.piel-web[data-piel="entrar"] body:not(.appm) .marca-texto .titular{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;
  letter-spacing:-.025em;word-spacing:.06em;line-height:1.04;font-size:clamp(2rem,3.4vw,3rem);
}
html.piel-web[data-piel="entrar"] body:not(.appm) .marca-texto .titular .rojo{color:var(--piel-led)}
html.piel-web[data-piel="entrar"] body:not(.appm) .marca-texto .subtitular{
  font-family:var(--piel-serif);font-style:italic;font-weight:600;
  font-size:1.18rem;line-height:1.45;color:rgba(242,242,240,.72);max-width:300px;
}
html.piel-web[data-piel="entrar"] body:not(.appm) .form-titulo{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;
  letter-spacing:-.025em;word-spacing:.06em;line-height:1.06;font-size:clamp(1.75rem,3.2vw,2.3rem);
}
html.piel-web[data-piel="entrar"] body:not(.appm) .form-titulo .kw{color:var(--piel-rojo)}
html.piel-web[data-piel="entrar"] body:not(.appm) .form-kicker{font-family:var(--piel-serif);font-style:italic;font-weight:600;font-size:1.02rem;color:var(--pw-frase)}
/* Entrar / Crear cuenta: el interruptor de la app (la pastilla viva, blanca) */
html.piel-web[data-piel="entrar"] body:not(.appm) .pestanas{background:var(--piel-hueco);border:1px solid var(--piel-borde)}
html.piel-web[data-piel="entrar"] body:not(.appm) .pestana-btn{font:600 .84rem/1 var(--piel-pop);letter-spacing:0;color:var(--piel-gris)}
html.piel-web[data-piel="entrar"] body:not(.appm) .pestana-btn[aria-selected="true"]{background:#fff;color:var(--piel-tinta);box-shadow:var(--piel-sombra),0 0 0 1px var(--piel-borde)}
html.piel-web[data-piel="entrar"] body:not(.appm) .campo-grupo label{font:600 .66rem/1.2 var(--piel-pop);letter-spacing:.22em;color:var(--piel-gris)}
html.piel-web[data-piel="entrar"] body:not(.appm) .campo-grupo input{border:1px solid var(--piel-borde-2);border-radius:var(--pw-r3);box-shadow:inset 0 1px 2px rgba(11,11,13,.04)}
html.piel-web[data-piel="entrar"] body:not(.appm) .campo-grupo input:focus{border-color:var(--piel-rojo);box-shadow:0 0 0 3px rgba(254,49,66,.14)}
/* el botón de entrar es LA acción de la pantalla */
html.piel-web[data-piel="entrar"] body:not(.appm) .btn-submit{background:var(--piel-rojo-g);box-shadow:var(--piel-boton-sombra);
  font:700 .95rem/1 var(--piel-pop);letter-spacing:0;text-transform:none}
html.piel-web[data-piel="entrar"] body:not(.appm) .btn-submit:hover:not(:disabled){background:var(--piel-rojo-g);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 34px -16px rgba(193,39,45,.95)}
html.piel-web[data-piel="entrar"] body:not(.appm) .btn-social{border:1px solid var(--piel-borde-2);border-radius:999px;box-shadow:var(--piel-sombra);font-family:var(--piel-pop);font-weight:700}
/* Herramientas del equipo: rótulo con su raya y la tarjeta con su baldosa */
html.piel-web[data-piel="entrar"] body:not(.appm) .equipo-cab h2{display:flex;align-items:center;gap:10px;font:600 10.5px/1 var(--piel-pop);letter-spacing:.22em;color:var(--piel-gris)}
html.piel-web[data-piel="entrar"] body:not(.appm) .equipo-cab h2::before{content:'';width:18px;height:2px;border-radius:2px;background:var(--piel-led)}
html.piel-web[data-piel="entrar"] body:not(.appm) .ut{background:var(--piel-card);border:1px solid var(--piel-borde);box-shadow:var(--piel-sombra);border-radius:var(--pw-r2)}
html.piel-web[data-piel="entrar"] body:not(.appm) .ut:hover{border-color:rgba(193,39,45,.45);box-shadow:var(--piel-sombra-alta)}
html.piel-web[data-piel="entrar"] body:not(.appm) .ut-ic.pw-baldosa{width:auto;height:auto;background:none !important}
html.piel-web[data-piel="entrar"] body:not(.appm) .ut b{font:700 13px var(--piel-pop)}


/* ═══════════════════════════════════════════════════════════════════════════
   11 · TU CUENTA · lo que comparten Mi perfil y Mis pedidos (06_CUENTA)
   ═══════════════════════════════════════════════════════════════════════════ */
/* la barra de arriba: la marca de la pantalla es una baldosa; lo demás,
   trazos sueltos, sin caja (la barra de la app) */
html.piel-web body:not(.appm) .mp-barra .et.pw-baldosa,
html.piel-web body:not(.appm) .sg-barra .et.pw-baldosa{border:0;width:auto;height:auto;border-radius:0}
html.piel-web body:not(.appm) .mp-barra .vuelve,
html.piel-web body:not(.appm) .sg-barra .vuelve{background:none;border:0;color:var(--piel-tinta-2);border-radius:50%}
html.piel-web body:not(.appm) .mp-barra .vuelve:hover,
html.piel-web body:not(.appm) .sg-barra .vuelve:hover{background:var(--piel-hueco);color:var(--piel-tinta)}
html.piel-web body:not(.appm) .mp-barra .vuelve svg,
html.piel-web body:not(.appm) .sg-barra .vuelve svg{width:21px;height:21px;stroke-width:1.6}
/* el aviso de «Ejemplo» */
html.piel-web body:not(.appm) .mp-demo,
html.piel-web body:not(.appm) .sg-demo{border-radius:var(--pw-r2)}
html.piel-web body:not(.appm) .mp-demo b,
html.piel-web body:not(.appm) .sg-demo b{font-family:var(--piel-pop);font-weight:700;border-radius:999px}


/* ═══════════════════════════════════════════════════════════════════════════
   12 · MI PERFIL (html[data-piel=mi-perfil]) — 06_CUENTA/mi-perfil.html
   ═══════════════════════════════════════════════════════════════════════════ */
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-hola h1{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;
  letter-spacing:-.03em;line-height:1;font-size:clamp(2.4rem,5.4vw,3.8rem);
}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-hola h1 em{color:var(--piel-rojo)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-hola p{font-family:var(--piel-serif);font-style:italic;font-weight:600;font-size:1.2rem;line-height:1.45;color:var(--pw-frase)}
/* «Sesión abierta»: el chip con su LED verde */
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-sesion{background:var(--piel-card);border:1px solid var(--piel-borde);box-shadow:var(--piel-sombra);
  font:700 10px/1 var(--piel-pop);letter-spacing:.16em;color:var(--pw-verde)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-sesion::before{width:6px;height:6px;background:var(--pw-verde-led);box-shadow:var(--piel-verde-halo);animation:none}
/* la vitrina (tu plan, cliente desde): la cifra en AIMA Serif */
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-vit{background:var(--piel-card);border:1px solid var(--piel-borde);box-shadow:var(--piel-sombra);border-radius:var(--pw-r2)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-vit b{font:700 1.3rem/1.05 var(--piel-serif);letter-spacing:-.005em;font-variant-numeric:lining-nums}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-vit i{font:600 9px var(--piel-pop);letter-spacing:.2em;color:var(--piel-gris)}
/* las tarjetas: las de la app, con la baldosa en la cabecera */
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-ficha{background:var(--piel-card);border:1px solid var(--piel-borde);box-shadow:var(--piel-sombra);border-radius:var(--pw-r1)}
@media(hover:hover){ html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-ficha:hover{box-shadow:var(--piel-sombra-alta)} }
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-ficha h2{font:600 10.5px/1 var(--piel-pop);letter-spacing:.2em;color:var(--piel-gris);gap:12px}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-ficha h2.pw-baldosa{padding-bottom:16px}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-pares dt{font-family:var(--piel-pop);color:var(--piel-gris)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-pares dd{font-family:var(--piel-pop);font-weight:600}
/* el encargo de la tarjeta de pedidos */
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-anillo b{font:700 1.75rem/1 var(--piel-serif);font-variant-numeric:lining-nums tabular-nums}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-ped-tx b{font-family:var(--piel-negra);font-weight:800;text-transform:none;letter-spacing:-.025em;word-spacing:.05em;line-height:1.1}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-ped-tx .espera{font-family:var(--piel-pop);font-weight:700;border-radius:999px}
/* lo que guardamos: la faceta roja pasa a ser el LED de la app */
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-guardamos li{border-color:var(--piel-borde);border-radius:var(--pw-r2);background:rgba(255,255,255,.6)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-guardamos li i{width:6px;height:6px;border-radius:50%;clip-path:none;margin-top:7px;
  background:var(--piel-led);box-shadow:0 0 0 3px rgba(254,49,66,.12),0 0 8px rgba(254,49,66,.6)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-guardamos li.promesa i{width:7px;height:7px}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-guardamos li b{font-family:var(--piel-pop);font-weight:700}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-guardamos li.promesa{background:linear-gradient(160deg,rgba(254,49,66,.06),rgba(255,255,255,0) 60%)}
/* los botones: el de la acción, rojo con su degradado; los demás, blancos */
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-btn{font:700 13px/1 var(--piel-pop);letter-spacing:0}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-btn.p{background:var(--piel-rojo-g);box-shadow:var(--piel-boton-sombra)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-btn.p:hover{background:var(--piel-rojo-g);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 34px -16px rgba(193,39,45,.95)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-btn.s{border:1px solid var(--piel-borde-2);background:#fff;box-shadow:var(--piel-sombra)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-btn.peligro{border:1px solid rgba(193,39,45,.4);background:#fff}
/* tu plan */
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-planes h2{font-family:var(--piel-negra);font-weight:800;letter-spacing:-.025em}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-planes-d{font-family:var(--piel-serif);font-style:italic;font-weight:600;font-size:1.1rem;color:var(--pw-frase)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-plan{background:var(--piel-card);border:1px solid var(--piel-borde);box-shadow:var(--piel-sombra);border-radius:var(--pw-r1)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-plan.destacado{border:1px solid rgba(193,39,45,.5);background:var(--piel-grande);box-shadow:var(--piel-sombra-alta)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-plan-nb{font:600 10.5px var(--piel-pop);letter-spacing:.22em;color:var(--piel-gris)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-plan-pr b{font:700 clamp(34px,5vw,44px)/1 var(--piel-serif);letter-spacing:-.01em;font-variant-numeric:lining-nums}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-sello{border-radius:999px;font-family:var(--piel-pop);font-weight:700;background:var(--piel-rojo-g);box-shadow:var(--piel-boton-sombra)}
/* irse de AIMA */
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-adios{border-radius:var(--pw-r1);border-color:rgba(193,39,45,.28)}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-adios h2{display:flex;align-items:center;gap:10px}
html.piel-web[data-piel="mi-perfil"] body:not(.appm) .mp-adios h2::before{content:'';width:18px;height:2px;border-radius:2px;background:var(--piel-led)}


/* ═══════════════════════════════════════════════════════════════════════════
   13 · MIS PEDIDOS (html[data-piel=mis-pedidos]) — 06_CUENTA/mis-pedidos.html
   ═══════════════════════════════════════════════════════════════════════════ */
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-barra b{font-family:var(--piel-negra);font-weight:800;letter-spacing:-.02em}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-hola h1{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;
  letter-spacing:-.03em;word-spacing:.06em;line-height:1.02;font-size:clamp(2.2rem,5vw,3.5rem);
}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-hola h1 em{color:var(--piel-rojo)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-hola p{font-family:var(--piel-serif);font-style:italic;font-weight:600;font-size:1.18rem;line-height:1.45;color:var(--pw-frase)}
/* el resumen: cifras en AIMA Serif; la del acento, en el rojo de la app */
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-pastilla{background:var(--piel-card);border:1px solid var(--piel-borde);box-shadow:var(--piel-sombra);border-radius:var(--pw-r2)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-pastilla b{font:700 1.75rem/1 var(--piel-serif);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-pastilla i{font:600 9px var(--piel-pop);letter-spacing:.2em;color:var(--piel-gris)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-pastilla.acento{background:var(--piel-rojo-g);border:0;box-shadow:var(--piel-boton-sombra)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-pastilla.acento b{color:#fff}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-pastilla.acento i{color:rgba(255,255,255,.78)}
/* cada encargo: la tarjeta de la app */
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-pedido{background:var(--piel-card);border:1px solid var(--piel-borde);box-shadow:var(--piel-sombra);border-radius:var(--pw-r1)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-pedido::before{background:var(--piel-led);box-shadow:0 0 12px rgba(254,49,66,.5)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-titulo{font-family:var(--piel-negra);font-weight:800;text-transform:none;letter-spacing:-.03em;word-spacing:.05em;line-height:1.04}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-et{border-color:var(--piel-borde-2);background:#fff;border-radius:999px}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-et b{font-family:var(--piel-pop);font-weight:700}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-medidor .mid b{font:700 3rem/1 var(--piel-serif);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-medidor .mid i{font-family:var(--piel-pop);color:var(--piel-gris)}
/* los estados: chip con su LED */
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-chapa{border-radius:999px;font:700 9.5px/1 var(--piel-pop);letter-spacing:.16em;border:1px solid transparent}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-chapa.marcha{background:rgba(254,49,66,.08);border-color:rgba(254,49,66,.32);color:var(--piel-rojo)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-chapa.marcha::before{width:6px;height:6px;background:var(--piel-led);box-shadow:0 0 0 3px rgba(254,49,66,.14),0 0 8px rgba(254,49,66,.75)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-chapa.hecho{background:rgba(52,199,89,.1);border-color:rgba(52,199,89,.36);color:var(--pw-verde)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-chapa.parado{background:var(--piel-hueco);border-color:var(--piel-borde)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-riel i{background:linear-gradient(90deg,#B8141D,#F0363F)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-paso-caja{border-color:var(--piel-borde);border-radius:var(--pw-r2)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-paso-caja .et{font:600 9.5px/1 var(--piel-pop);letter-spacing:.2em;color:var(--piel-gris)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-paso-caja .et .pip{width:6px;height:6px;border-radius:50%;clip-path:none;background:var(--piel-led);box-shadow:0 0 8px rgba(254,49,66,.7)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-paso-caja.futura .et .pip{background:#8A8D8F;box-shadow:none;opacity:1}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-paso-caja h4{font:700 14px var(--piel-pop)}
/* «Te toca a ti»: la franja roja de la app, con la baldosa del toque */
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-tuyo{background:var(--piel-rojo-g);box-shadow:var(--piel-boton-sombra);border-radius:var(--pw-r2)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-tuyo .mano.pw-baldosa{background:none;width:auto;height:auto}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-tuyo .tx b{font:700 14px var(--piel-pop)}
/* cada producto: su baldosa, y la cifra en AIMA Serif */
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-prod{border-color:var(--piel-borde);border-radius:var(--pw-r2);background:var(--piel-card)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-prod[open]{box-shadow:var(--piel-sombra)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-prod .ico.pw-baldosa{background:none !important;width:auto;height:auto;border-radius:0}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-prod .tx b{font:700 14px var(--piel-pop)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-prod .pct b{font:700 24px/1 var(--piel-serif);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-parada b,
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-paso h3{font-family:var(--piel-pop)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-parada .tu-et{border-radius:999px}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-btn{font:700 13px/1 var(--piel-pop);letter-spacing:0}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-btn.p{background:var(--piel-rojo-g);box-shadow:var(--piel-boton-sombra)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-btn.s{border:1px solid var(--piel-borde-2);background:#fff;box-shadow:var(--piel-sombra)}
html.piel-web[data-piel="mis-pedidos"] body:not(.appm) .sg-tuyo .sg-btn{background:#fff;color:var(--piel-rojo);box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}


/* ═══════════════════════════════════════════════════════════════════════════
   14 · LA ZONA TÉCNICA · lo que comparten las cinco páginas
   Desarrolladores (data-piel=desarrolladores), API de AMI (api-ami), los
   flujos (flujos), el equipo (equipo) y el núcleo de datos (datos).
   ───────────────────────────────────────────────────────────────────────────
   LO QUE SE QUEDA, porque ES la elegancia que pidió conservar —y la mayor
   parte ya es de la app, de sus papeles legales—:
     · la serif de los títulos (Cormorant, en el peso de cada página: no se
       pasa a AIMA Serif, que solo tiene el 700 y el 600 cursiva y los
       engordaría), los numerales romanos en rojo, los filetes negros, las
       hojas con su filete dentro y la marca de agua;
     · las rejillas de pelo y CANTO DURO de API, Datos y Desarrolladores
       (decisión del 04/09: «rejilla de pelo y canto duro»: no se redondean);
     · el fondo de cada ventana (gris en API y flujos, blanco en Datos y
       Equipo, hueso y blanco alternos en Desarrolladores);
     · el lienzo de n8n de los flujos, tal cual: imita otro programa;
     · el código en monoespaciada y los colores de texto que cada página
       midió contra su fondo (los verdes y oros de lectura no se tocan).
   LO QUE TOMA LA PIEL DE LA APP:
     · Anton fuera: los titulares, en AIMA Negra; las cifras, en AIMA Serif
       recta. En los títulos de sección la palabra marcada SIGUE en serif
       cursiva roja: AIMA Negra + Serif cursiva es la pareja de Mazo.
     · la ceja con su raya roja de 24×2 en lugar de la gema y la bandera;
     · los estados como el chip de la app, con su luz: verde lo que está en
       marcha o disponible, ámbar lo que está montado o en camino;
     · los botones de la app, en pastilla: rojo con su degradado el de la
       acción (uno por pantalla) y blancos con su pelo los demás;
     · los iconos de la app: el trazo redondo (sección 1) y las baldosas
       donde el icono dice qué es algo (sección 9 y aima-piel-web.js);
     · Inter (las secciones I y VI de Desarrolladores) se va: Montserrat
       para leer y Poppins para rotular, como el resto.
   🔴 Igual que en el resto del fichero: ni un texto cambia, ni nada se mueve
      de sitio, y el móvil que es pantalla de app (body.appm: Desarrolladores,
      API y Equipo) no lleva nada de esto salvo los iconos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 14.1 · la ceja: la raya roja de la app en vez de la gema ───────────── */
html.piel-web:is([data-piel="api-ami"],[data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .hero-kicker,
html.piel-web:is([data-piel="api-ami"],[data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .et,
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .portada__meta .antetitulo{
  gap:10px;font:600 10.5px/1 var(--piel-pop);letter-spacing:.24em;color:var(--piel-gris);
}
html.piel-web:is([data-piel="api-ami"],[data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .hero-kicker::before,
html.piel-web:is([data-piel="api-ami"],[data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .et::before,
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .portada__meta .antetitulo::before{
  content:'';display:block;flex:none;width:24px;height:2px;border-radius:2px;
  background:var(--piel-led);box-shadow:0 0 8px rgba(254,49,66,.45);
}
html.piel-web:is([data-piel="api-ami"],[data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .hero-kicker .gema,
html.piel-web:is([data-piel="api-ami"],[data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .et > i,
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .antetitulo .bandera{display:none}

/* ── 14.2 · el titular: AIMA Negra, en minúscula de frase ───────────────── */
html.piel-web:is([data-piel="api-ami"],[data-piel="flujos"],[data-piel="datos"]) body:not(.appm) h1,
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .portada__titulo,
html.piel-web[data-piel="equipo"] body:not(.appm) .quien h2{
  font-family:var(--piel-negra);font-weight:800;font-style:normal;
  text-transform:none;letter-spacing:-.03em;word-spacing:.06em;
}
html.piel-web:is([data-piel="api-ami"],[data-piel="flujos"],[data-piel="datos"]) body:not(.appm) h1{
  font-size:clamp(32px,4.3vw,56px);line-height:1.06;
}
html.piel-web:is([data-piel="api-ami"],[data-piel="flujos"],[data-piel="datos"]) body:not(.appm) h1 em{
  font-family:var(--piel-negra);font-style:normal;color:var(--piel-rojo);
}

/* ── 14.3 · el título de sección: AIMA Negra + la palabra en serif cursiva ─ */
/* 06/10/2026 · LAS TRES IGUALES. API, Datos y Flujos comparten una sola regla
   de título de sección (antes Flujos llevaba 26 y 30 px, Datos 31, API 31) y
   una sola cursiva (la AIMA Serif de la app: Datos no carga la Cormorant). */
html.piel-web[data-piel="api-ami"] body:not(.appm) .seccion-titulo,
html.piel-web[data-piel="datos"] body:not(.appm) .bloque h2,
html.piel-web[data-piel="flujos"] body:not(.appm) :is(.f-cab,.cierre) h2{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;
  letter-spacing:-.025em;word-spacing:.05em;line-height:1.15;
  font-size:clamp(24px,2.5vw,31px);
}
html.piel-web[data-piel="api-ami"] body:not(.appm) .seccion-titulo em,
html.piel-web[data-piel="datos"] body:not(.appm) .bloque h2 em,
html.piel-web[data-piel="flujos"] body:not(.appm) :is(.f-cab,.cierre) h2 em{
  font-family:var(--piel-serif);font-style:italic;font-weight:600;text-transform:none;
  font-size:1.2em;letter-spacing:-.005em;color:var(--piel-rojo);
}

/* ── 14.3b · la entradilla y el aire del arranque: iguales en las tres ──── */
html.piel-web[data-piel="api-ami"] body:not(.appm) .wrap{padding:0 clamp(16px,4vw,28px)}
html.piel-web[data-piel="api-ami"] body:not(.appm) .hero-kicker{margin:22px 0 0}
html.piel-web[data-piel="api-ami"] body:not(.appm) .hero h1{margin:16px 0 0}
html.piel-web:is([data-piel="api-ami"],[data-piel="flujos"],[data-piel="datos"]) body:not(.appm) :is(.hero .sub,.hero .entrada){
  margin:20px 0 0;max-width:645px;font:400 clamp(14px,1.2vw,16.5px)/1.75 var(--piel-mont);color:var(--graphite,#3a3a3c);
}

/* ── 14.4 · el aviso «Por qué…»: rótulo de la app, con su raya de 18×2 ──── */
html.piel-web:is([data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .aviso b{
  display:flex;align-items:center;gap:10px;
  font:600 10.5px/1 var(--piel-pop);letter-spacing:.22em;color:var(--piel-gris);
}
html.piel-web:is([data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .aviso b::before{
  content:'';flex:none;width:18px;height:2px;border-radius:2px;background:var(--piel-led);
}

/* ── 14.5 · el estado: el chip de la app con su luz ──────────────────────
   El color de la letra y el del fondo son los que cada página midió contra
   su fondo (4,5:1 o más): lo que cambia es la forma, el pelo y la luz. */
html.piel-web:is([data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .f-est{
  gap:7px;padding:5px 11px 5px 9px;border:1px solid transparent;
  font:700 9px/1 var(--piel-negra);letter-spacing:.16em;
}
html.piel-web:is([data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .f-est::before{width:6px;height:6px}
html.piel-web:is([data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .f-est.vivo{border-color:rgba(52,199,89,.42)}
html.piel-web:is([data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .f-est.vivo::before{background:var(--pw-verde-led);box-shadow:var(--piel-verde-halo)}
html.piel-web:is([data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .f-est.montado{border-color:rgba(201,162,75,.5)}
html.piel-web:is([data-piel="flujos"],[data-piel="datos"]) body:not(.appm) .f-est.montado::before{background:var(--pw-ambar-led);box-shadow:0 0 0 3px rgba(245,166,35,.16),0 0 8px rgba(245,166,35,.6)}


/* ═══════════════════════════════════════════════════════════════════════════
   15 · DESARROLLADORES (html[data-piel=desarrolladores]) — el documento
   técnico: se quedan la serif, los romanos, los filetes y las hojas
   ═══════════════════════════════════════════════════════════════════════════ */
/* el titular: AIMA Negra en una línea, como el de Anton (su columna mide
   7,85 em de «Desarrolladores» a 800: de ahí los dos tamaños) */
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .portada__titulo{
  font-size:min(5.6vw,78px);line-height:1;letter-spacing:-.035em;
}
@media (max-width:900px){
  html.piel-web[data-piel="desarrolladores"] body:not(.appm) .portada__titulo{font-size:min(10vw,92px)}
}
/* las cifras de la casa (78 · 535): AIMA Serif recta; las cuenta censo.py */
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .cifra b{
  font:700 clamp(38px,3.7vw,50px)/1 var(--piel-serif);
  letter-spacing:-.01em;font-variant-numeric:lining-nums;
}

/* I · Cómo está hecho y VI · El laboratorio: desde el 06/10 llevan la cabeza y las
   letras de las demás secciones (Cormorant, Montserrat, Poppins), así que la piel
   ya no les pone nada: lo que escribió Bratney en la página se queda tal cual. */

/* II · la placa: cada pieza es una tarjeta de la app; su luz, el LED */
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .chip{background:var(--piel-card);box-shadow:var(--piel-sombra)}
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .chip:hover,
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .chip:focus-within{box-shadow:var(--piel-sombra-alta)}
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .chip:hover .chip__led,
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .chip:focus-within .chip__led{background:var(--piel-led);box-shadow:var(--piel-led-halo)}

/* IV · Qué hay aquí: la baldosa de cada acceso (la pone aima-piel-web.js
   en la misma caja de 44), el estado con su luz y los botones de la app */
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .acceso__icono.pw-baldosa{background:none;border:0;border-radius:0}
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .acceso__estado::before{
  width:7px;height:7px;border-radius:50%;margin:0 11px 1px 1px;
  background:var(--pw-verde-led);box-shadow:var(--piel-verde-halo);
}
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .acceso__estado--gris::before{
  background:var(--pw-ambar-led);box-shadow:0 0 0 3px rgba(245,166,35,.16),0 0 8px rgba(245,166,35,.6);
}
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .boton{
  border:0;border-radius:999px;background:var(--piel-rojo-g);color:#fff;
  box-shadow:var(--piel-boton-sombra);font:700 14.5px/1 var(--piel-negra);letter-spacing:0;
}
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .boton:hover{
  background:var(--piel-rojo-g);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 34px -16px rgba(193,39,45,.95);
}
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .boton--claro,
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .boton--claro:hover{
  background:#fff;color:var(--piel-tinta);border:1px solid var(--piel-borde-2);box-shadow:var(--piel-sombra);
}
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .boton--claro:hover{border-color:rgba(11,11,13,.32);box-shadow:var(--piel-sombra-alta)}
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .tienda{
  border-radius:var(--pw-r3);border-color:var(--piel-borde-2);background:var(--piel-card);box-shadow:var(--piel-sombra);
}
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .tienda span{font-family:var(--piel-negra);font-weight:700}
/* «Próximamente»: el chip de la app con su luz roja */
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .tienda i{
  display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 7px;
  background:#fff;border-color:rgba(254,49,66,.32);color:var(--piel-rojo);
  font-family:var(--piel-negra);
}
html.piel-web[data-piel="desarrolladores"] body:not(.appm) .tienda i::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--piel-led);box-shadow:0 0 6px rgba(254,49,66,.8);
}


/* ═══════════════════════════════════════════════════════════════════════════
   16 · API DE AMI (html[data-piel=api-ami]) — la consola: gris, rejilla de
   pelo y canto duro; las piezas blancas se apoyan con la sombra de la app
   ═══════════════════════════════════════════════════════════════════════════ */
html.piel-web[data-piel="api-ami"] body:not(.appm) .ep-ind,
html.piel-web[data-piel="api-ami"] body:not(.appm) .ep-lista,
html.piel-web[data-piel="api-ami"] body:not(.appm) .frontera{box-shadow:var(--piel-sombra)}
html.piel-web[data-piel="api-ami"] body:not(.appm) .ep-metodo{border-radius:6px}
/* 🔴 el cuadrito de «quién puede llamarla» (.ep-auth) NO pasa a luz redonda:
   la página dice «El cuadrado dorado marca lo que pide llave». */


/* ═══════════════════════════════════════════════════════════════════════════
   17 · LOS FLUJOS (html[data-piel=flujos]) — el lienzo de n8n no se toca
   ═══════════════════════════════════════════════════════════════════════════ */
html.piel-web[data-piel="flujos"] body:not(.appm) .aviso,
html.piel-web[data-piel="flujos"] body:not(.appm) .cierre{box-shadow:var(--piel-sombra)}
html.piel-web[data-piel="flujos"] body:not(.appm) .cierre a{
  height:46px;padding:0 24px;background:var(--piel-rojo-g);color:#fff;
  box-shadow:var(--piel-boton-sombra);font:700 13px/1 var(--piel-negra);
}
html.piel-web[data-piel="flujos"] body:not(.appm) .cierre a:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 34px -16px rgba(193,39,45,.95)}
html.piel-web[data-piel="flujos"] body:not(.appm) .cierre a.linea,
html.piel-web[data-piel="flujos"] body:not(.appm) .cierre a.linea:hover{
  background:#fff;color:var(--piel-tinta);border:1px solid var(--piel-borde-2);box-shadow:var(--piel-sombra);
}
html.piel-web[data-piel="flujos"] body:not(.appm) .cierre a.linea:hover{border-color:rgba(11,11,13,.32);box-shadow:var(--piel-sombra-alta)}


/* ═══════════════════════════════════════════════════════════════════════════
   18 · EL EQUIPO (html[data-piel=equipo]) — la serif manda en esta página
   🔴 Las reglas de las secciones 2 y 3 alcanzan a #hero h1, .pp-cab h2 y
      #cierre h2 en cualquier página. Aquí esos tres son la Cormorant de la
      página (la elegancia del encargo) y se devuelven tal cual eran.
   ═══════════════════════════════════════════════════════════════════════════ */
html.piel-web[data-piel="equipo"] body:not(.appm) #hero h1,
html.piel-web[data-piel="equipo"] body:not(.appm) .pp-cab h2,
html.piel-web[data-piel="equipo"] body:not(.appm) #cierre h2{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  letter-spacing:normal;word-spacing:normal;
}
html.piel-web[data-piel="equipo"] body:not(.appm) #hero h1{line-height:1.04}
html.piel-web[data-piel="equipo"] body:not(.appm) .pp-cab h2,
html.piel-web[data-piel="equipo"] body:not(.appm) #cierre h2{line-height:1.06}
html.piel-web[data-piel="equipo"] body:not(.appm) #hero h1 em,
html.piel-web[data-piel="equipo"] body:not(.appm) .pp-cab h2 em,
html.piel-web[data-piel="equipo"] body:not(.appm) #cierre h2 em{font-style:italic;color:var(--piel-rojo)}

/* la ficha: el número en AIMA Serif, el nombre en AIMA Negra, su raya en LED */
html.piel-web[data-piel="equipo"] body:not(.appm) .quien .et::before{
  font:700 13px/1 var(--piel-serif);font-variant-numeric:lining-nums;letter-spacing:.02em;
}
html.piel-web[data-piel="equipo"] body:not(.appm) .quien h2{font-size:clamp(32px,3.7vw,50px);line-height:1.04}
html.piel-web[data-piel="equipo"] body:not(.appm) .quien h2::after{
  border-radius:2px;background:var(--piel-led);box-shadow:0 0 8px rgba(254,49,66,.45);
}
html.piel-web[data-piel="equipo"] body:not(.appm) .oficios span{
  background:var(--piel-card);border-color:var(--piel-borde-2);box-shadow:var(--piel-sombra);
}
html.piel-web[data-piel="equipo"] body:not(.appm) .padron .prox i{font-family:var(--piel-negra);font-weight:800}

/* En qué ando: tarjetas de la app */
html.piel-web[data-piel="equipo"] body:not(.appm) .an{
  background:var(--piel-card);border-color:var(--piel-borde);box-shadow:var(--piel-sombra);border-radius:var(--pw-r1);
}
html.piel-web[data-piel="equipo"] body:not(.appm) .an b{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;
  letter-spacing:-.022em;font-size:clamp(18px,1.9vw,21px);line-height:1.15;
}
/* el sitio vacío (oscuro): la ceja y el titular; su botón se queda claro,
   que el rojo de esta pantalla es el de «Hablar con nosotros» */
html.piel-web[data-piel="equipo"] body:not(.appm) .hueco .et{
  display:inline-flex;align-items:center;gap:10px;
  font:600 10.5px/1 var(--piel-pop);letter-spacing:.24em;color:rgba(242,242,240,.62);
}
html.piel-web[data-piel="equipo"] body:not(.appm) .hueco .et::before{
  content:'';flex:none;width:24px;height:2px;border-radius:2px;background:var(--piel-led);box-shadow:0 0 10px rgba(254,49,66,.7);
}
html.piel-web[data-piel="equipo"] body:not(.appm) .hueco h3{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;
  letter-spacing:-.025em;word-spacing:.05em;font-size:clamp(20px,2.4vw,26px);line-height:1.1;
}
html.piel-web[data-piel="equipo"] body:not(.appm) .hueco .pill{
  background:#fff;color:var(--piel-tinta);box-shadow:0 12px 26px -14px rgba(0,0,0,.7);
}


/* ═══════════════════════════════════════════════════════════════════════════
   19 · EL NÚCLEO DE DATOS (html[data-piel=datos]) — el documento en blanco
   ═══════════════════════════════════════════════════════════════════════════ */
/* las siete tablas: la baldosa (aima-piel-web.js) delante del nombre */
html.piel-web[data-piel="datos"] body:not(.appm) .tb-cab.pw-baldosa{align-items:center;flex-wrap:wrap;gap:6px 8px}
/* el nombre pegado a su baldosa, no flotando en medio de la cabecera */
html.piel-web[data-piel="datos"] body:not(.appm) .tb-cab.pw-baldosa h3{flex:1 1 auto;white-space:nowrap;font-size:13.5px;text-align:left}
html.piel-web[data-piel="datos"] body:not(.appm) .tb-et{
  border-radius:999px;padding:4px 9px;border-color:var(--piel-borde-2);
  font-family:var(--piel-negra);font-weight:700;
}
html.piel-web[data-piel="datos"] body:not(.appm) .cols li{border-radius:6px}
/* dentro o fuera de la UE: el chip con su luz */
html.piel-web[data-piel="datos"] body:not(.appm) .pv i{
  display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 8px;border-radius:999px;
  font-family:var(--piel-negra);font-weight:700;
}
html.piel-web[data-piel="datos"] body:not(.appm) .pv i::before{content:'';flex:none;width:5px;height:5px;border-radius:50%}
html.piel-web[data-piel="datos"] body:not(.appm) .pv i.ue::before{background:var(--pw-verde-led);box-shadow:0 0 6px rgba(52,199,89,.85)}
html.piel-web[data-piel="datos"] body:not(.appm) .pv i.fu::before{background:var(--pw-ambar-led);box-shadow:0 0 6px rgba(245,166,35,.85)}
/* «Ninguno», la palabra que contesta: AIMA Negra */
html.piel-web[data-piel="datos"] body:not(.appm) .ap-no .ninguno{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;
  letter-spacing:-.03em;font-size:clamp(24px,2.6vw,31px);line-height:1.05;
}
html.piel-web[data-piel="datos"] body:not(.appm) .derechos span{border-radius:999px;padding:8px 14px 8px 12px}
/* 🟠 ARREGLO APARTE (no es piel): las tres láminas de grabado son PNG en
   gris de 8 bits SIN canal alfa, y una máscara lee el alfa por defecto: se
   pintaban como tres cuadrados grises enteros. En modo luminancia sale el
   grabado, que es lo que pedía su comentario del 04/09. */
html.piel-web[data-piel="datos"] .lamina{-webkit-mask-source-type:luminance;mask-mode:luminance}


/* ═══════════════════════════════════════════════════════════════════════════
   20 · MATERIAL (html[data-piel=material]) — el muro de equipo
   ───────────────────────────────────────────────────────────────────────────
   ⚫ 06/10/2026 · Bratney: «ves con Material, mismo objetivo: unificar las
   tipografías y la estética que estamos usando, como en Portafolio, Asistencia
   y Desarrolladores. Te hago la pasada completa».
   SE QUEDA: el muro entero —la junta de 8 px, los bloques de canto duro, sus
   cinco colores de lectura (blanco, hueso, tinta, rojo, oro) y el mosaico que
   monta aima-muro.js—, la barra negra de packs, el cajón negro de programas y
   el fondo de cada pieza. Son láminas: sólo cambian de letra, como las
   láminas oscuras de las demás.
   TOMA LA PIEL: Anton fuera (los nombres del muro, el rótulo grande, el cajón,
   la ficha y la placa → AIMA Negra, en minúscula de frase; las cifras → AIMA
   Serif recta con cifras de caja alta); la baldosa de la app delante de cada
   programa del cajón (eran un trazo dentro de un cuadrado, lo que la ley de
   las baldosas prohíbe); el estado de cada pieza como el chip de la app con su
   luz; el botón «Apps y programas» como botón blanco en pastilla (va sobre el
   bloque rojo, y un botón rojo sobre rojo no se lee).
   🔴 Los nombres del muro los encoge aima-muro.js hasta que caben (mide, no
      supone la letra): con la Negra, más ancha que Anton, se escriben más
      pequeños de base para que casi ninguno tenga que encogerse.
   🔴 El móvil es pantalla de app (`appm`) y no lleva nada de esto.
   ═══════════════════════════════════════════════════════════════════════════ */
html.piel-web[data-piel="material"] body:not(.appm) .mu-rotulo,
html.piel-web[data-piel="material"] body:not(.appm) .mu-app-txt b,
html.piel-web[data-piel="material"] body:not(.appm) .mu-placa b,
html.piel-web[data-piel="material"] body:not(.appm) .mu-ficha-nom,
html.piel-web[data-piel="material"] body:not(.appm) .mu-nomovil b{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;
  letter-spacing:-.022em;word-spacing:.04em;line-height:1.05;
}
/* los nombres del muro: las dos tallas grandes, un 22 % menos que con Anton
   (la Negra es más ancha); las tres pequeñas parten del mismo tamaño que tenían,
   en 700, y aima-muro.js las encoge hasta que caben: así cada nombre acaba tan
   grande como le deja su bloque */
html.piel-web[data-piel="material"] body:not(.appm) .mu-t-xl .mu-rotulo{font-size:clamp(17px,1.5vw,32px)}
html.piel-web[data-piel="material"] body:not(.appm) .mu-t-l  .mu-rotulo{font-size:clamp(13px,1.02vw,21px)}
html.piel-web[data-piel="material"] body:not(.appm) .mu-t-m  .mu-rotulo{font-size:clamp(12px,1vw,19px);font-weight:700}
html.piel-web[data-piel="material"] body:not(.appm) .mu-t-s  .mu-rotulo{font-size:clamp(10px,.8vw,15px);font-weight:700}
html.piel-web[data-piel="material"] body:not(.appm) .mu-t-xs .mu-rotulo{font-size:clamp(9px,.68vw,12.5px);font-weight:700;letter-spacing:-.01em}
html.piel-web[data-piel="material"] body:not(.appm) :is(.mu-t-m,.mu-t-s,.mu-t-xs) .mu-rotulo{line-height:1.12}
html.piel-web[data-piel="material"] body:not(.appm) .mu-titulo .mu-rotulo{font-size:clamp(26px,3vw,58px);letter-spacing:-.03em}
html.piel-web[data-piel="material"] body:not(.appm) .mu-puerta .mu-rotulo{font-size:clamp(12.5px,1vw,19px)}
html.piel-web[data-piel="material"] body:not(.appm) .mu-app-txt b{font-size:15px;font-weight:700;letter-spacing:-.01em}
html.piel-web[data-piel="material"] body:not(.appm) .mu-placa b{font-size:clamp(18px,1.7vw,29px)}
html.piel-web[data-piel="material"] body:not(.appm) .mu-ficha-nom{font-size:clamp(24px,2.3vw,40px);letter-spacing:-.028em}

/* las cifras del muro: AIMA Serif recta (la cifra que se quiere mirar) */
html.piel-web[data-piel="material"] body:not(.appm) .mu-cifra b{
  font-family:var(--piel-serif);font-weight:700;letter-spacing:-.01em;line-height:.94;
  font-variant-numeric:lining-nums;
}

/* el cajón de programas: la baldosa de la app, no un trazo dentro de un cuadrado */
html.piel-web[data-piel="material"] body:not(.appm) .mu-app-ic.pw-baldosa{
  width:auto;height:auto;background:none;box-shadow:none;border-radius:0;
}
html.piel-web[data-piel="material"] body:not(.appm) .mu-app:hover .mu-app-ic.pw-baldosa{background:none}
html.piel-web[data-piel="material"] body:not(.appm) .mu-app[aria-current="true"] .mu-app-ic.pw-baldosa{background:none;box-shadow:none}
html.piel-web[data-piel="material"] body:not(.appm) .mu-app[aria-current="true"] .mu-app-ic .ab-tile{
  box-shadow:0 0 0 2px var(--piel-rojo),0 4px 9px -5px rgba(11,11,13,.55);
}

/* «Apps y programas»: el botón blanco en pastilla de la app */
html.piel-web[data-piel="material"] body:not(.appm) .mu-appsbtn{
  border-radius:999px;background:var(--piel-card-plano);color:var(--piel-tinta);
  border:1px solid var(--piel-borde-2);box-shadow:var(--piel-sombra);
  font:700 12.5px/1 var(--piel-negra);letter-spacing:0;text-transform:none;padding:11px 17px 11px 14px;
}
html.piel-web[data-piel="material"] body:not(.appm) .mu-appsbtn:hover{
  background:var(--piel-card-plano);border-color:rgba(11,11,13,.32);box-shadow:var(--piel-sombra-alta);
}

/* el estado de cada pieza: el chip de la app con su luz. Los colores de
   lectura de cada estado son los que la página ya tenía. */
html.piel-web[data-piel="material"] body:not(.appm) .est{
  gap:7px;padding:5px 11px 5px 9px;border-radius:999px;border:1px solid transparent;
  font:700 9px/1 var(--piel-negra);letter-spacing:.14em;
}
html.piel-web[data-piel="material"] body:not(.appm) .est::before{width:6px;height:6px;border-radius:50%}
html.piel-web[data-piel="material"] body:not(.appm) .est-ok{color:var(--pw-verde);background:rgba(52,199,89,.11);border-color:rgba(52,199,89,.34)}
html.piel-web[data-piel="material"] body:not(.appm) .est-ok::before{background:var(--pw-verde-led);box-shadow:var(--piel-verde-halo)}
html.piel-web[data-piel="material"] body:not(.appm) .est-pedido{border-color:rgba(201,162,75,.5)}
html.piel-web[data-piel="material"] body:not(.appm) .est-pedido::before{background:var(--pw-ambar-led);box-shadow:0 0 0 3px rgba(245,166,35,.16),0 0 8px rgba(245,166,35,.6)}
html.piel-web[data-piel="material"] body:not(.appm) .est-comprar{border-color:rgba(193,39,45,.3)}
html.piel-web[data-piel="material"] body:not(.appm) .est-comprar::before{background:var(--piel-led);box-shadow:var(--piel-led-halo)}
html.piel-web[data-piel="material"] body:not(.appm) .est-reserva{border-color:var(--piel-raya)}
html.piel-web[data-piel="material"] body:not(.appm) .est-futuro{border-radius:999px}


/* ═══════════════════════════════════════════════════════════════════════════
   21 · PRODUCTOS (html[data-piel=productos]) — el escaparate y la lista de seis
   ───────────────────────────────────────────────────────────────────────────
   ⚫ 06/10/2026 · Bratney: «ahora hazlo con la parte de productos» (la misma
   pasada que Material, Portafolio, Asistencia y Desarrolladores).
   SE QUEDA: el escaparate entero (las escenas de píxeles, el cristal, el
   tráiler, las flechas y la regleta), el índice de seis filas con su filo rojo
   y la cinta de obra, las mascotas, los textos y el orden. Cambia sólo lo que
   es letra, chip y tarjeta.
   TOMA LA PIEL: Anton fuera (titular, nombre de cada fila, cartela del
   escaparate, números de pieza → AIMA Negra en minúscula de frase; los
   precios → AIMA Serif recta con cifras de caja alta, la cifra que se quiere
   mirar); «Próximamente» como el chip de la app con su luz; la mascota de cada
   fila sobre baldosa-tarjeta de la app; la ceja del hero con su raya roja.
   🔴 El titular (`#hero h1`), el cierre (`#cierre h2`), los botones (`.pill`),
      las cookies, el menú y el pie ya los pone la parte común (secciones 2-5).
   🔴 No existe pantalla de app para esta página: en el móvil es la misma web.
   ═══════════════════════════════════════════════════════════════════════════ */
/* el titular: más ancho que Anton, así que un poco menos de cuerpo */
html.piel-web[data-piel="productos"] body:not(.appm) #hero h1{font-size:clamp(38px,5.3vw,78px);line-height:1.04;letter-spacing:-.03em}
/* la ceja, a la izquierda en escritorio (la sección 3 la centra) */
@media (min-width:1024px){
  html.piel-web[data-piel="productos"] body:not(.appm) #hero .tag{justify-content:flex-start}
}
/* «El escaparate · cuatro productos…»: rótulo de la app, con su raya roja */
html.piel-web[data-piel="productos"] body:not(.appm) .teatro-cinta span:first-child{
  display:inline-flex;align-items:center;gap:10px;flex:none;white-space:nowrap;
}
html.piel-web[data-piel="productos"] body:not(.appm) .teatro-cinta span:first-child::before{
  content:'';display:block;flex:none;width:18px;height:2px;border-radius:2px;background:var(--piel-led);
}

/* nombres: la fila, la cartela y su número */
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra .info b,
html.piel-web[data-piel="productos"] body:not(.appm) .esc-nom,
html.piel-web[data-piel="productos"] body:not(.appm) .esc-ix,
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra .ix{
  font-family:var(--piel-negra);font-weight:800;text-transform:none;font-style:normal;
}
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra .info b{
  font-size:clamp(16px,1.5vw,20px);letter-spacing:-.022em;line-height:1.12;word-spacing:.03em;
}
html.piel-web[data-piel="productos"] body:not(.appm) .esc-nom{
  font-size:clamp(22px,2.1vw,29px);letter-spacing:-.026em;line-height:1.08;word-spacing:.03em;
}
html.piel-web[data-piel="productos"] body:not(.appm) .esc-ix{
  font-size:clamp(36px,3.2vw,48px);letter-spacing:-.04em;line-height:1;
}
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra .ix{font-size:12.5px;letter-spacing:0}

/* los precios: AIMA Serif recta con cifras de caja alta */
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra .precio b,
html.piel-web[data-piel="productos"] body:not(.appm) .esc-precio b{
  font-family:var(--piel-serif);font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:lining-nums;
}
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra .precio b{font-size:clamp(25px,2.8vw,32px)}
html.piel-web[data-piel="productos"] body:not(.appm) .esc-precio b{font-size:clamp(29px,2.6vw,36px)}
/* «A medida» / «Se tasa» no son cifras: la Negra, como antes iban en Poppins */
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra .precio b.medida,
html.piel-web[data-piel="productos"] body:not(.appm) .esc-precio b.medida{
  font-family:var(--piel-negra);font-weight:700;letter-spacing:-.015em;font-variant-numeric:normal;
}
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra .precio b.medida{font-size:15px}
html.piel-web[data-piel="productos"] body:not(.appm) .esc-precio b.medida{font-size:17px}
html.piel-web[data-piel="productos"] body:not(.appm) :is(.pr-barra .precio i,.esc-precio i){font-weight:600;color:var(--piel-gris)}

/* la mascota de cada fila: la baldosa-tarjeta de la app */
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra .masc{
  background:var(--piel-card);border:1px solid var(--piel-borde);box-shadow:var(--piel-sombra);
}
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra.mirando .masc{
  background:linear-gradient(180deg,#fff,rgba(193,39,45,.07));border-color:rgba(193,39,45,.28);
}

/* la fila 06 lleva el logo de la app (icono a sangre): sin marco de tarjeta, con su sombra de icono */
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra .masc-app,
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra.mirando .masc-app{
  background:#0B0B0D;border:0;box-shadow:0 4px 9px -5px rgba(11,11,13,.55);
}

/* «Próximamente»: el chip de la app, con su luz */
html.piel-web[data-piel="productos"] body:not(.appm) .chip{
  display:inline-flex;align-items:center;gap:7px;
  font:700 9.5px/1 var(--piel-negra);letter-spacing:.14em;
  padding:6px 12px 6px 10px;border:1px solid rgba(193,39,45,.3);
}
html.piel-web[data-piel="productos"] body:not(.appm) .chip.grande{font-size:10px;padding:7px 13px 7px 11px}
html.piel-web[data-piel="productos"] body:not(.appm) .chip::before{
  content:'';flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--piel-led);box-shadow:var(--piel-led-halo);
}
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra.candado:hover .chip.obra::before,
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra.candado.mirando .chip.obra::before{background:#fff;box-shadow:none}
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra.candado:hover .chip.obra,
html.piel-web[data-piel="productos"] body:not(.appm) .pr-barra.candado.mirando .chip.obra{border-color:transparent}

/* el enlace de la cartela y las notas */
html.piel-web[data-piel="productos"] body:not(.appm) .esc-liga{font-family:var(--piel-negra);font-weight:700;letter-spacing:0}
html.piel-web[data-piel="productos"] body:not(.appm) .nota-lista b{font-weight:700;color:var(--piel-tinta)}
@media (max-width:640px){
  html.piel-web[data-piel="productos"] body:not(.appm) .teatro-cinta span:first-child::before{display:none}
}