/* ---------------------------------------------------------------------------
   Dkard Chispa — tarjeta de contacto digital (plan gratuito).
   Paleta editable por negocio vía --chispa-primario/--chispa-secundario
   (fijadas en chispa.js desde negocio.color_primario / config.chispa) —
   estos valores de acá son solo el default hasta que el negocio elija los
   suyos.
   --------------------------------------------------------------------- */

:root {
    --chispa-primario: #7c5cff;
    --chispa-secundario: #ff6b9d;
    --chispa-bg: #f5f4f8;
    --chispa-card-bg: #ffffff;
    --chispa-text: #17131f;
    --chispa-muted: #6b6478;
    --chispa-borde: #ebe8f2;
    --chispa-radio: 20px;
    --chispa-sombra: 0 1px 2px rgba(23, 19, 31, .04), 0 8px 24px rgba(23, 19, 31, .06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
    /* Fondo por defecto: degradado con los dos colores del negocio.
       chispa.js lo reemplaza por una imagen o un color plano según lo que
       haya configurado (ver --chispa-fondo-custom). */
    background: var(--chispa-fondo-custom, linear-gradient(160deg, var(--chispa-primario), var(--chispa-secundario)));
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem 3rem;
    color: var(--chispa-text);
    -webkit-font-smoothing: antialiased;
}

/* --- El desplazamiento -----------------------------------------------------
   La pagina no estilaba su barra, asi que salia la del navegador: gris claro
   sobre blanco, pegada al borde de un degradado de color. Es lo unico de la
   Chispa que no se ve disenado.

   EL TRUCO ESTA EN QUE CONTRASTEN ENTRE ELLAS, no con el fondo. El negocio
   puede poner de fondo lo que quiera —un degradado, un color plano, una foto—
   asi que ningun color fijo se lee bien en todos los casos. Con el carril en
   blanco translucido y el pulgar en tinta translucida, los dos se tinen del
   fondo que tengan detras pero SIEMPRE se distinguen el uno del otro, que es
   lo que hay que leer en una barra.

   El borde transparente con `background-clip: padding-box` es lo que deja el
   pulgar mas fino que el carril sin tener que dibujar dos anchos distintos. */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(23, 19, 31, .32) rgba(255, 255, 255, .28);
    /* Los enlaces del indice saltan de golpe a su seccion. Con esto acompanan,
       que en una pagina de una sola columna es la diferencia entre «se movio»
       y «me movi». */
    scroll-behavior: smooth;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .28); }
::-webkit-scrollbar-thumb {
    background: rgba(23, 19, 31, .32);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(23, 19, 31, .5);
    background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.hidden { display: none !important; }

/* LA PRECARGA TIENE SU PROPIO FONDO, NEGRO.
   ---------------------------------------------------------------------------
   Antes no lo tenia, asi que se veia el del body: un degradado morado y rosa
   —los `--chispa-primario/secundario` por defecto— que se enseñaba unas
   decimas hasta que chispa.js aplicaba los colores del negocio. Un morado que
   no es de nadie, ni de DKARD ni del cliente, justo en el primer instante de
   la pagina.

   Fija y cubriendo todo: si solo ocupara su hueco, el degradado seguiria
   asomando alrededor. */
.chispa-loading {
    position: fixed;
    inset: 0;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #0d0906;
}

/* Y el spinner, en el naranja de DKARD. */
.chispa-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(242, 96, 12, .22);
    border-top-color: #F2600C;
    animation: chispa-spin .8s linear infinite;
}
@keyframes chispa-spin { to { transform: rotate(360deg); } }

.chispa-error {
    color: #fff;
    text-align: center;
    margin-top: 4rem;
    font-size: 1.05rem;
}

.chispa-card {
    width: 100%;
    max-width: 440px;
    background: var(--chispa-card-bg);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    height: fit-content;
}

/* ------------------------------------------------------------------
   Encabezado: imagen propia, o uno de 3 patrones sobre el color base
   ------------------------------------------------------------------ */
