/* =====================================================================
   BARBER  -  Tema "Barberia Clasica"  (mobile-first)
   Vintage: cuero oscuro, crema papel, oro/laton, rojo de poste de barbero.
   Tipografia de letrero (Bebas Neue / Oswald) + cuerpo legible (Inter).
   Se mantienen todas las clases; solo cambia la piel visual.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --carbon:    #17120d;   /* madera/cuero oscuro */
    --carbon-2:  #241b13;
    --crema:     #efe6d4;   /* fondo papel viejo */
    --papel:     #fbf6ec;   /* tarjetas */
    --oro:       #c89b3c;   /* laton: solo relleno, gradientes y adornos sin texto */
    --oro-osc:   #97701e;   /* estructura: bordes, sombras y foco */
    --oro-texto: #84621a;   /* laton legible sobre fondo claro: cifras, enlaces, iconos (5.21:1 sobre papel) */
    --oro-claro: #e6c878;
    --rojo:      #b3382c;   /* rojo poste de barbero */
    --rojo-osc:  #8f2a20;
    --azul:      #244a5d;   /* azul poste (acento) */
    --tinta:     #2b2118;   /* texto principal (cafe muy oscuro) */
    --gris:      #726654;   /* texto apagado calido, ya legible (5.21:1 sobre papel) */
    --linea:     #e2d4ba;   /* hairlines decorativos, nunca borde de un control */
    --linea-fuerte: #ac8948; /* borde de controles: input, slot, chip de dia (3.03:1) */
    --ok:        #2c7449;
    --alerta:    #b3382c;
    --radio:     12px;
    --sombra:    0 1px 2px rgba(40,28,12,.10), 0 8px 22px rgba(40,28,12,.07);
    --poste: repeating-linear-gradient(45deg,
                var(--rojo) 0 10px, #f4ede0 10px 20px, var(--azul) 20px 30px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--crema);
    /* textura sutil de papel */
    background-image:
        radial-gradient(rgba(151,112,30,.05) 1px, transparent 1px),
        radial-gradient(rgba(151,112,30,.04) 1px, transparent 1px);
    background-size: 22px 22px, 22px 22px;
    background-position: 0 0, 11px 11px;
    color: var(--tinta);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--oro-texto); }

h1, h2, h3 { font-family: 'Oswald', sans-serif; letter-spacing: .02em; }

/* ----- Barra superior --------------------------------------------- */
.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    background:
        linear-gradient(180deg, var(--carbon-2), var(--carbon));
    color: #f4ede0;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--oro-osc);
    box-shadow: var(--sombra);
}
.barra::before {                       /* franja de poste de barbero */
    content: "";
    position: absolute;
    top: 0; left: -80px; right: -80px;
    height: 5px;
    background: var(--poste);
    z-index: 1;
    /* Gira, pero mas lento que el del login: esta barra es sticky y el
       barbero la tiene delante toda la jornada. Mismo ciclo exacto de
       30*raiz(2)=42.427px para que el filete no salte al reiniciar. */
    animation: poste-gira 4.5s linear infinite;
}
.barra::after {                        /* halo de laton, fijo: aqui no deriva nada */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(70% 180% at 12% 0%, rgba(200,155,60,.16), transparent 60%);
}
.barra > * { position: relative; z-index: 1; }
.barra { overflow: hidden; }
/* El titulo cede espacio, las acciones no. Sin esto un nombre de negocio
   largo (o el selector de idioma con los nombres completos) empuja los
   enlaces de la derecha fuera de la pantalla, y como la barra recorta el
   desbordamiento, desaparecen sin dejar rastro. Un flex hijo no encoge
   por debajo de su contenido hasta que se le pone min-width: 0. */
