/* ============================================================
   SECCIONES — estructura reutilizable
   Este archivo NO conoce la marca: todo sale de los tokens de marca.css.
   Cumple Criterio de Diseño — Reglas (R1–R13).
   ============================================================ */

/* --- base ------------------------------------------------- */

body {
    font-family: var(--t-font-cuerpo);
    color: var(--t-texto);
    background: var(--t-blanco);
    line-height: 1.6;
}

h1, h2, h3, h4,
.t-seccion__titulo {
    font-family: var(--t-font-titulo);
    font-weight: 700;
    line-height: 1.1;
    color: var(--t-primario);
    letter-spacing: .01em;
}

.t-wrap {
    max-width: var(--t-maxw);
    margin-inline: auto;
    padding-inline: 20px;
}

/* Mayúsculas solo acá: kickers y etiquetas (R6) */
.t-kicker {
    font-family: var(--t-font-cuerpo);
    font-weight: 600;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t-acento);
    margin: 0 0 .5rem;
}

.t-seccion__titulo {
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    margin: 0 0 1.75rem;
}

/* --- botones ---------------------------------------------- */

.t-btn {
    display: inline-block;
    font-family: var(--t-font-cuerpo);
    font-weight: 600;
    font-size: 1rem;
    padding: .85rem 1.6rem;
    border-radius: var(--t-radio-pill);
    text-decoration: none;
    border: 2px solid transparent;
    transition: background .2s ease, color .2s ease;  /* R8 */
}
.t-btn--primario { background: var(--t-primario); color: var(--t-blanco); }
.t-btn--primario:hover { background: var(--t-primario-900); color: var(--t-blanco); }
.t-btn--acento   { background: var(--t-acento); color: var(--t-blanco); }
.t-btn--acento:hover { background: var(--t-acento-900); color: var(--t-blanco); }
.t-btn--linea {
    border-color: currentColor;
    color: var(--t-primario);
    background: transparent;
}
.t-btn--linea:hover { background: var(--t-primario); color: var(--t-blanco); }

/* --- hero (azul) ------------------------------------------ */

.t-hero {
    background: var(--t-primario);
    color: var(--t-blanco);
    padding-block: clamp(3rem, 7vw, 5.5rem);
}
.t-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
.t-hero__titulo {
    color: var(--t-blanco);
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);   /* R4 */
    margin: 0 0 1rem;
}
.t-hero__bajada {
    font-size: 1.0625rem;
    color: rgb(255 255 255 / .85);
    max-width: 52ch;
    margin: 0 0 1.75rem;
}
.t-hero .t-kicker { color: var(--t-acento-200); }          /* cobre aclarado: sobre azul, el cobre puro no contrasta */
.t-hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.t-hero__acciones .t-btn--primario { background: var(--t-acento); }
.t-hero__acciones .t-btn--primario:hover { background: var(--t-acento-600); }
.t-hero__acciones .t-btn--linea { color: var(--t-blanco); }
.t-hero__acciones .t-btn--linea:hover { background: var(--t-blanco); color: var(--t-primario); }

.t-hero__datos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 2rem 0 0;
    padding: 0;
    font-size: .9375rem;
    color: rgb(255 255 255 / .8);
}
.t-hero__datos strong { display: block; color: var(--t-blanco); font-weight: 600; }

.t-hero__placeholder {
    aspect-ratio: 4 / 3;
    border: 2px dashed rgb(255 255 255 / .3);
    border-radius: var(--t-radio);
    display: grid;
    place-content: center;
    text-align: center;
    color: rgb(255 255 255 / .6);
    gap: .25rem;
}
.t-hero__placeholder small { font-size: .8125rem; }

/* --- garantías (blanco) ----------------------------------- */