.chispa-header {
    position: relative;
    height: 172px;
    background-color: var(--chispa-header-color, var(--chispa-primario));
}
.chispa-header-img {
    position: absolute;
    inset: 0;
    margin: 0;
    background-size: cover;
    background-position: center;
    /* El color de fondo del header (--chispa-header-color) ya es un valor
       propio, independiente de la imagen. Antes la imagen lo tapaba del todo
       —era opaca siempre—, así que elegir un color de fondo no tenía ningún
       efecto visible en cuanto se subía una imagen. Con esta opacidad
       editable, el color se sigue viendo debajo, como un tinte. */
    opacity: var(--chispa-header-img-opacity, 1);
}

/* Patrones: se pintan con gradientes CSS sobre el color de encabezado, así
   no hace falta ninguna imagen y siguen el color que elija el negocio. */
.chispa-header[data-patron="puntos"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.6px);
    background-size: 14px 14px;
}
.chispa-header[data-patron="diagonales"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 10px, transparent 10px 20px);
}
.chispa-header[data-patron="ondas"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 120%, rgba(255,255,255,.28), transparent 55%),
        radial-gradient(circle at 80% -20%, rgba(255,255,255,.22), transparent 55%);
}
.chispa-header[data-patron="degradado"]::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--chispa-primario), var(--chispa-secundario));
}

.chispa-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .3) 100%);
}
.chispa-profile {
    position: absolute;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
}
.chispa-profile-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #fff center/cover no-repeat;
    border: 4px solid #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    margin: 0;
}

.chispa-body {
    padding: 60px 1.6rem 1.8rem;
    text-align: center;
}

.chispa-nombre {
    /* Más chico y en el color de marca: deja de competir con el titular de
       abajo, que es el mensaje que de verdad presenta al negocio. */
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--chispa-primario);
    /* Aire arriba: el logo se superpone al encabezado y sin este margen el
       nombre le quedaba pegado. */
    margin: 1.4rem 0 .35rem;
}

/* Titular y descripción traídos del hero del dkard. */
.chispa-intro { margin: 0 0 1.1rem; }
.chispa-intro.hidden { display: none; }
.chispa-intro-titulo {
    /* Separa el titular del nombre, que va justo encima y en otro tamaño. */
    margin-top: .6rem;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 .45rem;
}
.chispa-intro-titulo strong { color: var(--chispa-primario); }
.chispa-intro-texto {
    margin: 0;
    font-size: .95rem;
    line-height: 1.45;
    opacity: .8;
}

/* ------------------------------------------------------------------
   Redes
   ------------------------------------------------------------------ */
.chispa-socials {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.4rem;
}
.chispa-social-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--chispa-bg);
    border: 1px solid var(--chispa-borde);
    color: var(--chispa-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .16s, color .16s, transform .16s, border-color .16s;
}
.chispa-social-icon svg { width: 18px; height: 18px; }
.chispa-social-icon:hover {
    background: var(--chispa-primario);
    border-color: var(--chispa-primario);
    color: #fff;
    transform: translateY(-2px);
}

.chispa-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    padding: .95rem;
    border-radius: 999px;
    /* Degradado del negocio, no el verde de WhatsApp: el botón es el llamado
       principal de la página y tiene que verse de la marca. El ícono sí se
       mantiene, que es lo que comunica por dónde llega el mensaje. */
    background: linear-gradient(135deg, var(--chispa-primario), var(--chispa-secundario));
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    /* Un pelo de interletrado: en mayúsculas y en negrilla el texto se aprieta
       y se lee peor que en caja baja. */
    letter-spacing: .03em;
    text-decoration: none;
    /* Sombra teñida con el color del negocio. La primera línea es el respaldo
       para navegadores sin color relativo. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    box-shadow: 0 6px 18px rgb(from var(--chispa-primario) r g b / .32);
    transition: filter .16s, transform .1s, box-shadow .16s;
}
.chispa-whatsapp-btn svg { width: 24px; height: 24px; flex-shrink: 0; }
/* Más chico que el de "Contacto directo": el botón Solicitar es de tarjeta,
   no de encabezado, y a 24px el ícono pesaba más que el propio texto. */
.chispa-solicitar-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.chispa-whatsapp-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
    box-shadow: 0 8px 22px rgb(from var(--chispa-primario) r g b / .42);
}
.chispa-whatsapp-btn:active { transform: scale(.985); }

/* ------------------------------------------------------------------
   Secciones
   ------------------------------------------------------------------ */
.chispa-section { text-align: left; margin-top: 2rem; }
.chispa-section-title {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--chispa-muted);
    margin: 0 0 .85rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