.barra > *:not(.barra-acciones) { min-width: 0; }
.barra-acciones { flex: 0 0 auto; }
.barra h1 {
    font-size: 1.45rem;
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.barra .marca { color: var(--oro-claro); }
.barra-sub { font-family: 'Inter', sans-serif; font-size: .68rem; color: #d8c9ad; letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.barra-acciones { display: flex; align-items: center; gap: 14px; }
.barra a { color: #e7dcc4; text-decoration: none; font-size: .9rem; }
.barra-acciones a { font-size: 1.05rem; }

/* ----- Selector de idioma ------------------------------------------ */
/* Los dos idiomas se distinguen por FONDO, no por opacidad. La version
   anterior apagaba el inactivo al 55%, que sobre carbon daba 5.45:1: pasa
   AA de milagro, pero al lado del activo se leia como texto muerto y en
   un movil al sol no se veia. Ahora los dos son legibles y el activo se
   reconoce porque esta encendido en laton. */
.lang-switch { display: inline-flex; gap: 4px; font-size: .78rem; font-weight: 600; }
.lang-switch a {
    padding: 4px 10px;
    border-radius: 999px;
    color: #c7b696;                      /* 9.36:1 sobre carbon */
    border: 1px solid rgba(200,155,60,.34);
    text-decoration: none;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}
.lang-switch a:hover { color: #e7dcc4; }  /* 13.67:1 */
.lang-switch a.lang-activo {
    background: var(--oro);
    border-color: var(--oro);
    color: #2b2118;                      /* 6.16:1 sobre el laton solido */
}

/* En la barra del panel y en movil los dos nombres completos empujan
   fuera de la pantalla los enlaces de la derecha (actividad, perfil,
   salir). Ahi se ensena solo el idioma AL QUE puedes cambiar, que es la
   unica pastilla que hace algo: la activa no lleva a ninguna parte.
   El title dice a que idioma cambia, para quien use lector de pantalla. */
/* Por defecto manda el nombre completo, que es lo que se reconoce */
.lg-corto { display: none; }

/* En las dos barras apretadas Y en movil no caben "Espanol" y "English"
   junto a los tres enlaces de la derecha: en 390px no hay sitio fisico, y
   lo que sobresale se pierde sin dejar rastro porque la barra recorta el
   desbordamiento. Ahi se cae a las siglas, que con las pastillas de color
   ya se distinguen de sobra. En el login, el registro y la pagina de
   reserva el selector va en su propia linea, asi que ahi el nombre
   completo se queda siempre, incluso en movil. */
@media (max-width: 620px) {
    .barra .lg-largo, .venta-barra .lg-largo { display: none; }
    .barra .lg-corto, .venta-barra .lg-corto { display: inline; }
    .barra { padding: 10px 12px; }
    .barra h1 { font-size: 1.12rem; }
    .barra-sub { font-size: .62rem; }
    .barra-acciones { gap: 10px; }
}
.book-header .lang-switch { margin-top: 8px; }

/* ----- Contenedor ------------------------------------------------- */
.contenido {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 16px 96px;
}

/* ----- Tarjetas --------------------------------------------------- */
.tarjeta {
    background: var(--papel);
    border-radius: var(--radio);
    border: 1px solid var(--linea);
    box-shadow: var(--sombra);
    padding: 16px;
    margin-bottom: 14px;
}
.tarjeta h2 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta);
}

/* ----- Secciones titulo ------------------------------------------- */
.titulo-seccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 12px;
}
.titulo-seccion h2 {
    margin: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.titulo-seccion h2::before {           /* tijera decorativa */
    content: "\2702";
    color: var(--oro-texto);
    margin-right: 8px;
    font-size: .9em;
}
.sub { color: var(--gris); font-size: .85rem; }

/* ----- Botones ---------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(180deg, var(--carbon-2), var(--carbon));
    color: #f4ede0;
    padding: 13px 16px;
    font-family: 'Oswald', sans-serif;
    font-size: .98rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    -webkit-appearance: none;
    transition: transform .05s ease, filter .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(1.08); }
.btn-acento { background: linear-gradient(180deg, var(--oro-claro), var(--oro)); color: #3a2a0c; box-shadow: 0 2px 0 var(--oro-osc); }
.btn-wa     { background: #25D366; color: #06351b; box-shadow: 0 2px 0 #1a9c4b; }
.btn-ok     { background: var(--ok); box-shadow: 0 2px 0 #1f5a38; }
.btn-alerta { background: var(--rojo); box-shadow: 0 2px 0 var(--rojo-osc); }
.btn-ghost  { background: transparent; color: var(--tinta); border: 1px solid var(--oro-osc); box-shadow: none; }
.btn-sm     { width: auto; padding: 8px 12px; font-size: .8rem; border-radius: 8px; }

.fila-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.fila-botones .btn { width: auto; flex: 1 1 auto; }

/* ----- Formularios ------------------------------------------------ */
label { display: block; font-family: 'Oswald', sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); margin: 12px 0 4px; font-weight: 600; }
input, select, textarea {
    width: 100%;
    min-width: 0;            /* evita el ancho minimo terco de date/time en Chrome */
    max-width: 100%;
    padding: 13px 12px;
    border: 1px solid var(--linea-fuerte);  /* el borde es lo unico que identifica el control */
    border-radius: 9px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    background: #fff;
    color: var(--tinta);
}
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--oro-osc);           /* el foco tiene que verse: en --oro daba 2.56:1 */
    box-shadow: 0 0 0 3px rgba(151,112,30,.28);
}

/* ----- Lista de citas / clientes ---------------------------------- */
.item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linea);
    text-decoration: none;
    color: inherit;
}
.item:last-child { border-bottom: none; }
.item .hora {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: .02em;
    color: var(--oro-texto);
    min-width: 70px;
    line-height: 1;
}
.item .info { flex: 1 1 auto; min-width: 0; }
.item .info .nombre { font-weight: 600; }
.item .info .detalle { color: var(--gris); font-size: .85rem; }
.item .chevron { color: var(--oro-texto); font-size: 1.1rem; }

