/* ---------------------------------------------------------------------------
   MiLink - estilos de la pagina publica

   Todo el color, la tipografia y la forma salen de custom properties que el
   PHP inyecta en un <style> del head (ver Theme::cssVariables). Este archivo
   no tiene ni un color escrito a mano: eso es lo que permite que cada cliente
   tenga su propia identidad sin una hoja de estilos por pagina.

   Pensado primero para celular: casi todo el trafico entra escaneando un QR.
--------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: calc(16px * var(--font-scale));
    line-height: 1.5;
    color: var(--c-ink);
    -webkit-font-smoothing: antialiased;
    /* El fondo lo pone el style inline del head segun el tema. */

    /* Las cajas (tarjetas, mapas, videos, fotos) siguen el redondeo de los
       botones, pero con tope: con botones pastilla, una tarjeta alta con
       999 px de radio queda ovalada y corta el contenido. */
    --card-radius: min(var(--btn-radius), 22px);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

[hidden] { display: none !important; }

/* Lo que solo tiene que leer un lector de pantalla. */
.sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* El foco del teclado tiene que verse siempre, en cualquier tema. */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Estructura
--------------------------------------------------------------------------- */

.wrap {
    max-width: var(--wrap-width);
    margin: 0 auto;
    padding: calc(20px * var(--density)) 16px calc(40px * var(--density));
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 1.8);
}

.bloques {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* ---------------------------------------------------------------------------
   Cabecera
--------------------------------------------------------------------------- */

.head {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: calc(13px * var(--density));
}

/* Variante tarjeta: bloque de color con el logo adentro. */
.head--card {
    background: var(--c-brand);
    color: var(--c-brand-ink);
    border-radius: var(--head-radius);
    padding: calc(26px * var(--density)) calc(22px * var(--density)) calc(22px * var(--density));
}

/* Variante plana: sin fondo, el nombre sobre el fondo de la pagina. */
.head--plain {
    color: var(--c-ink);
    padding: calc(14px * var(--density)) 2px;
}

/* Variante centrada: avatar arriba, todo al medio. */
.head--centered {
    align-items: center;
    text-align: center;
    padding: calc(20px * var(--density)) 8px;
}

/* Variante portada: imagen de fondo con el texto encima. */
.head--cover {
    color: #fff;
    border-radius: var(--head-radius);
    padding: calc(90px * var(--density)) calc(22px * var(--density)) calc(22px * var(--density));
    background-size: cover;
    background-position: center;
}
.head--cover::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Degrade de abajo para arriba: el texto se lee sobre cualquier foto. */
    background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.15) 55%, rgba(0,0,0,.05));
}
.head--cover > * { position: relative; }

/* Variante perfil: una franja de color arriba y el logo montado sobre su
   borde, con el nombre debajo sobre el fondo de la pagina. Es la cabecera
   de un perfil de red social, que el visitante ya sabe leer. */
.head--banner {
    color: var(--c-ink);
    padding: calc(58px * var(--density)) 4px 2px;
}
.head--banner::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: calc(58px * var(--density) + var(--avatar-size) / 2);
    background: var(--c-brand);
    border-radius: var(--head-radius);
}
.head--banner > * { position: relative; }
.head--banner .head__avatar,
.head--banner .head__inicial {
    /* Un aro del color del fondo despega el logo de la franja. */
    box-shadow: 0 0 0 4px var(--c-bg);
}

.head.al-centro { align-items: center; text-align: center; }

/* Adorno decorativo de la esquina. */
.head__orn {
    position: absolute;
    pointer-events: none;
}
.head__orn--ring {
    right: -40px; top: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 18px solid var(--c-accent);
    opacity: .32;
}
.head__orn--blob {
    right: -50px; bottom: -70px;
    width: 190px; height: 190px;
    border-radius: 48% 52% 60% 40% / 45% 55% 45% 55%;
    background: var(--c-accent);
    opacity: .22;
}