/* Línea que completa el ancho a la derecha del título — detalle tomado de
   la estética del admin. */
.chispa-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--chispa-borde);
}

/* Destacados: cada tarjeta con fondo llamativo (degradado de marca) y el
   botón en blanco sobre él, para que se lean como bloques de acción. */
.chispa-destacados { display: flex; flex-direction: column; gap: .8rem; }
.chispa-destacado-card {
    position: relative;
    background: linear-gradient(135deg, var(--chispa-primario), var(--chispa-secundario));
    border-radius: 18px;
    padding: 1.15rem 1.2rem;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(23, 19, 31, .14);
}
/* Cada tarjeta rota el ángulo del degradado para que no se vean calcadas. */
.chispa-destacado-card:nth-child(2) { background: linear-gradient(135deg, var(--chispa-secundario), var(--chispa-primario)); }
.chispa-destacado-card:nth-child(3) { background: linear-gradient(200deg, var(--chispa-primario), var(--chispa-secundario)); }
.chispa-destacado-card::after {
    content: '';
    position: absolute;
    right: -30px; top: -30px;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}
.chispa-destacado-card h3 { margin: 0 0 .3rem; font-size: 1.02rem; font-weight: 800; position: relative; }
.chispa-destacado-card p { margin: 0 0 .9rem; font-size: .87rem; line-height: 1.45; color: rgba(255, 255, 255, .9); position: relative; }
.chispa-solicitar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .48rem 1.05rem;
    border-radius: 999px;
    background: #fff;
    color: var(--chispa-text);
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .14s, box-shadow .16s;
}
.chispa-solicitar-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }

/* Galería: 3 columnas en desktop, 2 en mobile. */
.chispa-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}
.chispa-gallery-item {
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--chispa-bg);
}
.chispa-gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.chispa-gallery-item:hover img { transform: scale(1.06); }


/* Contacto */
.chispa-contact-list { display: flex; flex-direction: column; gap: .5rem; }
.chispa-contact-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem .9rem;
    border-radius: 14px;
    background: var(--chispa-bg);
    border: 1px solid var(--chispa-borde);
    color: var(--chispa-text);
    text-decoration: none;
    font-size: .9rem;
    transition: border-color .16s, transform .16s;
}
.chispa-contact-item:hover { border-color: var(--chispa-primario); transform: translateX(2px); }
.chispa-contact-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--chispa-borde);
    color: var(--chispa-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chispa-contact-icon svg { width: 16px; height: 16px; }

/* Formulario */
.chispa-form { display: flex; flex-direction: column; gap: .8rem; }
.chispa-form label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--chispa-muted);
}
.chispa-form input, .chispa-form textarea {
    font-family: inherit;
    font-size: .93rem;
    padding: .72rem .85rem;
    border-radius: 12px;
    border: 1px solid var(--chispa-borde);
    background: var(--chispa-bg);
    color: var(--chispa-text);
    resize: vertical;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.chispa-form input::placeholder, .chispa-form textarea::placeholder { color: #a9a3b8; }
.chispa-form input:hover, .chispa-form textarea:hover { border-color: #d6d0e4; }
.chispa-form input:focus, .chispa-form textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--chispa-primario);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chispa-primario) 18%, transparent);
}
.chispa-form button {
    margin-top: .3rem;
    padding: .85rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--chispa-primario), var(--chispa-secundario));
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    cursor: pointer;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--chispa-primario) 35%, transparent);
    transition: filter .16s, transform .1s;
}
.chispa-form button:hover { filter: brightness(1.07); }
.chispa-form button:active { transform: scale(.985); }

/* ------------------------------------------------------------------
   Pie: marca Dkard + invitación discreta
   ------------------------------------------------------------------ */
.chispa-footer {
    margin-top: 2.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--chispa-borde);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
}
.chispa-footer-logo { height: 22px; width: auto; opacity: .85; }
.chispa-footer-cta {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--chispa-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .16s, border-color .16s;
}
.chispa-footer-cta:hover { color: var(--chispa-primario); border-bottom-color: var(--chispa-primario); }

/* Zoom simple de galería: overlay a pantalla completa, se cierra tocando
   en cualquier lado. Sin flechas ni contador — a propósito. */