/* ----- Etiquetas de estado ---------------------------------------- */
.estado {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: 1px solid transparent;
}
.estado-pendiente  { background: #fbeccb; color: #8a6500; border-color: #eccf86; }
.estado-confirmada { background: #e7eef1; color: var(--azul); border-color: #c4d6de; }
.estado-completada { background: #dcefdf; color: #1f5a38; border-color: #b6dcbf; }
.estado-no_show    { background: #f6dcd7; color: var(--rojo-osc); border-color: #e6b3aa; }
.estado-cancelada  { background: #e9e0cf; color: #6d6251; border-color: var(--linea); }

/* ----- Numeros / stats -------------------------------------------- */
.grid-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
    background: linear-gradient(180deg, #fffaf0, var(--papel));
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px;
    position: relative;
    overflow: hidden;
}
.stat::after {                         /* filete dorado lateral */
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--oro-claro), var(--oro-osc));
}
.stat .valor { font-family: 'Bebas Neue', sans-serif; font-size: 2.3rem; line-height: 1; color: var(--tinta); }
.stat .etiqueta { color: var(--gris); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

/* ----- Navegacion inferior ---------------------------------------- */
.nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 30;
    background: linear-gradient(180deg, var(--carbon-2), var(--carbon));
    border-top: 2px solid var(--oro-osc);
    display: flex;
    justify-content: space-around;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
.nav a {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #c9b896;
    font-family: 'Oswald', sans-serif;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 0;
}
/* Los iconos son SVG en linea, no emoji: heredan el color con currentColor
   y asi no salen a todo color en iPhone rompiendo la paleta. */
.nav a .ico { display: flex; justify-content: center; align-items: center; height: 24px; }
.ico-svg { display: block; }
.btn .ico-svg { width: 17px; height: 17px; vertical-align: -3px; display: inline-block; }
.nav a.activo { color: var(--oro-claro); font-weight: 700; }

/* ----- Slots de horario ------------------------------------------- */
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.slot {
    text-align: center;
    padding: 12px 0;
    border: 1px solid var(--linea-fuerte);
    border-radius: 9px;
    background: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .05s ease;
}
.slot.sel { background: linear-gradient(180deg, var(--oro-claro), var(--oro)); border-color: var(--oro-osc); color: #3a2a0c; }
.slot:active { transform: translateY(1px); }

/* ----- Servicios / barberos elegibles (booking) ------------------- */
.servicio-op {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--linea-fuerte);
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.servicio-op.sel { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(200,155,60,.28); background: #fffaf0; }
.servicio-op .precio { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--oro-texto); line-height: 1; }

/* ----- Avisos ----------------------------------------------------- */
.aviso { padding: 12px 14px; border-radius: 9px; margin-bottom: 14px; font-size: .9rem; border: 1px solid transparent; }
.aviso-ok    { background: #dcefdf; color: #1f5a38; border-color: #b6dcbf; }
.aviso-error { background: #f6dcd7; color: var(--rojo-osc); border-color: #e6b3aa; }
.aviso-alerta { background: #fbeccb; color: #8a6500; border-color: #e8d29b; }  /* 4.56:1 */
.vacio { text-align: center; color: var(--gris); padding: 28px 10px; }

/* ----- Encabezado pagina publica (booking / login) ---------------- */
.book-header {
    position: relative;
    background:
        radial-gradient(120% 140% at 50% -20%, var(--carbon-2), var(--carbon) 70%);
    color: #f4ede0;
    text-align: center;
    padding: 38px 16px 30px;
    border-bottom: 3px solid var(--oro-osc);
}
.book-header::before {                 /* franja de poste de barbero arriba */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 7px;
    background: var(--poste);
}
.book-header .avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--oro-claro), var(--oro));
    color: var(--carbon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    margin-bottom: 12px;
    /* Doble aro: si el negocio no subio foto, el monograma tiene que leerse
       como decision de marca y no como un hueco sin rellenar */
    box-shadow: 0 0 0 3px var(--carbon), 0 0 0 6px rgba(200,155,60,.38), 0 8px 20px rgba(0,0,0,.40);
}
.book-header h1 {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.1rem;
    letter-spacing: .03em;
    line-height: 1;
}
.book-header p { margin: 6px 0 0; color: #d8c9ad; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }

/* ----- Vida en el encabezado --------------------------------------
   Cuatro capas, todas animadas con transform/opacity o sobre texto
   pequeno, para que compongan en GPU y no repinten el header entero:
     1) el filete de poste de barbero, girando de verdad
     2) una rejilla tecnica + dos halos de laton que derivan y respiran
     3) un aro que sale del monograma como un latido
     4) un barrido de luz sobre el logotipo
   Los halos son radial-gradient a proposito: filter:blur() grande en
   un elemento de este tamano congela los iPhone.
   ------------------------------------------------------------------ */
.book-header { overflow: hidden; }
.book-header > * { position: relative; z-index: 1; }   /* el contenido, siempre sobre las capas */

/* 1) El poste gira: el patron es de 45 grados con periodo de 30px, asi
      que un ciclo exacto son 30 * raiz(2) = 42.427px de recorrido. Si se
      redondea, el filete "salta" al reiniciar el bucle. */
.book-header::before {
    left: -80px; right: -80px;
    z-index: 2;
    animation: poste-gira 3s linear infinite;
}
@keyframes poste-gira { to { transform: translate3d(42.427px, 0, 0); } }

/* 2) Fondo vivo. El inset negativo da margen para trasladar y escalar
      sin que asome el borde de la capa. */
.book-header::after {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 55% at 22% 18%, rgba(200,155,60,.22), transparent 62%),
        radial-gradient(42% 60% at 82% 84%, rgba(179,56,44,.16), transparent 66%),
        repeating-linear-gradient(0deg,  rgba(230,200,120,.055) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(90deg, rgba(230,200,120,.055) 0 1px, transparent 1px 34px);
    animation: hdr-deriva 24s ease-in-out infinite alternate;
}
@keyframes hdr-deriva {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* 3) Latido del monograma. Se excluye .avatar-foto porque ahi el avatar
      es un <img>, y un <img> no tiene pseudo-elementos. */
.book-header .avatar { position: relative; }
.book-header .avatar:not(.avatar-foto)::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid rgba(230,200,120,.6);
    animation: hdr-latido 3.6s ease-out infinite;
}
@keyframes hdr-latido {
    0%   { transform: scale(.9);  opacity: 0; }
    30%  { opacity: .6; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* 4) Barrido de luz sobre el logotipo. Va dentro de @supports porque
      color:transparent sin background-clip deja el titulo invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .book-header h1 {
        background: linear-gradient(100deg, #f4ede0 38%, #ffe7a8 50%, #f4ede0 62%);
        background-size: 280% 100%;
        background-position: 0 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: hdr-brillo 7s ease-in-out infinite;
    }
}
@keyframes hdr-brillo {
    0%, 55% { background-position: 135% 0; }
    100%    { background-position: -35% 0; }
}

/* ----- Logo de marca en el header ---------------------------------
   Solo en las pantallas que son de Cutz (login, registro, recuperar):
   en la pagina de reserva manda el negocio del barbero, no nosotros.
   El logo ya trae "by w00pz.inc", asi que ahi no se repite en texto.
   ------------------------------------------------------------------ */
.book-logo {
    display: block;
    width: min(272px, 74vw);
    height: auto;
    margin: 0 auto;
}
.book-header-marca .book-logo {
    /* Resplandor que respira detras del logo: sustituye al latido del
       monograma, que ya no existe en estas pantallas. drop-shadow en vez
       de una capa aparte para que siga la silueta y no el rectangulo. */
    filter: drop-shadow(0 0 14px rgba(200,155,60,.30));
    animation: logo-respira 5.5s ease-in-out infinite;
}
@keyframes logo-respira {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(200,155,60,.20)); }
    50%      { filter: drop-shadow(0 0 22px rgba(200,155,60,.42)); }
}

/* Firma y reclamo del login. Clases propias a proposito: .book-header p
   es compartido con la pagina de reserva, donde ese parrafo es el nombre
   del negocio del tenant y no se puede tocar. */
.book-header .book-firma {
    margin-top: 5px;
    font-size: .72rem;
    letter-spacing: .2em;
    color: #c7b696;
}
.book-header .book-claim {
    margin-top: 9px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.12rem;
    letter-spacing: .07em;
    color: #ece2cd;                    /* 13.5:1 sobre --carbon */
}
.book-header .book-claim b { color: var(--oro-claro); font-weight: 700; }  /* 9.9:1 */

/* Los ceros de w00pz parpadean como un tubo de neon cansado. Los tres
   apagones van separados 0.56s: por debajo de los 3 destellos por
   segundo que prohibe WCAG 2.3.1. El area es minuscula y no llega al
   umbral, pero no hay razon para acercarse. steps(1,end) da el corte
   seco del tubo; una transicion suave parece un fundido, no un fallo. */
.cero {
    color: var(--oro-claro);
    animation: neon-cero 7s steps(1, end) infinite;
}
.cero:last-of-type { animation-duration: 8.3s; animation-delay: .4s; }
/* En los pies, sobre fondo claro, el laton legible en vez del claro */
.pagina-venta .cero, .pagina-book .cero { color: var(--oro-texto); }   /* 5.21:1 sobre papel */
@keyframes neon-cero {
    0%, 39.9%   { opacity: 1;   text-shadow: 0 0 8px rgba(230,200,120,.55); }
    40%, 41.4%  { opacity: .28; text-shadow: none; }
    41.5%, 47.9%{ opacity: 1;   text-shadow: 0 0 8px rgba(230,200,120,.55); }
    48%, 49.4%  { opacity: .28; text-shadow: none; }
    49.5%, 55.9%{ opacity: 1;   text-shadow: 0 0 8px rgba(230,200,120,.55); }
    56%, 57.4%  { opacity: .28; text-shadow: none; }
    57.5%, 100% { opacity: 1;   text-shadow: 0 0 8px rgba(230,200,120,.55); }
}

/* Logo en la barra de la landing */
.venta-logo { display: block; height: 34px; width: auto; }

/* Formulario de solicitud de la landing */
.venta-form { max-width: 520px; margin: 0 auto 18px; text-align: left; }
.venta-form textarea { width: 100%; }
/* Honeypot: fuera de la vista sin usar display:none ni visibility:hidden,
   que ya los detectan los bots que valen algo. */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* En registro el titulo sigue siendo la accion, asi que el logo va discreto */
.book-logo-sec { width: min(190px, 56vw); margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
    .book-header::before,
    .book-header::after,
    .book-header .avatar:not(.avatar-foto)::after,
    .book-header h1,
    .book-header-marca .book-logo,
    .venta-hero::before,
    .venta-hero::after,
    .cero,
    .barra::before { animation: none; }
    .book-header .avatar:not(.avatar-foto)::after { opacity: .35; }
    .cero { text-shadow: 0 0 8px rgba(230,200,120,.55); }
    .book-header-marca .book-logo { filter: drop-shadow(0 0 14px rgba(200,155,60,.30)); }
}

/* ----- Opciones tipo radio (registro) ----------------------------- */
.opcion-radio {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--tinta);
    cursor: pointer;
}
.opcion-radio input { width: auto; }

/* ----- Editor de horario ------------------------------------------ */
.fila-dia {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--linea);
}
.fila-dia:last-of-type { border-bottom: none; }
.fila-dia .dia-check { display: flex; align-items: center; gap: 6px; min-width: 116px; margin: 0; font-weight: 600; color: var(--tinta); }
.fila-dia .dia-check input { width: auto; }
.fila-dia input[type="time"] { padding: 8px; }
.fila-dia .sub { margin: 0; }

/* ----- Avatar con foto (booking) ---------------------------------- */
.avatar-foto { object-fit: cover; padding: 0; }
.book-header .avatar-foto { width: 84px; height: 84px; }
.book-negocio { font-size: .72rem !important; letter-spacing: .06em !important; opacity: .85; margin-top: 4px !important; }

/* ----- Foto en el perfil ------------------------------------------ */
.foto-edit { display: flex; gap: 14px; align-items: center; }
.foto-prev {
    width: 76px; height: 76px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    border: 2px solid var(--oro);
    background: var(--carbon);
    display: flex; align-items: center; justify-content: center;
}
.foto-prev img { width: 100%; height: 100%; object-fit: cover; }
.foto-inicial { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; color: var(--oro-claro); }
input[type="file"] { padding: 9px; background: #fff; font-size: .85rem; }

/* ----- Caja de QR en el panel ------------------------------------- */
.qr-box {
    display: flex;
    justify-content: center;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 12px;
}
.qr-box canvas { width: 220px; height: 220px; }

/* ----- Tarjeta virtual (vcard imprimible) ------------------------- */
.tarjeta-vcard {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #f4ede0;
    background: radial-gradient(120% 130% at 50% -10%, var(--carbon-2), var(--carbon) 72%);
    border: 1px solid var(--oro-osc);
    border-radius: 18px;
    padding: 28px 22px 22px;
    box-shadow: var(--sombra);
}
.tarjeta-vcard::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 7px;
    background: var(--poste);
}
.vcard-foto {
    width: 104px; height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--oro);
    margin: 6px auto 12px;
    display: block;
    box-shadow: 0 0 0 4px rgba(244,237,224,.10);
}
.vcard-inicial {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, var(--oro-claro), var(--oro));
    color: var(--carbon);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
}
.vcard-nombre { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: .03em; margin: 0; line-height: 1; }
.vcard-esp { color: var(--oro-claro); margin: 6px 0 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.vcard-negocio { color: #d8c9ad; margin: 4px 0 0; font-size: .8rem; }
.vcard-qr { background: #fff; border-radius: 12px; padding: 14px; display: inline-block; margin: 18px auto 8px; }
.vcard-qr canvas { display: block; }
.vcard-cta { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--oro-claro); margin: 4px 0 0; font-size: .85rem; }

/* ----- Boton flotante (FAB) "nueva cita" -------------------------- */
.fab {
    position: fixed;
    right: 16px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 40;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--oro-claro), var(--oro));
    color: var(--carbon);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(40,28,12,.38), 0 2px 0 var(--oro-osc);
}
.fab:active { transform: translateY(2px); }

/* ----- Cita con acciones rapidas (Hoy), pensado para el pulgar ----- */
.cita-bloque { border-bottom: 1px solid var(--linea); }
.cita-bloque:last-child { border-bottom: none; }
.cita-acciones { display: flex; gap: 6px; padding: 2px 0 12px; }
.cita-acciones form { flex: 1; margin: 0; }
.cita-acciones > a.btn { flex: 1; }
.cita-acciones .btn { width: 100%; padding: 11px 8px; }

/* ----- Impresion -------------------------------------------------- */
@media print {
    .no-print, .nav, .barra { display: none !important; }
    body { background: #fff; }
    .tarjeta-vcard { box-shadow: none; border-color: #999; }
}

/* ----- Pantallas grandes ------------------------------------------ */
@media (min-width: 720px) {
    .grid-stats { grid-template-columns: repeat(4, 1fr); }
    .slots { grid-template-columns: repeat(4, 1fr); }
}

/* ----- Barbero con cara (booking) --------------------------------- */
.barbero-cara { display: flex; align-items: center; gap: 12px; min-width: 0; }
.barbero-foto {
    width: 52px; height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--oro);
    background: var(--carbon-2);
    box-shadow: 0 2px 6px rgba(40, 28, 12, .18);
}
.barbero-inicial {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, var(--oro-claro), var(--oro));
    color: var(--carbon);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
}
.barbero-txt { min-width: 0; }
.barbero-nombre { font-weight: 600; }
.barbero-check { color: var(--oro-texto); font-size: 1.25rem; opacity: 0; transition: opacity .15s ease; }
.barbero-op.sel .barbero-check { opacity: 1; }

/* Pila de caras del equipo: la foto de grupo sin pedir una foto de grupo */
.pila-avatares { display: inline-flex; margin-bottom: 12px; }
.pila-avatares img {
    width: 60px; height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--oro);
    background: var(--carbon-2);
    box-shadow: 0 0 0 3px var(--carbon), 0 6px 14px rgba(0, 0, 0, .35);
    margin-left: -16px;
}
.pila-avatares img:first-child { margin-left: 0; }

