/* ==========================================================================
   Cannis — sitio institucional · páginas de producto (PD-106)
   --------------------------------------------------------------------------
   La hoja propia de web/institucional/producto.blade.php. Se carga sólo ahí
   (@push('styles')), después de institucional.css y calma.css, y usa sus
   tokens: el negro, Geist, el vidrio (--w-vidrio*) y el menta como acento.
   Los planes reusan las clases de la sección de Cannis Pro (calma.css).
   Prefijo `w-prod-`.
   ========================================================================== */

/* ── Qué es: título a la izquierda, panel de vidrio a la derecha ── */
.w-prod-portada__grilla {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: end;
}
.w-prod-portada__marca {
    display: flex;
    align-items: center;
    gap: var(--w-s2);
    margin-bottom: var(--w-s3);
}
.w-prod-portada__marca .w-marca { --w-marca-alto: 120px; }
.w-prod-portada__ico {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--w-vidrio-borde);
    border-radius: 14px;
    background: var(--w-vidrio);
    box-shadow: var(--w-vidrio-sombra);
    color: var(--w-menta);
}
.w-prod-portada__ico .w-ico { width: 1.4rem; height: 1.4rem; }
.w-prod-portada__nombre { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; }
.w-prod-portada__titulo {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: 560;
    line-height: 1;
    letter-spacing: -0.055em;
    max-width: 14ch;
}

.w-prod-panel {
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid var(--w-vidrio-borde);
    border-radius: var(--w-radio);
    background: var(--w-vidrio);
    -webkit-backdrop-filter: var(--w-vidrio-filtro);
    backdrop-filter: var(--w-vidrio-filtro);
    box-shadow: var(--w-vidrio-sombra);
}
.w-prod-panel__rotulo {
    margin: 0 0 0.35rem;
    color: var(--w-menta);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.w-prod-panel__audiencia { margin: 0 0 var(--w-s3); color: var(--w-text); font-size: 1.02rem; }
.w-prod-panel__lista { display: grid; gap: 0.6rem; }
.w-prod-panel__lista li { position: relative; padding-left: 1.1rem; color: var(--w-text-soft); font-size: 0.97rem; line-height: 1.5; }
.w-prod-panel__lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.45rem;
    height: 1px;
    background: var(--w-menta);
}

/* ── Lo que incluye: grilla de filetes sobre un solo vidrio ── */
.w-prod-funciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--w-vidrio-borde);
    border-radius: var(--w-radio);
    background: var(--w-vidrio);
    -webkit-backdrop-filter: var(--w-vidrio-filtro);
    backdrop-filter: var(--w-vidrio-filtro);
    box-shadow: var(--w-vidrio-sombra);
    overflow: hidden;
}
.w-prod-funcion {
    padding: clamp(1.4rem, 3vw, 2rem);
    border-right: 1px solid var(--w-vidrio-borde);
    border-bottom: 1px solid var(--w-vidrio-borde);
    transition: background-color 0.25s ease;
}
.w-prod-funcion:hover { background: rgba(255, 255, 255, 0.03); }
.w-prod-funcion:nth-child(3n) { border-right: 0; }
/* La última fila no lleva filete abajo (el borde del contenedor ya cierra). Con 8 funciones la última fila tiene dos: el
   tercero de la anterior queda sin filete abajo, pero debajo no hay nada. */
.w-prod-funcion:nth-last-child(-n + 3) { border-bottom: 0; }
.w-prod-funcion__ico {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: var(--w-s3);
    border: 1px solid var(--w-vidrio-borde);
    border-radius: 12px;
    color: var(--w-menta);
}
.w-prod-funcion__ico .w-ico { width: 1.15rem; height: 1.15rem; }
.w-prod-funcion__titulo { margin-bottom: 0.4rem; font-size: 1.08rem; letter-spacing: -0.02em; }
.w-prod-funcion__texto { margin: 0; color: var(--w-text-soft); font-size: 0.95rem; line-height: 1.55; }

.w-prod-tambien { max-width: 64ch; margin: var(--w-s4) 0 0; color: var(--w-muted); font-size: 0.95rem; }
.w-prod-tambien--centro { margin-inline: auto; text-align: center; }

/* ── Cómo se entra ── */
.w-prod-cierre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-s4);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border: 1px solid var(--w-vidrio-borde);
    border-radius: var(--w-radio);
    background:
        var(--w-vidrio);
    -webkit-backdrop-filter: var(--w-vidrio-filtro);
    backdrop-filter: var(--w-vidrio-filtro);
    box-shadow: var(--w-vidrio-sombra);
}
.w-prod-cierre .w-titulo { margin-bottom: 0.4rem; }
.w-prod-cierre .w-bajada { margin: 0; max-width: 52ch; }

