/* 2026-11-07: pagina publica de reserva (Pages/Publico/Reservar.razor).
   Es la unica pantalla que ve un desconocido desde su telefono, y la que justifica el cobro
   mensual: si se ve barata, el negocio parece barato. Asi que se disena primero para pantalla
   angosta y con holgura.

   Todo el acento sale de --marca, que la pagina pone inline con negocio.color_primario. Cada
   negocio se ve suyo sin tocar este archivo. */

.rv {
    --tinta:      #15181d;
    --tinta-sua:  #697180;
    --linea:      #e8eaee;
    --papel:      #ffffff;
    --fondo:      #f6f7f9;
    --radio:      16px;
    --sombra:     0 1px 2px rgba(16, 20, 28, .04), 0 8px 24px -12px rgba(16, 20, 28, .12);
    --sombra-alta:0 2px 4px rgba(16, 20, 28, .05), 0 14px 32px -14px rgba(16, 20, 28, .22);

    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 7rem;          /* deja sitio a la barra fija de abajo */
    color: var(--tinta);
}

body:has(.rv) { background: var(--fondo, #f6f7f9); }

.reserva-centro {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* ---------------------------------------------------------------- portada */

.rv-portada {
    position: relative;
    padding: 2.4rem 1.25rem 1.5rem;
    text-align: center;
    overflow: hidden;
}

/* La banda de color del negocio, desvanecida. Da identidad sin gritar. */
.rv-portada::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 50% -20%,
            color-mix(in srgb, var(--marca) 26%, transparent) 0%,
            color-mix(in srgb, var(--marca) 6%, transparent) 55%,
            transparent 100%);
    pointer-events: none;
}

.rv-portada > * { position: relative; }

.rv-logo {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 22px;
    background: var(--papel);
    box-shadow: var(--sombra-alta);
    margin-bottom: .9rem;
}

/* Si el negocio no subio logo, su inicial en su color: nunca un hueco gris. */
.rv-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 22px;
    margin-bottom: .9rem;
    background: var(--marca);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: var(--sombra-alta);
}

.rv-portada h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.rv-portada p {
    margin: .35rem 0 0;
    font-size: .88rem;
    color: var(--tinta-sua);
}

/* 2026-11-09: "Cómo llegar". Toma --marca en el BORDE y el icono, nunca en el texto: el color
   lo elige el negocio y un azul marino sobre fondo oscuro no se leeria. Misma regla que la
   banda de la portada. */
.rv-mapa {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    padding: .4rem .85rem;
    border: 1px solid var(--marca, #1d4ed8);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    /* 44 px de alto minimo: es un boton que se toca con el dedo, no con el mouse. */
    min-height: 2.4rem;
}

.rv-mapa i { color: var(--marca, #1d4ed8); }
.rv-mapa:hover { background: color-mix(in srgb, var(--marca, #1d4ed8) 10%, transparent); }

/* ------------------------------------------------------------------ pasos */

.rv-cuerpo { padding: .5rem 1rem 0; }

.paso { margin-bottom: 1.9rem; }

.paso h2 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .85rem;
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.paso h2 .n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca) 12%, #fff);
    color: var(--marca);
    font-size: .78rem;
    font-weight: 700;
}

/* -------------------------------------------------- tarjetas (servicio / persona) */

.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: .65rem;
}

.tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    text-align: left;
    padding: .95rem 1rem;
    border: 1.5px solid transparent;
    border-radius: var(--radio);
    background: var(--papel);
    box-shadow: var(--sombra);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.tarjeta:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }
.tarjeta:active { transform: translateY(0); }

/* 2026-11-12: la foto de referencia del servicio. Sangra hasta los bordes de la tarjeta
   (margen negativo contra el padding) y el cliente la toca para verla en grande; sin foto
   la tarjeta se ve exactamente como siempre. */
.tarjeta .srv-foto {
    width: calc(100% + 2rem);
    margin: -.95rem -1rem .45rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: calc(var(--radio) - 2px) calc(var(--radio) - 2px) 0 0;
    cursor: zoom-in;
    background: #EEF2F8;
}

.tarjeta b { font-size: .97rem; font-weight: 620; letter-spacing: -.01em; }
.tarjeta span { font-size: .8rem; color: var(--tinta-sua); }
.tarjeta .precio { margin-top: .15rem; font-weight: 680; color: var(--tinta); font-size: .92rem; }

.tarjeta.elegida {
    border-color: var(--marca);
    background: color-mix(in srgb, var(--marca) 5%, #fff);
}

.tarjeta.elegida .precio { color: var(--marca); }

/* La palomita de elegido, arriba a la derecha. */
.tarjeta.elegida::after {
    content: "";
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--marca)
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
        center / 11px 11px no-repeat;
}

/* --------------------------------------------------- tira de dias */

.dias {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .15rem .15rem .6rem;
    margin: 0 -.15rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.dias::-webkit-scrollbar { display: none; }

.dia {
    flex: 0 0 auto;
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .05rem;
    padding: .65rem .2rem .6rem;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: var(--papel);
    box-shadow: var(--sombra);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.dia:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }

.dia .sem { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-sua); }
.dia .num { font-size: 1.28rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.dia .mes { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-sua); }

.dia.elegida {
    background: var(--marca);
    border-color: var(--marca);
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--marca) 55%, transparent);
}