/* ----- Tira de fechas (booking) ----------------------------------- */
.tira-fechas {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 16px 12px;
    margin: 0 -16px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* El ultimo chip se desvanece en el borde: dice "hay mas, desliza" sin
       necesidad de una flecha ni de JS. Si se corta a hueso parece roto. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
}
.tira-fechas::-webkit-scrollbar { display: none; }
.dia-op {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 64px;
    display: grid;
    gap: 1px;
    padding: 9px 0 10px;
    border: 1px solid var(--linea-fuerte);
    border-radius: 12px;
    background: #fff;
    color: var(--tinta);
    font-family: 'Oswald', sans-serif;
    text-align: center;
    line-height: 1.1;
    cursor: pointer;
    -webkit-appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dia-nom, .dia-mes {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gris);
}
.dia-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; line-height: .95; }
.dia-op.sel {
    background: linear-gradient(180deg, var(--carbon-2), var(--carbon));
    border-color: var(--oro-osc);
    color: #f4ede0;
    box-shadow: 0 2px 0 var(--oro-osc);
}
.dia-op.sel .dia-nom, .dia-op.sel .dia-mes { color: var(--oro-claro); }
.dia-op:focus-visible { outline: 2px solid var(--oro-osc); outline-offset: 2px; }

/* ----- Estado vacio de horarios ----------------------------------- */
.slots-vacio {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px 16px;
    border: 1px dashed var(--linea-fuerte);
    border-radius: 12px;
    background: radial-gradient(120% 130% at 50% 0%, #fffaf0, var(--papel) 72%);
    color: var(--gris);
}
.slots-vacio p { margin: 8px 0 0; font-size: .86rem; }
.slots-ico { display: block; font-size: 1.7rem; color: var(--oro-texto); line-height: 1; }

/* ----- Barra fija de resumen (booking) ---------------------------- */
.pagina-book .contenido { padding-bottom: 140px; }

.resumen-fijo {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: grid;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, var(--carbon-2), var(--carbon));
    border-top: 2px solid var(--oro-osc);
    box-shadow: 0 -8px 22px rgba(23, 18, 13, .30);
}
.resumen-fijo::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--poste);
}
.resumen-linea {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}
.resumen-detalle {
    font-family: 'Oswald', sans-serif;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #d8c9ad;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resumen-total {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--oro-claro);
    flex: 0 0 auto;
}
.resumen-fijo .btn { max-width: 720px; margin: 0 auto; }
.resumen-fijo .btn:disabled { filter: grayscale(.5) brightness(.8); cursor: not-allowed; }