.t-garantias { background: var(--t-blanco); padding-block: clamp(2rem, 4vw, 3rem); }
.t-garantias__grid { display: grid; gap: 1.5rem; }
.t-garantia { border-left: 3px solid var(--t-acento); padding-left: 1rem; }
.t-garantia__titulo { font-size: 1.125rem; margin: 0 0 .35rem; }
.t-garantia__texto  { margin: 0; font-size: .9375rem; color: var(--t-suave); }

/* --- categorías (superficie) ------------------------------ */

.t-categorias { background: var(--t-superficie); padding-block: clamp(3rem, 6vw, 4.5rem); }
.t-categorias__grid { display: grid; gap: 1.25rem; }
.t-categoria {
    display: block;
    background: var(--t-blanco);
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio);
    padding: 1rem;
    text-decoration: none;
    color: var(--t-texto);
    box-shadow: var(--t-sombra-sm);                    /* R7 */
    transition: transform .2s ease, box-shadow .2s ease;
}
.t-categoria:hover { transform: translateY(-2px); box-shadow: var(--t-sombra); }
.t-categoria__media img { border-radius: var(--t-radio-sm); width: 100%; height: auto; }
.t-categoria__vacia {
    display: block; aspect-ratio: 4 / 3;
    background: var(--t-primario-050);
    border-radius: var(--t-radio-sm);
}
.t-categoria__nombre  { display: block; font-family: var(--t-font-titulo); font-size: 1.25rem; color: var(--t-primario); margin-top: .75rem; }
.t-categoria__conteo  { display: block; font-size: .8125rem; color: var(--t-suave); }

/* --- destacados (blanco) ---------------------------------- */

.t-destacados { background: var(--t-blanco); padding-block: clamp(3rem, 6vw, 4.5rem); }

/* --- asesoría / dos públicos (tinte azul) ----------------- */

.t-asesoria { background: var(--t-primario-050); padding-block: clamp(3rem, 6vw, 4.5rem); }
.t-asesoria__grid { display: grid; gap: 1.5rem; }
.t-via {
    background: var(--t-blanco);
    border-radius: var(--t-radio);
    padding: 1.75rem;
    box-shadow: var(--t-sombra-sm);
}
.t-via__titulo { font-size: 1.375rem; margin: 0 0 .75rem; }
.t-via p { margin: 0 0 1rem; color: var(--t-suave); }
.t-via__lista { margin: 0 0 1.5rem; padding-left: 1.1rem; }
.t-via__lista li { margin-bottom: .35rem; }

/* --- FAQ (blanco) ----------------------------------------- */

.t-faq { background: var(--t-blanco); padding-block: clamp(3rem, 6vw, 4.5rem); }
.t-faq__caja { max-width: 780px; }
.t-faq__item {
    border-bottom: 1px solid var(--t-borde);
    padding: 1rem 0;
}
.t-faq__pregunta {
    font-family: var(--t-font-titulo);
    font-size: 1.1875rem;
    color: var(--t-primario);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.t-faq__pregunta::-webkit-details-marker { display: none; }
.t-faq__pregunta::after { content: '+'; color: var(--t-acento); font-size: 1.5rem; line-height: 1; }
.t-faq__item[open] .t-faq__pregunta::after { content: '–'; }
.t-faq__respuesta p { margin: .75rem 0 0; color: var(--t-suave); }

/* --- CTA (azul) ------------------------------------------- */

.t-cta { background: var(--t-primario); color: var(--t-blanco); padding-block: clamp(3rem, 6vw, 4.5rem); }
.t-cta__caja { text-align: center; max-width: 620px; }
.t-cta__titulo { color: var(--t-blanco); font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin: 0 0 .75rem; }
.t-cta__texto  { color: rgb(255 255 255 / .85); margin: 0 0 1.75rem; }
.t-cta__nota   { font-size: .8125rem; color: rgb(255 255 255 / .55); margin: 1rem 0 0; }

/* --- WooCommerce: que no se vea al default ---------------- */
/* R13: la página de producto y el checkout son donde se cierra la venta. */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--t-font-titulo);
    font-size: 1.25rem;
    color: var(--t-primario);
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
    font-family: var(--t-font-titulo);
    font-weight: 700;
    color: var(--t-acento);
}
.woocommerce div.product p.price { font-size: clamp(1.7rem, 3.5vw, 2.2rem); }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt {
    background: var(--t-primario);
    color: var(--t-blanco);
    border-radius: var(--t-radio-pill);
    font-family: var(--t-font-cuerpo);
    font-weight: 600;
    padding: .85rem 1.6rem;
    transition: background .2s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover { background: var(--t-primario-900); color: var(--t-blanco); }

.woocommerce .stock.in-stock { color: var(--t-exito); font-weight: 600; }
.woocommerce .stock.out-of-stock { color: var(--t-error); }

.woocommerce ul.products li.product {
    background: var(--t-blanco);
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio);
    padding: 1rem;
    box-shadow: var(--t-sombra-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-2px); box-shadow: var(--t-sombra); }