.head__avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: var(--avatar-radius);
    object-fit: cover;
    flex: none;
    background: var(--c-accent);
}

/* Si no hay logo cargado, las iniciales del nombre. */
.head__inicial {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: var(--avatar-radius);
    background: var(--c-accent);
    /* Se mide contra el acento, que es el fondo del circulo: con la paleta
       derivada de un solo color, acento y marca son el mismo tono y las
       iniciales en color de marca no se veian. */
    color: var(--ink-sobre-acento);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: calc(var(--avatar-size) * .42);
    flex: none;
    letter-spacing: -.02em;
}

.head h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: calc(30px * var(--font-scale));
    line-height: 1.06;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.head__tag {
    margin: 0;
    opacity: .85;
    max-width: 34ch;
    font-size: calc(15px * var(--font-scale));
}
.head.al-centro .head__tag { margin-inline: auto; }

/* Cartel de abierto / cerrado. */
.estado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: calc(14px * var(--font-scale));
    font-weight: 600;
    background: rgba(255, 255, 255, .14);
}
.head--plain .estado,
.head--centered .estado,
.head--banner .estado {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
}
.estado__punto {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex: none;
}
.estado[data-abierto="0"] .estado__punto { background: #ef4444; }

/* ---------------------------------------------------------------------------
   Botones y tarjetas: la base que comparten casi todos los bloques
--------------------------------------------------------------------------- */

.b {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: calc(14px * var(--density)) calc(16px * var(--density));
    border-radius: var(--btn-radius);
    text-decoration: none;
    color: var(--c-ink);
    background: var(--c-surface);
    border: var(--btn-border) solid var(--c-line);
    box-shadow: var(--btn-shadow);
    transition: transform .14s ease, border-color .14s ease, background-color .14s ease;
}

.b.centrado { justify-content: center; text-align: center; }
.b.centrado .b__txt { align-items: center; }

/* Variantes de estilo de boton.

   El :not(.b--destacado) no es decorativo: sin el, un selector de dos clases
   como .est-glass .b le gana por especificidad a .b--destacado y le pisa el
   fondo de acento. El boton quedaria con el fondo de la variante pero con el
   color de texto calculado para el acento, que es la receta exacta para un
   boton ilegible. El destacado manda siempre. */
.est-outline .b:not(.b--destacado) { background: transparent; border-color: var(--c-ink); }
.est-solid   .b:not(.b--destacado) { background: var(--c-brand); color: var(--c-brand-ink); border-color: transparent; }
.est-soft    .b:not(.b--destacado) { background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface)); border-color: transparent; }
.est-minimal .b:not(.b--destacado) { background: transparent; border-color: transparent; padding-inline: 4px; }
.est-glass   .b:not(.b--destacado) {
    background: color-mix(in srgb, var(--c-surface) 55%, transparent);
    border-color: color-mix(in srgb, var(--c-ink) 14%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Flotando: sin borde, con una sombra suave tenida con la tinta del tema
   (una sombra negra pura ensucia los fondos de color). Las tarjetas la
   acompanian, asi la pagina queda de una pieza. En oscuro la sombra no se
   ve, asi que un borde apenas marcado hace ese trabajo. */
.est-elevated .b:not(.b--destacado),
.est-elevated .card {
    border-color: transparent;
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--c-ink) 7%, transparent),
        0 8px 24px -10px color-mix(in srgb, var(--c-ink) 22%, transparent);
}
:root[data-theme="dark"] .est-elevated .b:not(.b--destacado),
:root[data-theme="dark"] .est-elevated .card { border-color: var(--c-line); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .est-elevated .b:not(.b--destacado),
    :root:not([data-theme="light"]) .est-elevated .card { border-color: var(--c-line); }
}

/* Tinta: el boton relleno con el color del texto y la letra del color del
   fondo. Es el contraste mas alto posible con la paleta del tema, y en modo
   oscuro se invierte solo porque las dos variables se invierten. */