/* ----- Booking en pantalla grande --------------------------------- */
@media (min-width: 900px) {
    .pagina-book .contenido { max-width: 980px; padding-bottom: 120px; }
    #form-booking {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 30px;
        align-items: start;
        padding: 26px 30px;
    }
    .book-col { min-width: 0; }
    .book-col > h2:first-child { margin-top: 0 !important; }
    .resumen-fijo {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 24px;
        padding: 12px 24px;
    }
    .resumen-fijo .btn { width: auto; padding: 13px 30px; }
    .resumen-linea { max-width: none; }
    .resumen-total { font-size: 2.1rem; }
    .book-header { padding: 46px 16px 36px; }
}

/* ----- Modal (dialog nativo) -------------------------------------- */
/* Sin backdrop-filter a proposito: un desenfoque a pantalla completa
   congela iPhones. El fondo oscuro solido cumple igual. */
.modal {
    border: none;
    padding: 0;
    border-radius: 16px;
    width: min(480px, calc(100% - 28px));
    background: var(--papel);
    color: var(--tinta);
    box-shadow: 0 24px 60px rgba(23, 18, 13, .45);
    overflow: hidden;
}
.modal::backdrop { background: rgba(23, 18, 13, .62); }
.modal-caja {
    padding: 0 20px 20px;
    max-height: 86vh;
    overflow-y: auto;
}
.modal-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -20px 4px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--linea);
    background: var(--papel);
    position: sticky;
    top: 0;
    z-index: 2;
}
.modal-cab h2 { margin: 0; font-size: 1.05rem; }
.modal-x {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--gris);
    cursor: pointer;
    padding: 0 4px;
}
.modal-x:hover { color: var(--tinta); }
.modal-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* Remate: el poste de barbero como filo superior del modal */
.modal::before {
    content: "";
    display: block;
    height: 4px;
    background: var(--poste);
}