.woocommerce ul.products li.product img { border-radius: var(--t-radio-sm); }

/* Checkout: menos ruido, campos más grandes, foco visible */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border: 1px solid var(--t-borde);
    border-radius: var(--t-radio-sm);
    padding: .75rem .9rem;
    font-family: var(--t-font-cuerpo);
    font-size: 1rem;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--t-primario);
    box-shadow: 0 0 0 3px rgb(15 59 92 / .15);
}
.woocommerce-checkout #payment { background: var(--t-superficie); border-radius: var(--t-radio); }

/* --- responsive: tres breakpoints y nada más (R10) -------- */

@media (min-width: 640px) {
    .t-garantias__grid   { grid-template-columns: repeat(2, 1fr); }
    .t-categorias__grid  { grid-template-columns: repeat(2, 1fr); }
    .t-asesoria__grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .t-hero__grid        { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; }
    .t-garantias__grid   { grid-template-columns: repeat(4, 1fr); }
    .t-categorias__grid  { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .t-hero__acciones .t-btn { flex: 1 1 100%; text-align: center; }
    .t-hero__datos { gap: 1rem 1.25rem; }
}

/* ============================================================
   HEADER, FOOTER Y PÁGINAS DE TIENDA
   ============================================================ */

.t-skip {
    position: absolute; left: -9999px;
    background: var(--t-primario); color: var(--t-blanco);
    padding: .75rem 1rem; border-radius: var(--t-radio-sm); z-index: 100;
}
.t-skip:focus { left: 1rem; top: 1rem; }

/* --- barra de avisos --- */
.t-avisos {
    background: var(--t-primario-900);
    color: rgb(255 255 255 / .85);
    font-size: .8125rem;
}
.t-avisos__fila { display: flex; gap: .6rem; justify-content: center; padding-block: .5rem; flex-wrap: wrap; }
.t-avisos__sep { opacity: .5; }

/* --- header --- */
.t-header { background: var(--t-primario); color: var(--t-blanco); }
.t-header__fila {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; padding-block: .9rem;
}
.t-logo { text-decoration: none; display: block; line-height: 1.1; }
.t-logo__texto {
    display: block; font-family: var(--t-font-titulo); font-weight: 700;
    font-size: 1.6rem; color: var(--t-blanco); letter-spacing: .01em;
}
.t-logo__bajada {
    display: block; font-size: .75rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--t-acento-200);
}
.t-logo img { max-height: 48px; width: auto; }

