/**
 * NALT — Estilo Día de Muertos para /tarjetas-tomin/.
 * Colores oficiales del sitio: verde jade (#00A86B), negro (#0A0A0A) y
 * naranja cempasúchil (#F5821F) — los mismos que ya usa la app (ver
 * app/index.html). El crema es solo fondo neutro para que el texto largo se
 * lea bien a la luz del día; no cuenta como color de marca nuevo.
 */

.tlq-tomin-pagina {
    --tdm-jade: #00A86B;
    --tdm-jade-oscuro: #00623c;
    --tdm-negro: #0A0A0A;
    --tdm-naranja: #F5821F;
    --tdm-crema: #FBF5E9;
    margin: 0;
}

/*
 * A propósito NO se usa el truco de "100vw + margen negativo" para salirse
 * del contenedor del tema: sin poder probarlo en el sitio real, ese truco es
 * el que más fácil causa una barra de scroll horizontal fantasma en algunos
 * temas/plugins. Las secciones solo llenan el ancho que Blocksy ya les da.
 */
.tlq-tomin-full {
    width: 100%;
}

/* ---------- Héroe (negro, como el cielo de noche de muertos) ---------- */

.tlq-tomin-hero {
    background:
        radial-gradient(circle at 15% 20%, rgba(245, 130, 31, .28), transparent 42%),
        radial-gradient(circle at 85% 75%, rgba(0, 168, 107, .28), transparent 42%),
        var(--tdm-negro);
    color: #fdfaf3;
    padding: 60px 20px 52px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tlq-tomin-hero__flor {
    position: absolute;
    opacity: .16;
    color: var(--tdm-naranja);
}
.tlq-tomin-hero__flor svg { width: 100%; height: 100%; }
.tlq-tomin-hero__flor--1 { width: 70px; height: 70px; top: 8%; left: 6%; transform: rotate(-12deg); }
.tlq-tomin-hero__flor--2 { width: 46px; height: 46px; top: 65%; left: 12%; color: var(--tdm-jade); }
.tlq-tomin-hero__flor--3 { width: 90px; height: 90px; top: 12%; right: 5%; color: var(--tdm-jade); transform: rotate(18deg); }
.tlq-tomin-hero__flor--4 { width: 50px; height: 50px; bottom: 8%; right: 12%; }

.tlq-tomin-hero__contenido { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.tlq-tomin-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--tdm-jade); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    font-size: .78rem; margin-bottom: 14px;
}
.tlq-tomin-hero__eyebrow svg { width: 18px; height: 18px; }
.tlq-tomin-pagina h1.tlq-tomin-hero__titulo {
    font-size: clamp(2.1rem, 6vw, 3.3rem);
    line-height: 1.1;
    margin: 0 0 14px;
    color: var(--tdm-naranja);
    text-shadow: 0 3px 18px rgba(245, 130, 31, .35);
}
.tlq-tomin-hero__texto { margin: 0; opacity: .92; line-height: 1.65; font-size: 1.05rem; }