/* =====================================================================
   PAGINA DE VENTA (raiz del sitio)
   Primero el dolor del barbero, el producto despues. Sin blur en ningun
   sitio: la profundidad la dan los gradientes.
   ===================================================================== */
.pagina-venta { background: var(--crema); }

.venta-barra {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--carbon);
    border-bottom: 2px solid var(--oro-osc);
}
.venta-marca {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: .04em;
    color: #f4ede0;                      /* 15.98:1 sobre carbon */
}
.venta-barra-acc { display: flex; align-items: center; gap: 14px; }
.venta-login {
    font-family: 'Oswald', sans-serif;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--oro-claro);             /* 11.43:1 sobre carbon */
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid var(--oro-osc);
    border-radius: 999px;
}

/* --- Hero: solo el dolor --- */
.venta-hero {
    position: relative;
    padding: 64px 20px 58px;
    text-align: center;
    background:
        radial-gradient(120% 140% at 50% -20%, var(--carbon-2), var(--carbon) 70%);
    border-bottom: 3px solid var(--oro-osc);
}
/* Mismas capas vivas que el header del login, con los mismos ciclos: la
   landing y el panel tienen que leerse como el mismo producto. */
.venta-hero { overflow: hidden; }
.venta-hero > * { position: relative; z-index: 1; }
.venta-hero::before {
    content: "";
    position: absolute;
    top: 0; left: -80px; right: -80px;
    height: 5px;
    background: var(--poste);
    z-index: 2;
    animation: poste-gira 3s linear infinite;
}
.venta-hero::after {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(34% 48% at 18% 12%, rgba(200,155,60,.20), transparent 62%),
        radial-gradient(40% 55% at 84% 88%, rgba(179,56,44,.15), transparent 66%),
        repeating-linear-gradient(0deg,  rgba(230,200,120,.05) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(230,200,120,.05) 0 1px, transparent 1px 40px);
    animation: hdr-deriva 26s ease-in-out infinite alternate;
}
/* La barra de venta es sticky: aqui solo el halo, quieto. */
.venta-barra { position: sticky; overflow: hidden; }
.venta-barra::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(60% 170% at 10% 0%, rgba(200,155,60,.16), transparent 60%);
}
.venta-barra > * { position: relative; z-index: 1; }
.venta-hero h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 5.2vw, 3.1rem);
    line-height: 1.12;
    max-width: 22ch;                     /* en movil cae solo; en desktop evita 4 lineas */
    margin: 0 auto 18px;
    color: #f4ede0;
    text-transform: none;
    letter-spacing: 0;
}
.venta-hero p {
    max-width: 46ch;
    margin: 0 auto;
    color: #d8c9ad;                      /* 11.41:1 sobre carbon */
    font-size: 1.02rem;
    line-height: 1.55;
}