.dia.elegida .num,
.dia.elegida .sem,
.dia.elegida .mes { color: #fff; }

/* --------------------------------------------------- horas, por franja */

.franja + .franja { margin-top: 1.1rem; }

.franja h3 {
    margin: 0 0 .55rem;
    font-size: .72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tinta-sua);
}

.horas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .5rem;
}

.hora {
    padding: .7rem .3rem;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: var(--papel);
    box-shadow: var(--sombra);
    cursor: pointer;
    font: inherit;
    font-weight: 620;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    color: inherit;
    text-align: center;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.hora:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }

.hora.elegida {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--marca) 55%, transparent);
}

/* --------------------------------------------------- formulario y caja */

.caja {
    background: var(--papel);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.1rem;
}

.rv .mud-input-outlined-border { border-radius: 12px; }

.rv-enviar {
    width: 100%;
    margin-top: .3rem;
    padding: .95rem 1rem;
    border: 0;
    border-radius: 14px;
    background: var(--marca);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--marca) 65%, transparent);
    transition: transform .14s ease, opacity .14s ease;
}

.rv-enviar:hover:not(:disabled) { transform: translateY(-1px); }
.rv-enviar:disabled { opacity: .55; cursor: default; }

/* El campo trampa para robots: fuera de la vista, pero NO display:none, porque hay robots que
   precisamente saltan los campos ocultos de esa forma. */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------- barra fija de resumen */

/* En el telefono la eleccion se pierde al desplazarse por las horas. Esta barra la mantiene
   a la vista sin robar un paso mas. */
.rv-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
    padding: .8rem 1.15rem calc(.8rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--linea);
}

.rv-barra .que { font-size: .9rem; font-weight: 620; letter-spacing: -.01em; }
.rv-barra .cuando { font-size: .78rem; color: var(--tinta-sua); margin-top: .1rem; }
.rv-barra .monto { font-size: 1.05rem; font-weight: 700; color: var(--marca); white-space: nowrap; }

/* --------------------------------------------------- listo */

.rv-listo {
    text-align: center;
    background: var(--papel);
    border-radius: 20px;
    box-shadow: var(--sombra-alta);
    padding: 2.2rem 1.5rem;
}

.rv-palomita {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 1rem;
    background: color-mix(in srgb, var(--marca) 12%, #fff);
    color: var(--marca);
}

.rv-listo h2 { margin: 0 0 .9rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }

.rv-cuando {
    display: inline-block;
    padding: .8rem 1.3rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--marca) 7%, #fff);
    line-height: 1.5;
}

.rv-cuando .hh { font-size: 1.7rem; font-weight: 750; color: var(--marca); letter-spacing: -.02em; }
.rv-cuando .dd { font-size: .88rem; color: var(--tinta-sua); }

.rv-nota { margin: 1.1rem 0 0; font-size: .88rem; color: var(--tinta-sua); line-height: 1.5; }

.rv-otra {
    margin-top: 1.4rem;
    padding: .7rem 1.4rem;
    border: 1.5px solid var(--linea);
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    color: var(--tinta-sua);
    cursor: pointer;
}

.rv-otra:hover { border-color: var(--marca); color: var(--marca); }