.chispa-zoom {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(12, 9, 18, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    cursor: zoom-out;
    animation: chispa-zoom-in .16s ease-out;
}
.chispa-zoom.hidden { display: none; }
.chispa-zoom img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
@keyframes chispa-zoom-in { from { opacity: 0; } to { opacity: 1; } }
body.chispa-zoom-abierto { overflow: hidden; }
.chispa-gallery-item img { cursor: zoom-in; }

/* Cuatro patrones más, mismo criterio: solo gradientes CSS sobre el color de
   encabezado, sin imágenes y siguiendo la paleta del negocio. */
.chispa-header[data-patron="cuadricula"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
    background-size: 22px 22px;
}
.chispa-header[data-patron="triangulos"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.20) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,.20) 25%, transparent 25%);
    background-size: 26px 26px;
}
.chispa-header[data-patron="circulos"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 8px, rgba(255,255,255,.16) 9px, transparent 10px);
    background-size: 34px 34px;
}
.chispa-header[data-patron="zigzag"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.18) 75%),
        linear-gradient(135deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.18) 75%);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}

/* Cuatro patrones más (tanda del 28/08), mismo criterio que los ocho de
   arriba: gradientes CSS puros sobre el color del encabezado. */
.chispa-header[data-patron="rombos"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.16) 75%),
        linear-gradient(-45deg, rgba(255,255,255,.16) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.16) 75%);
    background-size: 28px 28px;
}
.chispa-header[data-patron="rayas"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 6px, transparent 6px 22px);
}
.chispa-header[data-patron="burbujas"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 18% 35%, rgba(255,255,255,.22) 0 9px, transparent 10px),
        radial-gradient(circle at 62% 70%, rgba(255,255,255,.16) 0 14px, transparent 15px),
        radial-gradient(circle at 85% 20%, rgba(255,255,255,.20) 0 6px, transparent 7px),
        radial-gradient(circle at 40% 88%, rgba(255,255,255,.14) 0 7px, transparent 8px);
    background-size: 120px 120px;
}
.chispa-header[data-patron="destellos"]::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.4px),
        radial-gradient(rgba(255,255,255,.30) 1px, transparent 1.4px);
    background-size: 38px 38px, 26px 26px;
    background-position: 0 0, 13px 17px;
}

/* Las tres opciones de contacto son enlaces reales (llamar, escribir, mapa):
   el cursor tiene que decirlo. */
.chispa-contact-item { cursor: pointer; }

/* La galería abre en grande al tocar, y cualquier clic la cierra. */
.chispa-gallery-item img { cursor: zoom-in; }
.chispa-zoom { cursor: zoom-out; }
.chispa-zoom img { cursor: zoom-out; }

/* ===========================================================================
   Foto por destacado y color propio de la seccion
   =========================================================================== */

/* Los colores de ESTA seccion, cada uno con su cadena de fallbacks.
   ---------------------------------------------------------------------------
   El editor pasó de un solo «color de la sección» a cuatro decisiones: los
   dos extremos del degradado de las tarjetas, el color del título y el del
   texto. Cada variable cae en lo que había antes, en este orden:

     grad_1  -> el primario de la página          (lo de siempre)
     grad_2  -> el acento viejo (color_destacados) -> el secundario
     titulo  -> blanco                             (lo de siempre)
     texto   -> blanco al 90%                      (lo de siempre)

   Así un Chispa guardado ayer —con o sin color_destacados— se ve EXACTAMENTE
   igual que ayer, y solo cambia el que toque los controles nuevos. */
#chispa-destacados-section {
    --chispa-destacado-acento: var(--chispa-secundario);
    --chispa-dest-grad-1: var(--chispa-primario);
    --chispa-dest-grad-2: var(--chispa-destacado-acento);
    --chispa-dest-titulo: #fff;
    --chispa-dest-texto: rgba(255, 255, 255, .9);
}
#chispa-destacados-section .chispa-destacado-card {
    background: linear-gradient(135deg, var(--chispa-dest-grad-1), var(--chispa-dest-grad-2));
}
#chispa-destacados-section .chispa-destacado-card:nth-child(2) {
    background: linear-gradient(135deg, var(--chispa-dest-grad-2), var(--chispa-dest-grad-1));
}
#chispa-destacados-section .chispa-destacado-card:nth-child(3) {
    background: linear-gradient(200deg, var(--chispa-dest-grad-1), var(--chispa-dest-grad-2));
}
#chispa-destacados-section .chispa-destacado-card h3 { color: var(--chispa-dest-titulo); }
#chispa-destacados-section .chispa-destacado-card p { color: var(--chispa-dest-texto); }