/* --- Secciones --- */
.venta-seccion { padding: 46px 20px; }
.venta-ancho { max-width: 940px; margin: 0 auto; }
.venta-seccion h2 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.35rem, 3.4vw, 1.9rem);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0 0 22px;
    color: var(--tinta);
}

/* --- Lista de dolores --- */
.venta-dolores { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.venta-dolores li {
    position: relative;
    padding: 14px 16px 14px 46px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--rojo);
    border-radius: 10px;
    line-height: 1.5;
}
.venta-dolores li::before {
    content: "\2702";
    position: absolute;
    left: 16px; top: 14px;
    color: var(--oro-texto);             /* 5.21:1 sobre papel */
}

/* --- El giro --- */
.venta-giro { background: var(--papel); border-block: 1px solid var(--linea); }
.venta-puente {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 60ch;
    margin: 0 auto 22px;
    text-align: center;
}
.venta-botones {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.venta-botones .btn { width: auto; padding: 14px 26px; }

/* --- Tarjetas de beneficio y pasos --- */
.venta-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.venta-card, .venta-paso, .venta-plan {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--sombra);
}
.venta-card h3, .venta-paso h3, .venta-plan h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.05rem;
    margin: 0 0 8px;
    color: var(--tinta);
}
.venta-card p, .venta-paso p, .venta-plan p { margin: 0; line-height: 1.55; color: var(--gris); }