.est-ink .b:not(.b--destacado) {
    background: var(--c-ink);
    color: var(--c-bg);
    border-color: transparent;
}
.est-ink .b:not(.b--destacado) .b__sub { color: var(--c-bg); opacity: .72; }
.est-ink .b:not(.b--destacado) .b__ic { color: var(--c-bg); }

/* color-mix no esta en navegadores viejos: ahi los botones quedan como
   los normales, que es un buen lugar donde caer. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .est-soft .b:not(.b--destacado),
    .est-glass .b:not(.b--destacado) { background: var(--c-surface); border-color: var(--c-line); }
    .est-elevated .b:not(.b--destacado),
    .est-elevated .card { border-color: var(--c-line); box-shadow: none; }
}

.b:hover, .b:focus-visible { border-color: var(--c-accent); }
.efecto-lift .b:hover, .efecto-lift .b:focus-visible { transform: translateY(-2px); }

/* Al tocarlo se hunde apenas: en el celular no hay hover, y es la unica
   senial de que el toque llego antes de que abra la otra pagina. */
.b:active, .efecto-lift .b:active { transform: scale(.985); }

/* El boton destacado: el que queres que toquen. */
.b--destacado {
    background: var(--c-accent);
    border-color: var(--c-accent);
    /* Blanco sobre un acento oscuro, tinta del tema sobre uno claro.
       Lo decide Theme segun el contraste real, y tiene un valor propio
       para la paleta clara y otro para la oscura. */
    color: var(--ink-sobre-acento);
}
.b--destacado .b__sub { color: var(--ink-sobre-acento); opacity: .78; }
.b--destacado .b__ic  { background: rgba(127, 127, 127, .22); color: var(--ink-sobre-acento); }
.b--destacado .b__flecha { opacity: .5; }
.b--destacado:hover, .b--destacado:focus-visible {
    border-color: var(--c-accent);
    filter: brightness(1.06);
}

.b__ic {
    width: 38px; height: 38px;
    flex: none;
    border-radius: calc(var(--btn-radius) * .62);
    background: color-mix(in srgb, var(--c-accent) 12%, transparent);
    display: grid;
    place-items: center;
    color: var(--c-accent);
}
.ic-bare .b__ic { background: none; width: 26px; height: 26px; }
.ic-none .b__ic { display: none; }

.b__ic svg { width: 21px; height: 21px; }
.ic-bare .b__ic svg { width: 24px; height: 24px; }