.t-nav { display: none; }
.t-nav__lista { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.t-nav__lista a {
    color: rgb(255 255 255 / .9); text-decoration: none; font-weight: 600;
    font-size: .9375rem; transition: color .2s ease;
}
.t-nav__lista a:hover { color: var(--t-acento-200); }

.t-header__acciones { display: flex; align-items: center; gap: .75rem; }
.t-carrito {
    color: var(--t-blanco); text-decoration: none; font-weight: 600; font-size: .9375rem;
    display: inline-flex; align-items: center; gap: .5rem;
    border: 2px solid rgb(255 255 255 / .35); border-radius: var(--t-radio-pill);
    padding: .5rem 1rem; transition: background .2s ease, color .2s ease;
}
.t-carrito:hover { background: var(--t-blanco); color: var(--t-primario); }
.t-carrito__n {
    background: var(--t-acento); color: var(--t-blanco);
    border-radius: var(--t-radio-pill); min-width: 1.5rem; text-align: center;
    font-size: .8125rem; padding: 0 .35rem;
}
.t-carrito__n--cero { background: rgb(255 255 255 / .2); }

.t-menu-btn {
    background: transparent; color: var(--t-blanco);
    border: 2px solid rgb(255 255 255 / .35); border-radius: var(--t-radio-pill);
    padding: .5rem 1rem; font-family: var(--t-font-cuerpo); font-weight: 600;
    font-size: .9375rem; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.t-menu-btn:hover { background: var(--t-blanco); color: var(--t-primario); }

.t-nav-movil { background: var(--t-primario-900); padding-block: .5rem 1rem; }
.t-nav-movil__lista { list-style: none; margin: 0; padding: 0; }
.t-nav-movil__lista a {
    display: block; padding: .8rem 0; color: var(--t-blanco);
    text-decoration: none; font-weight: 600;
    border-bottom: 1px solid rgb(255 255 255 / .12);
}

/* --- footer --- */
.t-footer { background: var(--t-primario); color: rgb(255 255 255 / .8); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.t-footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
.t-footer__logo { font-family: var(--t-font-titulo); font-weight: 700; font-size: 1.5rem; color: var(--t-blanco); }
.t-footer__desc { font-size: .9375rem; margin: .5rem 0 1rem; max-width: 34ch; }
.t-footer__legal { font-size: .8125rem; color: rgb(255 255 255 / .6); }
.t-footer__titulo { color: var(--t-blanco); font-size: 1rem; margin: 0 0 .75rem; }
.t-footer__col ul { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.t-footer__col li { margin-bottom: .5rem; }
.t-footer__col a { color: rgb(255 255 255 / .8); text-decoration: none; transition: color .2s ease; }
.t-footer__col a:hover { color: var(--t-acento-200); }
.t-pendiente { color: rgb(255 255 255 / .45); font-style: italic; }

.t-footer__base { border-top: 1px solid rgb(255 255 255 / .15); margin-top: 2.5rem; }
.t-footer__base-fila {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
    padding-block: 1.25rem; font-size: .8125rem; color: rgb(255 255 255 / .6);
}
.t-footer__base-fila a { color: var(--t-acento-200); text-decoration: none; }

/* --- botón flotante de WhatsApp --- */
.t-whatsapp {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--t-exito); color: var(--t-blanco);
    border-radius: var(--t-radio-pill); padding: .85rem 1.4rem;
    font-weight: 600; text-decoration: none;
    box-shadow: var(--t-sombra); z-index: 90;
    transition: background .2s ease;
}
.t-whatsapp:hover { background: var(--t-exito-900); color: var(--t-blanco); }

/* --- páginas de tienda --- */
.t-woo { background: var(--t-blanco); }
.t-woo__inner { padding-block: clamp(2rem, 5vw, 3.5rem); }
.t-catalogo__intro { margin-bottom: 2rem; max-width: 60ch; }
.t-catalogo__bajada { color: var(--t-suave); margin: 0; }

.t-vacio {
    background: var(--t-superficie); border-radius: var(--t-radio);
    padding: clamp(2rem, 5vw, 3rem); text-align: center;
}
.t-vacio__titulo { font-size: 1.375rem; margin: 0 0 .5rem; }
.t-vacio p { color: var(--t-suave); margin: 0 0 1.5rem; }

.t-confianza {
    list-style: none; margin: 1.5rem 0 0; padding: 1rem 1.25rem;
    background: var(--t-primario-050); border-radius: var(--t-radio);
    font-size: .9375rem;
}
.t-confianza li { margin-bottom: .4rem; }
.t-confianza li:last-child { margin-bottom: 0; }
.t-confianza strong { color: var(--t-primario); }

/* --- responsive --- */
@media (min-width: 640px) {
    .t-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .t-nav { display: block; }
    .t-menu-btn, .t-nav-movil { display: none; }
    .t-header { position: sticky; top: 0; z-index: 80; }
    .t-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ============================================================
   MEJORAS VISUALES — iconos, etiquetas, comparativa
   ============================================================ */

/* --- hero con textura de agua --- */
.t-hero {
    background:
        radial-gradient(900px 400px at 85% -10%, rgb(180 95 40 / .22), transparent 60%),
        radial-gradient(700px 500px at 5% 110%, rgb(255 255 255 / .07), transparent 55%),
        var(--t-primario);
}

/* --- iconos --- */
.t-icono { width: 30px; height: 30px; color: var(--t-acento); display: block; margin-bottom: .6rem; }
.t-garantia { border-left: none; padding-left: 0; }
.t-garantias {
    background: var(--t-blanco);
    border-bottom: 1px solid var(--t-borde);
}

/* --- etiquetas --- */
.t-badges { position: absolute; top: .75rem; left: .75rem; z-index: 2; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.t-badge {
    display: inline-block; font-size: .75rem; font-weight: 600;
    padding: .25rem .6rem; border-radius: var(--t-radio-pill);
    letter-spacing: .02em;
}
.t-badge--destacado { background: var(--t-acento); color: var(--t-blanco); }
.t-badge--pocas     { background: var(--t-primario); color: var(--t-blanco); }
.t-badge--stock     { background: rgb(31 122 77 / .12); color: var(--t-exito); }
.t-badge--agotado   { background: rgb(179 38 30 / .1);  color: var(--t-error); }
.woocommerce ul.products li.product { position: relative; }

/* --- cuota mensual --- */
.t-cuota {
    font-size: .9375rem; color: var(--t-suave);
    background: var(--t-acento-050); border-radius: var(--t-radio-sm);
    padding: .6rem .9rem; display: inline-block;
}
.t-cuota strong { color: var(--t-acento); }

/* --- tabla comparativa --- */
.t-comparativa { background: var(--t-superficie); padding-block: clamp(3rem, 6vw, 4.5rem); }
.t-tabla__scroll { overflow-x: auto; border-radius: var(--t-radio); box-shadow: var(--t-sombra-sm); }
.t-tabla {
    width: 100%; border-collapse: collapse; background: var(--t-blanco);
    font-size: .9375rem; min-width: 640px;
}
.t-tabla thead th {
    background: var(--t-primario); color: var(--t-blanco);
    font-family: var(--t-font-cuerpo); font-weight: 600;
    text-align: left; padding: .9rem 1rem; white-space: nowrap;
}
.t-tabla td { padding: .9rem 1rem; border-bottom: 1px solid var(--t-borde); vertical-align: middle; }
.t-tabla tbody tr:last-child td { border-bottom: none; }
.t-tabla tbody tr:hover { background: var(--t-primario-050); }
.t-tabla a { color: var(--t-primario); font-weight: 600; text-decoration: none; }
.t-tabla a:hover { text-decoration: underline; }
.t-tabla__precio { font-family: var(--t-font-titulo); font-weight: 700; font-size: 1.25rem; color: var(--t-acento); white-space: nowrap; }
.t-btn--sm { padding: .45rem 1rem; font-size: .875rem; }

/* --- tarjetas de producto con más presencia --- */
.woocommerce ul.products li.product img { background: var(--t-primario-050); }
.woocommerce ul.products li.product .price { font-size: 1.375rem; }
.woocommerce ul.products li.product a.button { width: 100%; text-align: center; margin-top: .5rem; }

@media (min-width: 1024px) {
    .t-garantias__grid { grid-template-columns: repeat(4, 1fr); }
}