.venta-pasos-fondo { background: var(--papel); border-block: 1px solid var(--linea); }
.venta-pasos-fondo .venta-paso { background: var(--crema); }
.venta-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--oro-claro), var(--oro));
    color: var(--carbon);                /* 7.27:1 sobre oro */
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
}

/* --- Precio --- */
.venta-plan { text-align: center; }
.venta-plan-destacado { border: 2px solid var(--oro-osc); box-shadow: 0 8px 24px rgba(40,28,12,.14); }
.venta-precio {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--tinta);
    margin: 6px 0 12px;
}
.venta-precio span { font-family: 'Inter', sans-serif; font-size: .95rem; color: var(--gris); }
.venta-precio-consultar { font-size: 1.9rem; color: var(--oro-texto); }

/* --- Cierre --- */
.venta-cierre { background: var(--papel); border-top: 1px solid var(--linea); text-align: center; }
.venta-cierre p { max-width: 54ch; margin: 0 auto 22px; line-height: 1.6; }
.venta-pie {
    padding: 26px 20px 34px;
    text-align: center;
    background: var(--carbon);
    color: #c9b896;                      /* 9.55:1 sobre carbon */
    font-size: .85rem;
}
.venta-pie p { margin: 0; }

@media (min-width: 760px) {
    .venta-dolores { grid-template-columns: 1fr 1fr; }
    .venta-grid { grid-template-columns: 1fr 1fr; }
    .venta-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .venta-seccion { padding: 60px 20px; }
}

/* ----- Lista de espera (booking) ---------------------------------- */
.espera-caja  { grid-column: 1 / -1; text-align: center; margin-top: 10px; }
.espera-aviso { grid-column: 1 / -1; text-align: center; color: var(--rojo-osc); margin-top: 8px; }

/* ----- Chips de eleccion rapida (cobro) --------------------------- */
/* Botones grandes a proposito: esto se usa de pie y con prisa. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span, .chip-btn {
    display: inline-block;
    padding: 11px 15px;
    border: 1px solid var(--linea-fuerte);
    border-radius: 999px;
    background: #fff;
    color: var(--tinta);
    font-family: 'Oswald', sans-serif;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    -webkit-appearance: none;
}
.chip input:checked + span {
    background: linear-gradient(180deg, var(--carbon-2), var(--carbon));
    color: var(--oro-claro);              /* 11.43:1 sobre carbon */
    border-color: var(--oro-osc);
}
.chip input:focus-visible + span { outline: 2px solid var(--oro-osc); outline-offset: 2px; }
.chip-btn { border-style: dashed; }

.cobro-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--linea);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .05em;
    color: var(--gris);
}
.cobro-total strong { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--tinta); }

/* ----- Credenciales recien creadas -------------------------------- */
.alta-lista { border-left: 4px solid var(--ok); }
.cred {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 10px;
    background: #fffaf0;
    border: 1px dashed var(--linea-fuerte);
}
.cred > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cred-et {
    font-family: 'Oswald', sans-serif;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gris);
    min-width: 118px;
}
.cred code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95rem;
    color: var(--tinta);
    word-break: break-all;
}