.b__txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}
.b__tit {
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.mayus .b__tit { text-transform: uppercase; letter-spacing: .04em; font-size: calc(14px * var(--font-scale)); }

.b__sub {
    font-size: calc(13px * var(--font-scale));
    color: var(--c-muted);
    line-height: 1.35;
}

.b__flecha {
    margin-left: auto;
    flex: none;
    opacity: .35;
    color: currentColor;
}
.b__flecha svg { width: 18px; height: 18px; }

/* Tarjeta: la caja que usan los bloques que no son un boton. */
.card {
    background: var(--c-surface);
    border: var(--btn-border) solid var(--c-line);
    border-radius: var(--card-radius);
    padding: calc(16px * var(--density));
    box-shadow: var(--btn-shadow);
}
.vidrio .card {
    background: color-mix(in srgb, var(--c-surface) 55%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* El titulo de una tarjeta es un titulo de verdad, con la letra de los
   titulos del tema. Antes era una etiqueta chica en mayusculas: repetida
   en cada tarjeta se volvia ruido y no ayudaba a ubicarse. */
.card__tit {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: calc(16px * var(--font-scale));
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--c-ink);
}
.mayus .card__tit { text-transform: uppercase; letter-spacing: .03em; font-size: calc(14px * var(--font-scale)); }

/* ---------------------------------------------------------------------------
   Bloques
--------------------------------------------------------------------------- */

/* Titulo de seccion */
.titulo-seccion {
    margin: calc(10px * var(--density)) 0 0;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: calc(19px * var(--font-scale));
    letter-spacing: -.01em;
    color: var(--c-ink);
}
.titulo-seccion.al-centro { text-align: center; }

/* Parrafo */
.parrafo { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.parrafo.al-centro { text-align: center; }
.parrafo--suelto {
    margin: 0;
    padding: 0 4px;
    color: var(--c-muted);
    font-size: calc(15px * var(--font-scale));
    white-space: pre-line;
}

/* Fila de redes */
.redes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: calc(4px * var(--density)) 0;
}
.redes__i {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    color: var(--c-ink);
    background: var(--c-surface);
    border: var(--btn-border) solid var(--c-line);
    transition: transform .14s ease, color .14s ease, border-color .14s ease;
}
.redes--sm .redes__i { width: 38px; height: 38px; }
.redes--lg .redes__i { width: 52px; height: 52px; }
.redes--bare .redes__i { background: none; border-color: transparent; }
.redes--circle .redes__i { background: var(--c-brand); color: var(--c-brand-ink); border-color: transparent; }
.redes__i:hover, .redes__i:focus-visible {
    color: var(--c-accent);
    border-color: var(--c-accent);
    transform: translateY(-2px);
}
.redes__i svg { width: 21px; height: 21px; }
.redes--lg .redes__i svg { width: 25px; height: 25px; }

/* Horarios */
.horarios { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; }
.horarios__dia { color: var(--c-muted); }
.horarios__hs {
    font-variant-numeric: tabular-nums;
    display: flex; flex-wrap: wrap; justify-content: flex-end;
    column-gap: .45em; text-align: right;
}
.horarios__tramo { white-space: nowrap; }
.horarios__sep { color: var(--c-muted); opacity: .55; }
/* Si no entra en un renglon, un tramo debajo del otro (lo decide site.js). */
.horarios__hs--apilado { flex-direction: column; align-items: flex-end; }
.horarios__hs--apilado .horarios__sep { display: none; }
.horarios__f--hoy .horarios__dia,
.horarios__f--hoy .horarios__hs { color: var(--c-ink); font-weight: 600; }
.horarios__f--cerrado .horarios__hs { opacity: .6; }
.horarios__f { display: contents; }

/* Direccion */
.direccion { font-size: calc(15px * var(--font-scale)); margin-bottom: 12px; }
.mapa-marco {
    border: 0;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: calc(var(--card-radius) * .7);
    margin-top: 12px;
    background: var(--c-bg);
}

/* Wifi */
.wifi__fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--c-line);
}
.wifi__fila:first-of-type { border-top: 0; }
.wifi__k { color: var(--c-muted); font-size: calc(13px * var(--font-scale)); min-width: 52px; }
.wifi__v { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }

/* Boton de copiar */
.copiar {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--c-line);
    background: transparent;
    color: var(--c-muted);
    font: inherit;
    font-size: calc(13px * var(--font-scale));
    cursor: pointer;
    transition: color .14s, border-color .14s;
}
.copiar:hover { color: var(--c-accent); border-color: var(--c-accent); }
.copiar svg { width: 15px; height: 15px; }
.copiar[data-ok="1"] { color: #16a34a; border-color: #16a34a; }

/* Imagen */
.imagen-bloque { border-radius: var(--radio-img, 14px); overflow: hidden; }

/* Video y musica */
.embed { position: relative; }
.embed__marco {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: calc(var(--card-radius) * .7);
    display: block;
    background: #000;
}
.embed__marco--audio { aspect-ratio: auto; height: 152px; background: transparent; }

/* Portada que carga el reproductor al tocarla: la pagina abre sin pedirle
   nada a YouTube ni a Spotify hasta que el visitante quiere ver el video. */
.embed__previa {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    padding: 0;
    border-radius: calc(var(--card-radius) * .7);
    overflow: hidden;
    cursor: pointer;
    background: var(--c-brand) center / cover no-repeat;
    display: grid;
    place-items: center;
}
.embed__play {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    display: grid;
    place-items: center;
    backdrop-filter: blur(4px);
    transition: transform .16s ease, background-color .16s ease;
}
.embed__previa:hover .embed__play { transform: scale(1.08); background: rgba(0,0,0,.72); }
.embed__play svg { width: 30px; height: 30px; }

/* Instagram o TikTok

   La portada es propia, con los colores del tema: no hay foto de la
   publicacion sin conectar la cuenta con la red. Vertical para reels y
   videos, mas baja para el resto, asi anticipa la forma de lo que carga. */
.social__previa {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: calc(var(--card-radius) * .7);
    overflow: hidden;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--c-brand-ink);
    background:
        radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent 60%),
        var(--c-brand);
}
.social__previa--vertical { aspect-ratio: 4 / 5; }
.social__previa--cuadrada { aspect-ratio: 1 / 1; max-width: 340px; }