/* Borde de papel picado: recorte en semicírculos, como el papel de verdad */
.tlq-tomin-picado {
    height: 30px;
    background: var(--tdm-negro);
    -webkit-mask: radial-gradient(circle at 12px 0, transparent 12px, #000 12.5px) repeat-x;
    mask: radial-gradient(circle at 12px 0, transparent 12px, #000 12.5px) repeat-x;
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
}
.tlq-tomin-picado--fin { transform: rotate(180deg); }

/* ---------- Pasos ---------- */

.tlq-tomin-pasos { background: var(--tdm-crema); padding: 46px 20px 50px; }
.tlq-tomin-pasos__titulo {
    text-align: center; color: var(--tdm-negro); margin: 0 0 34px; font-size: 1.5rem;
}
.tlq-tomin-pasos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 22px;
    max-width: 980px;
    margin: 0 auto;
}
.tlq-tomin-paso {
    background: #fff;
    border-radius: 16px;
    padding: 30px 18px 22px;
    text-align: center;
    position: relative;
    box-shadow: 0 8px 24px rgba(10, 10, 10, .07);
    border-top: 4px solid var(--tdm-jade);
}
.tlq-tomin-paso:nth-child(even) { border-top-color: var(--tdm-naranja); }
.tlq-tomin-paso__num {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--tdm-naranja); color: #fff; font-weight: 800; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(245, 130, 31, .5);
}
.tlq-tomin-paso:nth-child(even) .tlq-tomin-paso__num { background: var(--tdm-jade); box-shadow: 0 2px 8px rgba(0, 168, 107, .5); }
.tlq-tomin-paso__icono {
    width: 58px; height: 58px; margin: 6px auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, rgba(0, 168, 107, .14), rgba(245, 130, 31, .14));
}
.tlq-tomin-paso__icono svg { width: 30px; height: 30px; color: var(--tdm-jade-oscuro); }
.tlq-tomin-paso h3 { margin: 0 0 6px; font-size: 1rem; color: var(--tdm-negro); }
.tlq-tomin-paso p { margin: 0; font-size: .9rem; color: #5a5248; line-height: 1.55; }

/* ---------- Preguntas frecuentes ---------- */

.tlq-tomin-faq { max-width: 740px; margin: 0 auto; padding: 10px 20px 50px; }
.tlq-tomin-faq__item {
    background: #fff;
    border-left: 5px solid var(--tdm-jade);
    border-radius: 4px 12px 12px 4px;
    padding: 18px 22px;
    margin-bottom: 14px;
    box-shadow: 0 3px 12px rgba(10, 10, 10, .05);
}
.tlq-tomin-faq__item:nth-child(even) { border-left-color: var(--tdm-naranja); }
.tlq-tomin-faq__item h2 {
    margin: 0 0 8px; font-size: 1.05rem; color: var(--tdm-negro);
    display: flex; align-items: center; gap: 10px;
}
.tlq-tomin-faq__item h2 svg { width: 22px; height: 22px; color: var(--tdm-naranja); flex-shrink: 0; }
.tlq-tomin-faq__item:nth-child(even) h2 svg { color: var(--tdm-jade); }
.tlq-tomin-faq__item p { margin: 0; color: #4a4339; line-height: 1.65; }
.tlq-tomin-faq__item a { color: var(--tdm-jade-oscuro); font-weight: 700; }

/* ---------- Tienda de tarjetas (negro, como la propia tarjeta Nalt Tomí) ---------- */

.tlq-tomin-tienda { background: var(--tdm-negro); padding: 52px 20px 60px; text-align: center; }
.tlq-tomin-tienda h2 { color: #fff; margin: 0 0 6px; font-size: 1.7rem; }
.tlq-tomin-tienda__sub { color: var(--tdm-jade); margin: 0 0 32px; font-size: .88rem; letter-spacing: .05em; }
.tlq-tomin-tarjetas {
    display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
    max-width: 980px; margin: 0 auto;
}
.tlq-tomin-tarjeta {
    width: 225px;
    border-radius: 18px;
    padding: 26px 20px 22px;
    background: linear-gradient(135deg, var(--tdm-jade), var(--tdm-naranja));
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
    text-align: left;
}
.tlq-tomin-tarjeta__flor {
    position: absolute; top: -18px; right: -18px; width: 90px; height: 90px; opacity: .22;
}
.tlq-tomin-tarjeta__marca {
    font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; opacity: .9;
    position: relative; z-index: 1;
}
.tlq-tomin-tarjeta__nombre { font-weight: 700; margin: 14px 0 2px; position: relative; z-index: 1; }
.tlq-tomin-tarjeta__precio { font-size: 2.1rem; font-weight: 800; margin: 0 0 18px; position: relative; z-index: 1; }
.tlq-tomin-tarjeta__boton {
    display: inline-block; background: #fff; color: var(--tdm-negro); font-weight: 800;
    padding: 10px 22px; border-radius: 9999px; text-decoration: none; font-size: .88rem;
    position: relative; z-index: 1;
}
.tlq-tomin-tarjeta__boton:hover { background: var(--tdm-negro); color: #fff; }
.tlq-tomin-tienda__vacio { color: #cfcfcf; }

@media (max-width: 480px) {
    .tlq-tomin-hero { padding: 48px 16px 40px; }
    .tlq-tomin-pasos, .tlq-tomin-tienda { padding-left: 14px; padding-right: 14px; }
}