/* La tarjeta pasa a ser una fila: foto pequeña a la izquierda, texto y boton a
   la derecha. La foto es DISCRETA a proposito —72px— porque esto es una
   tarjeta de contacto, no un catalogo: la foto acompaña, no manda. Quien
   quiera verla bien la toca. */
.chispa-destacado-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}
.chispa-destacado-cuerpo { flex: 1; min-width: 0; }

.chispa-destacado-foto {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid rgb(255 255 255 / 0.35);
    border-radius: 14px;
    overflow: hidden;
    background: rgb(255 255 255 / 0.12);
    cursor: zoom-in;
    /* Encima del ::after decorativo de la tarjeta, que si no se come el toque. */
    position: relative;
    z-index: 1;
}
.chispa-destacado-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.chispa-destacado-foto:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* En pantallas muy angostas la foto se achica un punto mas: con 72px y el
   texto al lado, un titulo de dos palabras se partia en tres lineas. */


/* --- El formulario de contacto ------------------------------------------- */

/* Correo y telefono comparten fila: son dos datos cortos y opcionales, y
   apilados hacian el formulario el doble de largo de lo que es. Debajo de
   520px vuelven a apilarse, que es donde dos campos lado a lado dejan doce
   caracteres visibles en cada uno. */
.chispa-form-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}


/* "(opcional)" se dice, y se dice flojo. Un formulario donde no se sabe que
   es obligatorio se abandona; uno lleno de asteriscos rojos, tambien. */
.chispa-form label em {
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: .65;
}

.chispa-form-error {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: #c0392b;
}
.chispa-form-error.hidden { display: none; }

/* La nota bajo el boton quita el miedo a pulsarlo: dice exactamente que va a
   pasar. Es la diferencia entre "enviar" y "no se que hace esto". */
.chispa-form-nota {
    margin: .1rem 0 0;
    font-size: .74rem;
    line-height: 1.35;
    color: var(--chispa-muted);
    text-align: center;
}

/* Campo obligatorio sin escribir, ya avisado: se marca el borde. Solo tras el
   aviso —con :invalid a secas, el formulario nace en rojo antes de que nadie
   lo toque. */
.chispa-form.avisado input:invalid,
.chispa-form.avisado textarea:invalid {
    border-color: #c0392b;
}


/* =======================================================================
   LOS @media, DE MAYOR A MENOR
   =======================================================================
   Estaban repartidos por todo el archivo y en cualquier orden, y eso
   en CSS no es un detalle de estilo: con `max-width`, dos reglas de la
   misma especificidad las decide el ORDEN DE APARICION. Un bloque de
   550px escrito despues de uno de 350px gana tambien por debajo de
   350 — o sea que el ajuste para pantallas chicas no se aplicaba
   nunca. Pasaba en 27 de los 35 bloques.

   Ordenados de mayor a menor, el mas chico siempre queda de ultimo y
   por lo tanto gana, que es justo lo que uno espera al escribirlo.
   AL AGREGAR UNO NUEVO: va aqui, en su sitio por tamaño. Uno suelto
   mas arriba en el archivo vuelve a romper esto en silencio.
   ======================================================================= */

@media (max-width: 520px) {
    .chispa-form-fila { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .chispa-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* PANTALLAS MUY ESTRECHAS: menos relleno en las tarjetas de servicio.
   Con 1.15rem por lado, en 360px la tarjeta se queda con poco mas de 300px
   utiles y el texto se corta. El relleno es lo primero que sobra cuando el
   ancho escasea. */
@media (max-width: 400px) {
    /* El relleno lateral de la pagina: 1rem por lado son 32px que la tarjeta
       no tiene. A este ancho se notan. */
    body { padding-left: .5rem; padding-right: .5rem; }

    .chispa-destacado-card {
        padding: .85rem .8rem;
        border-radius: 14px;
    }

    .chispa-destacado-card h3 { font-size: .96rem; }
}

@media (max-width: 380px) {
    .chispa-destacado-foto { flex-basis: 60px; width: 60px; height: 60px; }
}