.social__logo {
    position: absolute;
    top: 14px; left: 14px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--c-brand-ink) 16%, transparent);
}
.social__logo svg { width: 21px; height: 21px; }

.social__play {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-brand-ink) 22%, transparent);
    backdrop-filter: blur(4px);
    transition: transform .16s ease;
}
.social__play svg { width: 30px; height: 30px; }
.social__previa:hover .social__play { transform: scale(1.07); }

.social__txt {
    position: absolute;
    left: 16px; right: 16px; bottom: 15px;
    display: flex; flex-direction: column; gap: 2px;
}
.social__txt b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: calc(17px * var(--font-scale)); line-height: 1.2; }
.social__txt small { font-size: calc(13px * var(--font-scale)); opacity: .8; overflow-wrap: anywhere; }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .social__previa { background: var(--c-brand); }
    .social__logo, .social__play { background: rgba(127, 127, 127, .3); }
}

/* Los reproductores. Cada red tiene su forma: el de TikTok es un video
   vertical; el de Instagram trae cabecera y pie, y su alto lo ajusta
   site.js con la medida que manda el propio iframe. */
.social__marco {
    display: block;
    width: 100%;
    margin: 0 auto;
    border: 0;
    border-radius: calc(var(--card-radius) * .7);
    background: var(--c-surface);
}
.social__marco--tiktok.social__marco--video { max-width: 340px; aspect-ratio: 9 / 16; }
.social__marco--tiktok.social__marco--foto  { max-width: 340px; height: 740px; }
.social__marco--instagram { max-width: 400px; height: 600px; }
.social__marco--instagram.social__marco--reel { height: 760px; }
.social__perfil { margin: 0 auto !important; max-width: 100% !important; }

