/**
 * Landing de Regalos Corporativos.
 * Todo cuelga de .pp-corp para no afectar al resto del sitio.
 * Tokens base: mu-plugins/primeros-pueblos-atomic-design.css
 */

.pp-corp {
    --pp-corp-h2: clamp(1.75rem, 2.3vw, 2.5rem);
    --pp-corp-h3: clamp(1.25rem, 1.6vw, 1.6rem);
    --pp-corp-body: clamp(1rem, 1.4vw, 1.25rem);
    --pp-corp-boton: clamp(0.95rem, 1.1vw, 1.125rem);
    --pp-corp-seccion: clamp(2rem, 3.5vw, 3.5rem);
    --pp-corp-negro: #000;
    --pp-corp-gris-campo: rgba(150, 150, 150, 0.2);
    --pp-corp-gris-texto: #969696;

    background: var(--pp-color-surface, #fff);
    color: var(--pp-corp-negro);
}

.pp-corp-contenedor {
    margin-inline: auto;
    max-width: 1200px;
    padding-inline: 20px;
    width: 100%;
}

.pp-corp section {
    padding-block: var(--pp-corp-seccion);
}

/* El carrusel y el configurador ya traen su propio aire interno: se recorta el
   espacio entre secciones para que no quede una franja blanca vacía. */
.pp-corp .pp-corp-destacados {
    padding-block-end: calc(var(--pp-corp-seccion) / 2);
}

.pp-corp .pp-corp-alternativas {
    padding-block-start: calc(var(--pp-corp-seccion) / 2);
}

/* Tipografía --------------------------------------------------------------- */

.pp-corp .pp-corp-titulo {
    color: var(--pp-corp-negro);
    font-size: var(--pp-corp-h2);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 var(--pp-step-5, 24px);
}

.pp-corp .pp-corp-titulo--centrado,
.pp-corp .pp-corp-texto--centrado {
    text-align: center;
}

.pp-corp .pp-corp-subtitulo {
    font-size: var(--pp-corp-h3);
    font-weight: 700;
    margin: 0 0 var(--pp-step-5, 24px);
}

/* Cada categoría encadenada del listado de alternativas. */
.pp-corp .pp-corp-categoria + .pp-corp-categoria {
    margin-block-start: var(--pp-step-7, 48px);
}

.pp-corp .pp-corp-subtitulo__enlace {
    color: inherit;
    text-decoration: none;
}

.pp-corp .pp-corp-subtitulo__enlace:hover,
.pp-corp .pp-corp-subtitulo__enlace:focus-visible {
    text-decoration: underline;
}

.pp-corp .pp-corp-texto,
.pp-corp .pp-corp-texto p {
    font-size: var(--pp-corp-body);
    line-height: 1.5;
    margin: 0 0 var(--pp-step-4, 16px);
}

.pp-corp .pp-corp-texto p:last-child {
    margin-bottom: 0;
}

/* Botones ------------------------------------------------------------------ */

/* display:flex gana a [hidden] si no se declara: el botón "ver más" debe poder ocultarse. */
.pp-corp-acciones[hidden] {
    display: none;
}

.pp-corp-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pp-step-4, 16px);
    justify-content: center;
    margin: var(--pp-step-7, 48px) 0 0;
}

.pp-corp .pp-corp-boton {
    background: var(--pp-corp-negro);
    border: 1px solid var(--pp-corp-negro);
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: var(--pp-corp-boton);
    font-weight: 600;
    line-height: 1.2;
    padding: var(--pp-step-5, 24px) var(--pp-step-7, 48px);
    text-align: center;
    text-decoration: none;
    transition: background var(--pp-transition, 180ms ease), color var(--pp-transition, 180ms ease);
}

.pp-corp .pp-corp-boton:hover,
.pp-corp .pp-corp-boton:focus-visible {
    background: #fff;
    color: var(--pp-corp-negro);
}

.pp-corp .pp-corp-boton[disabled] {
    cursor: progress;
    opacity: 0.6;
}

/* Intro -------------------------------------------------------------------- */

.pp-corp-intro__inner {
    margin-inline: auto;
    max-width: 900px;
    text-align: center;
}

/* Valores ------------------------------------------------------------------ */

.pp-corp-valores__inner {
    margin-inline: auto;
    max-width: 1000px;
    text-align: center;
}

.pp-corp-valores__lista {
    display: grid;
    gap: var(--pp-step-7, 48px);
    grid-template-columns: repeat(3, 1fr);
    margin: var(--pp-step-8, 64px) 0 0;
    padding: 0;
}

.pp-corp-valor {
    text-align: center;
}

.pp-corp-valor__icono {
    color: var(--pp-corp-negro);
    display: block;
    font-size: 72px;
    line-height: 1;
    margin: 0 auto var(--pp-step-5, 24px);
}

.pp-corp-valor__titulo {
    font-size: var(--pp-corp-h3);
    font-weight: 700;
    margin: 0 0 var(--pp-step-3, 12px);
}

.pp-corp-valor__texto {
    font-size: var(--pp-corp-body);
    line-height: 1.5;
    margin: 0;
}

/* Configurador ------------------------------------------------------------- */

.pp-corp-quiz {
    position: relative;
}

.pp-corp-quiz::before {
    background: var(--pp-corp-negro);
    content: "";
    inset: 50% 0 auto;
    position: absolute;
    height: 369px;
    transform: translateY(-50%);
    z-index: 0;
}