/* ── Los demás productos ── */
.w-prod-otros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-s3); }
.w-prod-otro {
    position: relative;
    display: grid;
    gap: 0.3rem;
    padding: var(--w-s4) calc(var(--w-s4) + 1.5rem) var(--w-s4) var(--w-s4);
    border: 1px solid var(--w-vidrio-borde);
    border-radius: var(--w-radio-sm);
    background: var(--w-vidrio);
    -webkit-backdrop-filter: var(--w-vidrio-filtro);
    backdrop-filter: var(--w-vidrio-filtro);
    box-shadow: var(--w-vidrio-sombra);
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.w-prod-otro:hover { border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.w-prod-otro__nombre { font-weight: 600; letter-spacing: -0.02em; }
.w-prod-otro__titulo { color: var(--w-text-soft); font-size: 0.92rem; }
.w-prod-otro .w-ico { position: absolute; right: var(--w-s3); top: 50%; width: 1rem; height: 1rem; color: var(--w-muted); transform: translateY(-50%); transition: color 0.2s ease, transform 0.2s ease; }
.w-prod-otro:hover .w-ico { color: var(--w-menta); transform: translate(3px, -50%); }
.w-prod-otro:focus-visible { outline: 2px solid var(--w-menta); outline-offset: 3px; }

@media (max-width: 960px) {
    .w-prod-portada__grilla { grid-template-columns: 1fr; align-items: start; }
    .w-prod-funciones { grid-template-columns: 1fr 1fr; }
    .w-prod-funcion:nth-child(3n) { border-right: 1px solid var(--w-vidrio-borde); }
    .w-prod-funcion:nth-child(2n) { border-right: 0; }
    .w-prod-funcion:nth-last-child(-n + 3) { border-bottom: 1px solid var(--w-vidrio-borde); }
    .w-prod-funcion:nth-last-child(-n + 2):nth-child(odd), .w-prod-funcion:last-child { border-bottom: 0; }
    .w-prod-otros { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .w-prod-funciones, .w-prod-otros { grid-template-columns: 1fr; }
    .w-prod-funcion { border-right: 0 !important; }
    .w-prod-portada__marca .w-marca { --w-marca-alto: 96px; }
}

/* ── Las páginas de rol (PD-112, web/institucional/rol) ── */
.w-prod-otros--dos { grid-template-columns: 1fr 1fr; }
.w-prod-rol-producto {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--w-radio);
    background: var(--w-surface);
}
.w-prod-rol-producto__marca { display: flex; align-items: center; min-height: 3rem; margin-bottom: var(--w-s3); }
.w-prod-rol-producto__marca .w-marca { --w-marca-alto: 72px; }
.w-prod-rol-producto__rol { margin: 0 0 0.5rem; color: var(--w-menta); font-weight: 600; letter-spacing: -0.01em; }
.w-prod-funciones--pasos { grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.w-prod-funciones--pasos .w-prod-funcion:nth-child(3n) { border-right: 1px solid var(--w-vidrio-borde); }
.w-prod-funciones--pasos .w-prod-funcion:last-child { border-right: 0; }
.w-prod-funciones--pasos .w-prod-funcion { border-bottom: 0; }
.w-prod-rol-paso__n { display: block; margin-bottom: var(--w-s3); color: var(--w-menta); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
    .w-prod-funciones--pasos { grid-template-columns: 1fr 1fr; }
    .w-prod-funciones--pasos .w-prod-funcion:nth-child(2n) { border-right: 0; }
    .w-prod-funciones--pasos .w-prod-funcion:nth-child(-n + 2) { border-bottom: 1px solid var(--w-vidrio-borde); }
}
@media (max-width: 640px) {
    .w-prod-otros--dos, .w-prod-funciones--pasos { grid-template-columns: 1fr; }
    .w-prod-funciones--pasos .w-prod-funcion { border-bottom: 1px solid var(--w-vidrio-borde); }
    .w-prod-funciones--pasos .w-prod-funcion:last-child { border-bottom: 0; }
}

/* ── /profesionales: los roles, con el mismo peso (PD-112) ── */
.w-prod-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-s3); }
.w-prod-rol {
    display: flex;
    flex-direction: column;
    gap: var(--w-s2);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--w-radio);
    background: var(--w-surface);
    transition: background-color 0.25s ease;
}
.w-prod-rol:hover { background: var(--w-surface-2); }
.w-prod-rol:focus-visible { outline: 2px solid var(--w-menta); outline-offset: 3px; }
.w-prod-rol__nombre { margin: var(--w-s2) 0 0; font-size: 1.35rem; letter-spacing: -0.03em; }
.w-prod-rol__texto { margin: 0; color: var(--w-text-soft); font-size: 0.97rem; line-height: 1.55; }
.w-prod-rol__productos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: auto 0 0; padding: var(--w-s2) 0 0; list-style: none; }
.w-prod-rol__productos li { padding: 0.3rem 0.7rem; border: 1px solid var(--w-border-fuerte); border-radius: 999px; color: var(--w-text-soft); font-size: 0.8rem; }
.w-prod-rol__ir { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--w-s2); color: var(--w-menta); font-weight: 600; font-size: 0.95rem; }
.w-prod-rol__ir .w-ico { width: 1rem; height: 1rem; }
@media (max-width: 960px) { .w-prod-roles { grid-template-columns: 1fr; } }