/* Preguntas frecuentes */
.faq { border-top: 1px solid var(--c-line); }
.faq:first-of-type { border-top: 0; }
.faq__q {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 0;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.faq__mas { margin-left: auto; flex: none; transition: transform .2s ease; color: var(--c-muted); }
.faq__mas svg { width: 18px; height: 18px; }
.faq[open] .faq__mas { transform: rotate(45deg); }
.faq__a { margin: 0 0 14px; color: var(--c-muted); white-space: pre-line; }
.faq__q::-webkit-details-marker { display: none; }

/* Producto */
.prod { display: flex; flex-direction: column; gap: 12px; }
.prod--agotado { opacity: .55; }
.prod__foto { border-radius: calc(var(--card-radius) * .7); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prod__cab { display: flex; align-items: flex-start; gap: 10px; }
.prod__nom { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: calc(17px * var(--font-scale)); }
.prod__desc { margin: 4px 0 0; color: var(--c-muted); font-size: calc(14px * var(--font-scale)); }
.prod__etq {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--c-accent);
    color: var(--ink-sobre-acento);
    font-size: calc(11.5px * var(--font-scale));
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.prod__precios { display: flex; align-items: baseline; gap: 9px; }
.prod__precio { font-family: var(--font-display); font-weight: 700; font-size: calc(22px * var(--font-scale)); }
.prod__antes { color: var(--c-muted); text-decoration: line-through; font-size: calc(14px * var(--font-scale)); }

/* Cuenta regresiva */
.reloj { display: flex; gap: 8px; justify-content: center; }
.reloj__u {
    flex: 1;
    max-width: 78px;
    text-align: center;
    padding: 10px 6px;
    border-radius: calc(var(--card-radius) * .7);
    background: color-mix(in srgb, var(--c-accent) 11%, transparent);
}
.reloj__n {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: calc(26px * var(--font-scale));
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.reloj__l {
    display: block;
    font-size: calc(11px * var(--font-scale));
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--c-muted);
    margin-top: 2px;
}

/* Estrellas del pedido de resenia */
.estrellas { display: flex; gap: 3px; color: var(--c-accent); margin-left: auto; flex: none; }
.estrellas svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* Formulario */
.form { display: flex; flex-direction: column; gap: 10px; }
.form__campo { display: flex; flex-direction: column; gap: 5px; }
.form__campo label { font-size: calc(13px * var(--font-scale)); color: var(--c-muted); }
.form input, .form textarea {
    font: inherit;
    color: var(--c-ink);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: calc(var(--card-radius) * .6);
    padding: 11px 13px;
    width: 100%;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: transparent; }
.form textarea { min-height: 84px; resize: vertical; }
.form__enviar {
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 13px;
    border: 0;
    border-radius: calc(var(--btn-radius) * .7);
    background: var(--c-accent);
    color: var(--ink-sobre-acento);
    transition: filter .14s ease;
}
.form__enviar:hover { filter: brightness(1.07); }
.form__enviar:disabled { opacity: .6; cursor: default; }
.form__ok {
    margin: 0;
    padding: 13px;
    border-radius: calc(var(--card-radius) * .6);
    background: color-mix(in srgb, #16a34a 12%, transparent);
    color: var(--c-ink);
    text-align: center;
}
.form__error { margin: 0; color: #dc2626; font-size: calc(13.5px * var(--font-scale)); }

/* La trampa para robots de spam: un campo que una persona nunca ve ni llena.
   position absolute en vez de display:none, porque algunos robots se dan
   cuenta de los campos escondidos con display. */
.trampa {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Separador */
.sep { border: 0; margin: 0; }
.sep--line { border-top: 1px solid var(--c-line); }
.sep--dots {
    display: flex;
    gap: 7px;
    justify-content: center;
    align-items: center;
}
.sep--dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--c-line); }

/* ---------------------------------------------------------------------------
   Pie
--------------------------------------------------------------------------- */

.pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-top: calc(10px * var(--density));
    font-size: calc(13px * var(--font-scale));
    color: var(--c-muted);
    text-decoration: none;
    text-align: center;
}
.pie b {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    color: var(--c-ink);
    letter-spacing: .01em;
}
.pie:hover b { color: var(--c-accent); }

/* ---------------------------------------------------------------------------
   Aparicion escalonada de los bloques

   Cada bloque entra con un retardo propio que el PHP pone en --i. Es un
   detalle chico que hace que la pagina se sienta armada y no volcada.
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .anima .head,
    .anima .bloques > *,
    .anima .pie {
        animation: entra .44s cubic-bezier(.22, 1, .36, 1) both;
        animation-delay: calc(var(--i, 0) * 45ms);
    }
}

@keyframes entra {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   Pantallas chicas
--------------------------------------------------------------------------- */

@media (max-width: 380px) {
    .wrap { padding-left: 13px; padding-right: 13px; }
    .head h1 { font-size: calc(26px * var(--font-scale)); }
    .b { gap: 11px; }
    .b__ic { width: 34px; height: 34px; }
}

/* ---------------------------------------------------------------------------
   Impresion: para cuando imprimas la pagina de un cliente como muestra
--------------------------------------------------------------------------- */

@media print {
    body { background: #fff !important; color: #000; }
    .head { background: #fff !important; color: #000 !important; border: 1px solid #ccc; }
    .head__orn, .copiar, .embed, .form { display: none !important; }
    .b, .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}