.pp-corp-quiz .pp-corp-contenedor {
    position: relative;
    z-index: 1;
}

.pp-corp-quiz__card {
    background: #fff;
    border-radius: 51px;
    box-shadow: 0 4px 4.8px rgba(0, 0, 0, 0.13);
    margin-inline: auto;
    max-width: 900px;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 4vw, 4rem);
    text-align: center;
}

.pp-corp-quiz__campos {
    display: grid;
    gap: var(--pp-step-4, 16px);
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--pp-step-7, 48px);
    text-align: start;
}

.pp-corp-campo {
    margin: 0;
}

.pp-corp-campo:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - (var(--pp-step-4, 16px) / 2));
}

.pp-corp .pp-corp-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--pp-corp-gris-campo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='17' viewBox='0 0 21 17'%3E%3Cpath d='M10.5 17 0 0h21z' fill='%23000'/%3E%3C/svg%3E");
    background-position: right 28px center;
    background-repeat: no-repeat;
    background-size: 13px 10px;
    border: 0;
    border-radius: 40px;
    color: var(--pp-corp-negro);
    font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
    line-height: 1.3;
    min-height: 72px;
    padding: var(--pp-step-4, 16px) 60px var(--pp-step-4, 16px) 28px;
    width: 100%;
}

.pp-corp .pp-corp-select:focus-visible {
    outline: 2px solid var(--pp-corp-negro);
    outline-offset: 2px;
}

.pp-corp .pp-corp-select option[value=""] {
    color: var(--pp-corp-gris-texto);
}

.pp-corp-quiz__estado {
    font-size: 0.95rem;
    margin: var(--pp-step-4, 16px) 0 0;
}

/* Grillas de producto ------------------------------------------------------ */

.pp-corp .pp-corp-grid ul.products {
    display: grid;
    gap: var(--pp-step-6, 32px) var(--pp-step-5, 24px);
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pp-corp .pp-corp-grid ul.products::before,
.pp-corp .pp-corp-grid ul.products::after {
    content: none;
}

.pp-corp :is(.pp-corp-grid ul.products, .pp-corp-carrusel__lista) li.product {
    clear: none;
    float: none;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

/* El ancho de cada slide lo pone Swiper por JS; aquí solo se anula el
   width: fit-content que el tema le da a .carrusel__container .swiper-wrapper,
   que descuadra ese cálculo. */
.pp-corp .pp-corp-carrusel .swiper-wrapper {
    margin: 0;
    width: 100%;
}

.pp-corp .pp-corp-carrusel__lista {
    list-style: none;
    padding: 0;
}

.pp-corp :is(.pp-corp-grid ul.products, .pp-corp-carrusel__lista) li.product img {
    display: block;
    height: auto;
    margin: 0 0 var(--pp-step-4, 16px);
    width: 100%;
}

.pp-corp :is(.pp-corp-grid ul.products, .pp-corp-carrusel__lista) li.product .price {
    color: var(--pp-corp-negro);
    display: block;
    font-weight: 700;
    margin-bottom: var(--pp-step-3, 12px);
}

.pp-corp :is(.pp-corp-grid ul.products, .pp-corp-carrusel__lista) li.product .button,
.pp-corp :is(.pp-corp-grid ul.products, .pp-corp-carrusel__lista) li.product .add-request-quote-button {
    background: var(--pp-corp-negro);
    border: 1px solid var(--pp-corp-negro);
    border-radius: 0;
    color: #fff;
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    padding: var(--pp-step-3, 12px) var(--pp-step-4, 16px);
    text-align: center;
    text-decoration: none;
    width: 100%;
}

.pp-corp :is(.pp-corp-grid ul.products, .pp-corp-carrusel__lista) li.product .button:hover,
.pp-corp :is(.pp-corp-grid ul.products, .pp-corp-carrusel__lista) li.product .add-request-quote-button:hover {
    background: #fff;
    color: var(--pp-corp-negro);
}

.pp-corp-aviso {
    background: var(--pp-corp-gris-campo);
    border-radius: 40px;
    font-size: 0.95rem;
    margin: 0 auto var(--pp-step-5, 24px);
    max-width: 720px;
    padding: var(--pp-step-3, 12px) var(--pp-step-5, 24px);
    text-align: center;
}

.pp-corp-vacio {
    font-size: var(--pp-corp-body);
    margin: 0;
    text-align: center;
}

.pp-corp-alternativas__resultados {
    margin-top: var(--pp-step-6, 32px);
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 991px) {
    .pp-corp .pp-corp-grid ul.products {
        grid-template-columns: repeat(2, 1fr);
    }

    .pp-corp-valores__lista {
        gap: var(--pp-step-6, 32px);
        grid-template-columns: 1fr;
    }

    .pp-corp-quiz::before {
        height: 100%;
        inset: 0;
        transform: none;
    }
}

@media (max-width: 767px) {
    .pp-corp-quiz__campos {
        grid-template-columns: 1fr;
    }

    .pp-corp-campo:last-child:nth-child(odd) {
        max-width: none;
    }

    .pp-corp-quiz__card {
        border-radius: 28px;
    }
}

@media (max-width: 575px) {
    .pp-corp .pp-corp-grid ul.products {
        grid-template-columns: 1fr;
    }

    .pp-corp-acciones .pp-corp-boton {
        width: 100%;
    }
}