/* --------------------------------------------------- pie */

.rv-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 1rem 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linea);
    font-size: .78rem;
    color: var(--tinta-sua);
}

.rv-pie a { color: inherit; text-decoration: none; font-weight: 600; }
.rv-pie a:hover { color: var(--marca); }
.rv-pie .sello { opacity: .6; }

@media (max-width: 380px) {
    .tarjetas { grid-template-columns: 1fr; }
    .rv-portada h1 { font-size: 1.4rem; }
}

/* --------------------------------------------------- agregar a pantalla de inicio */

/* Arriba y no abajo: abajo pelea con la barra fija del resumen, y en el teléfono el pulgar
   descarta por accidente lo que está al alcance del pulgar. */
.rv-instalar {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0 auto 1rem;
    max-width: 600px;
    padding: .85rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--marca) 9%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--marca) 22%, transparent);
}

.rv-instalar .txt { flex: 1; min-width: 0; }
.rv-instalar b { display: block; font-size: .92rem; font-weight: 650; letter-spacing: -.01em; }
.rv-instalar span { font-size: .8rem; color: var(--tinta-sua, #697180); }

.rv-instalar .si {
    flex: 0 0 auto;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 10px;
    background: var(--marca);
    color: #fff;
    font: inherit;
    font-size: .85rem;
    font-weight: 650;
    cursor: pointer;
}

.rv-instalar .no {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tinta-sua, #697180);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

/* ===================================================================================
   2026-11-11 — la portada y las tarjetas, segun la maqueta que mando Jorge.
   Criterio suyo, dicho con estas palabras: "un diseño más limpio, sin tantas rayas".
   Asi que aqui casi no hay bordes: lo que separa es el aire y una sombra muy baja.
   =================================================================================== */

/* ---- cinta de la portada: en que paso va, y si esta abierto ---- */
.rv-cinta {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; margin-bottom: 1.1rem;
}
.rv-cinta .etapa {
    font-size: .7rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--tinta-sua);
}
.rv-cinta .estado {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 650;
    padding: .3rem .65rem; border-radius: 999px;
}
.rv-cinta .estado i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
/* Verde y gris, no el color del negocio: "abierto" es un hecho, no parte de su marca, y en
   un negocio con color verde la ficha de cerrado se leeria como abierta. */
.rv-cinta .estado.si { background: #E8F7EE; color: #15803D; }
.rv-cinta .estado.si i { background: #15803D; }
.rv-cinta .estado.no { background: #F1F3F6; color: var(--tinta-sua); }
.rv-cinta .estado.no i { background: #98A2B3; }

/* ---- el logo con su sello de verificado ---- */
.rv-marca { position: relative; display: inline-block; }
/* La palomita va como SVG de fondo y no como <i> de un CDN: esta es la pagina que ve un
   desconocido desde su telefono, y si la fuente de iconos no carga, un circulo de color vacio
   se ve roto. Mismo recurso que ya usa .tarjeta.elegida::after. */
.rv-sello {
    position: absolute; right: -4px; bottom: -2px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--marca, #1d4ed8)
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
        center / 14px 14px no-repeat;
    box-shadow: 0 0 0 3.5px var(--papel);
}

/* ---- pastillas de categoria ---- */
.rv-cats {
    display: flex; gap: .45rem; flex-wrap: nowrap; overflow-x: auto;
    margin-bottom: .9rem; padding-bottom: .2rem;
    scrollbar-width: none;
}
.rv-cats::-webkit-scrollbar { display: none; }
.rv-cat {
    flex: 0 0 auto; border: 0; font: inherit; cursor: pointer;
    padding: .45rem .9rem; border-radius: 999px;
    background: #EFF1F5; color: var(--tinta-sua); font-size: .82rem; font-weight: 620;
    transition: background .14s ease, color .14s ease;
}
.rv-cat:hover { background: #E6E9EF; }
.rv-cat.on { background: var(--marca, #1d4ed8); color: #fff; }

/* ---- tarjeta de servicio: etiqueta arriba, duracion y precio abajo ---- */
.tarjeta .eti {
    align-self: flex-start;
    font-size: .66rem; font-weight: 700; letter-spacing: .03em;
    padding: .2rem .5rem; border-radius: 999px;
    background: color-mix(in srgb, var(--marca, #1d4ed8) 12%, #fff);
    color: color-mix(in srgb, var(--marca, #1d4ed8) 72%, #0A1020);
    margin-bottom: .35rem;
}
.tarjeta .pie {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-top: .55rem;
}
.tarjeta .dur { display: inline-flex; align-items: center; gap: .32rem; font-size: .78rem; }
.tarjeta .dur::before {
    content: ""; width: 13px; height: 13px; flex: 0 0 auto; opacity: .75;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697180' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* El precio en su pastilla: se lee de un vistazo sin competir con el nombre. */
.tarjeta .pie .precio {
    margin-top: 0; padding: .25rem .55rem; border-radius: 8px;
    background: #F1F3F6; font-size: .84rem; font-weight: 680; color: var(--tinta);
}
.tarjeta.elegida .pie .precio {
    background: color-mix(in srgb, var(--marca, #1d4ed8) 12%, #fff);
}

/* ---- titulo de paso con su aclaracion al lado ---- */
.paso h2 .tt { display: flex; flex-direction: column; }
.paso h2 .tt small {
    font-size: .76rem; font-weight: 500; color: var(--tinta-sua); letter-spacing: 0;
}
/* La segunda mitad del paso 2 (dia y hora) no repite el numero: es el mismo paso. */
.paso.sigue { margin-top: -.6rem; }
.rv-rotulo {
    font-size: .82rem; font-weight: 650; color: var(--tinta-sua);
    margin: 0 0 .5rem;
}
.tarjetas.quien { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* ---- aviso suave (el tope de servicios) ---- */
.rv-aviso {
    margin-top: .8rem; padding: .7rem .9rem; border-radius: 12px;
    background: #FEF6E7; color: #B45309; font-size: .82rem; line-height: 1.45;
}

/* ---- el sello del pie ---- */
.rv-pie .sello { display: inline-flex; align-items: center; gap: .35rem; }
.rv-pie .sello::before {
    content: ""; width: 12px; height: 12px; flex: 0 0 auto; opacity: .7;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697180' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* El mismo aviso, en gris, para lo que no es un problema del cliente sino del dia que escogio. */
.rv-aviso.neutro { background: #F1F3F6; color: var(--tinta-sua); margin-top: .9rem; }
.tarjetas.quien .tarjeta { min-height: 68px; justify-content: center; }

/* ==== la portada configurable (spec-portada-negocio, fase 2) =============================
   Bloques que el dueño enciende sobre su reserva. El hero es el protagonista; el portafolio
   es lo que mas vende en un negocio de servicios, por eso su primera foto va grande. Los
   colores salen de la marca: --marca, --acento y sus tintas (ColoresDeMarca). */

.pc-hero {
    position: relative; overflow: hidden; margin: 0 1rem 1rem;
    border-radius: var(--radio); min-height: 230px;
    background: var(--marca) center/cover no-repeat;
    display: grid; align-items: end; box-shadow: var(--sombra-alta);
}
/* Con foto, texto SIEMPRE blanco sobre velo oscuro: legible con cualquier imagen. */
.pc-hero-velo {
    width: 100%; padding: 3.2rem 1.25rem 1.25rem;
    background: linear-gradient(transparent, rgba(10, 14, 24, .74));
    color: #fff;
}
.pc-hero.sinfoto { min-height: 0; }
.pc-hero.sinfoto .pc-hero-velo { background: none; color: var(--marca-tinta); padding-top: 1.5rem; }
.pc-hero h2 {
    margin: 0 0 .3rem; font-size: clamp(1.4rem, 5.5vw, 1.9rem); line-height: 1.12;
    letter-spacing: -.02em; font-weight: 800; text-wrap: balance; max-width: 22ch;
}
.pc-hero p { margin: 0 0 .9rem; font-size: .95rem; opacity: .92; max-width: 46ch; }
.pc-hero-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem;
    padding: .7rem 1.35rem; border-radius: 999px;
    background: var(--acento); color: var(--acento-tinta);
}
.pc-hero-btn:active { filter: brightness(.92); }

.pc-conf { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 1rem 1.1rem; }
.pc-conf-item {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .82rem; font-weight: 600;
    padding: .45rem .8rem; border-radius: 999px;
    background: var(--papel); border: 1px solid var(--linea);
}
.pc-conf-item .bi { color: var(--acento); }

.pc-bloque { padding: 0 1rem 1.4rem; }
.pc-bloque h3 { margin: 0 0 .65rem; font-size: 1.02rem; font-weight: 750; letter-spacing: -.01em; }

/* Portafolio: la primera grande ocupando dos columnas, las demas en cuadricula de tres. */
.pc-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.pc-foto {
    position: relative; padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
    border-radius: 12px; background: #eef2f8; aspect-ratio: 1;
}
.pc-foto.grande { grid-column: span 2; grid-row: span 2; }
.pc-galeria.uno .pc-foto.grande { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
/* Dos fotos: lado a lado, sin protagonista. */
.pc-galeria.dos { grid-template-columns: repeat(2, 1fr); }
.pc-galeria.dos .pc-foto.grande { grid-column: auto; grid-row: auto; }
/* La ultima se estira para cerrar la fila: con cualquier cantidad, la cuadricula sin huecos. */
.pc-foto.ancho2 { grid-column: span 2; aspect-ratio: 2 / 1; }
.pc-foto.ancho3 { grid-column: span 3; aspect-ratio: 3 / 1; }
.pc-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-foto-pie {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem .55rem .45rem;
    background: linear-gradient(transparent, rgba(10, 14, 24, .7)); color: #fff;
    font-size: .74rem; font-weight: 600; text-align: left;
}

/* Equipo: fichas en fila que se desliza en el telefono. */
.pc-equipo {
    display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: .6rem;
    overflow-x: auto; padding-bottom: .3rem; scroll-snap-type: x mandatory;
}
.pc-miembro {
    scroll-snap-align: start; text-align: center;
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: .9rem .6rem .8rem; display: grid; justify-items: center; gap: .15rem;
}
.pc-miembro img, .pc-inicial {
    width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: .4rem;
    box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--acento);
}
/* .pc-miembro .pc-inicial y no solo .pc-inicial: la regla de abajo para los span de la
   ficha (gris y chiquito) le ganaba y la inicial salia apagada. */
.pc-miembro .pc-inicial {
    display: grid; place-items: center; font-weight: 800; font-size: 1.6rem;
    background: var(--marca); color: var(--marca-tinta);
}
.pc-miembro b { font-size: .88rem; }
.pc-miembro span { font-size: .76rem; color: var(--tinta-sua); }

.pc-historia p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--tinta-sua); }

/* La vista previa de Mi portada: un telefono dentro del panel, pegado al deslizar. */
.pc-previa-marco { position: sticky; top: 80px; }
.pc-previa.rv {
    max-width: 412px; padding: 1rem 0 .5rem; overflow: hidden; background: var(--fondo);
    border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra-alta);
}
.pc-previa-vacia { padding: 2.5rem 1.25rem; text-align: center; font-size: .9rem; color: var(--tinta-sua); }

/* ====================== pie «Siguenos» (PieRedes) ====================== */
.pr-pie {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
    padding: 22px 16px 28px; margin-top: 8px;
    border-top: 1px solid var(--linea, #e8eaee); color: var(--tinta, #15181d);
}
.pr-sig { font-weight: 700; font-size: .95rem; letter-spacing: .01em; color: var(--marca, inherit); }
.pr-iconos { display: flex; gap: 10px; }
.pr-red {
    width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center;
    background: var(--marca, #1E40AF); color: var(--marca-tinta, #fff); font-size: 1.15rem;
    text-decoration: none; transition: transform .12s ease, filter .12s ease;
}
/* Cada red con su propio color de marca, como los reconoce todo el mundo: asi se ven actuales
   y no cuatro bolitas iguales. El texto «Siguenos» y el nombre si van en el color del negocio. */
.pr-red.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: #fff; }
.pr-red.facebook  { background: #1877F2; color: #fff; }
.pr-red.tiktok    { background: #010101; color: #fff; box-shadow: inset 0 0 0 1px #2b2b2b; }
.pr-red.whatsapp  { background: #25D366; color: #fff; }
.pr-red:hover { transform: translateY(-2px); filter: brightness(1.08); }
.pr-red:active { transform: none; filter: brightness(.92); }
.pr-nombre { flex-basis: 100%; text-align: center; font-size: .82rem; opacity: .65; }