/*
Theme Name: Clean Is Good
Theme URI: http://clean-is-good.local
Description: Tema hijo de Twenty Twenty-Five con la portada personalizada para Clean Is Good (El Sheriff de la Limpieza).
Author: Clean Is Good
Version: 2.2.0
Template: twentytwentyfive
Text Domain: clean-is-good
*/

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: #c5c8a6;
    color: #2b1a10;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.cig-home {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.cig-stage {
    --canvas-w: 1366;
    --canvas-h: 4335;
    position: relative;
    width: 100%;
    aspect-ratio: var(--canvas-w) / var(--canvas-h);
    overflow: hidden;
}

.cig-layer {
    position: absolute;
    left:   calc(var(--x) / var(--canvas-w) * 100%);
    top:    calc(var(--y) / var(--canvas-h) * 100%);
    width:  calc(var(--w) / var(--canvas-w) * 100%);
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.cig-layer.is-link { pointer-events: auto; }

/* bg_cafe extendido (y 2700, h 760 en lugar de los 490 nativos del PNG)
   para alojar la cinta encimada arriba y dejar espacio para titulo + logos. */
.cig-layer.cig-bg-cafe { height: calc(760 / var(--canvas-h) * 100%); }

/* <picture> envuelve a los <img> para servir WebP con fallback PNG. El
   wrapper no debe generar caja propia para no interferir con el flujo
   ni con el aspect-ratio del padre (.cig-hero, .cig-prod, .cig-stage). */
.cig-stage picture,
.cig-hero picture,
.cig-prod picture { display: contents; }

/* === Hero compuesto (bg + esfera giratoria + overlay) ===
   La esfera se extrae del PSB a 1854x1125; su centro queda al 48.894% / 65.911%
   del PNG. La caja se enmascara con hero_bg para clipear a la forma redondeada. */
.cig-hero {
    position: absolute;
    left:   calc(var(--x) / var(--canvas-w) * 100%);
    top:    calc(var(--y) / var(--canvas-h) * 100%);
    width:  calc(var(--w) / var(--canvas-w) * 100%);
    aspect-ratio: 1264 / 613;
    overflow: hidden;
    isolation: isolate;
    -webkit-mask-image: url('assets/hero_bg.webp');
            mask-image: url('assets/hero_bg.webp');
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

.cig-hero img {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.cig-hero-bg,
.cig-hero-overlay {
    inset: 0;
    width: 100%;
    height: 100%;
}

.cig-hero-sun {
    left:   -21.281%;
    top:    -41.762%;
    width:  146.677%;
    height: 183.524%;
    transform-origin: 48.894% 65.911%;
    mix-blend-mode: screen;
    animation: cig-sun-spin 40s linear infinite;
    will-change: transform;
}

@keyframes cig-sun-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cig-hero-sun { animation: none; }
}

/* === Productos (3 capas: mancha + anillo de texto giratorio + botella) ===
   Solo el anillo gira al hacer hover; mancha y botella permanecen estáticas. */
.cig-prod {
    position: absolute;
    left:   calc(var(--x) / var(--canvas-w) * 100%);
    top:    calc(var(--y) / var(--canvas-h) * 100%);
    width:  calc(var(--w) / var(--canvas-w) * 100%);
    aspect-ratio: 1;
    pointer-events: auto;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.cig-anchor {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    top: calc(var(--y) / var(--canvas-h) * 100%);
    pointer-events: none;
    overflow: hidden;
}

.cig-prod img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.cig-prod-ring {
    transform-origin: 50% 50%;
    /* Gira siempre lento; al hacer hover/focus la velocidad sube.
       Usamos propiedades individuales (no el shorthand) para que cambiar
       la duracion no recree la animacion: el navegador conserva el
       progreso (% transcurrido) al ajustar duration. */
    animation-name: cig-ring-spin;
    animation-duration: var(--ring-speed, 24s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.cig-prod:hover .cig-prod-ring,
.cig-prod:focus-within .cig-prod-ring {
    --ring-speed: 10s;
}

@keyframes cig-ring-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cig-prod-ring { animation: none; }
}

/* === Cintas (marquees infinitos) ===
   Tile generado del PSD a UN periodo de texto exacto (× a ×) y de-skewed,
   asi tilea sin costura. La inclinacion original se restituye con CSS
   transform: skewY al wrapper. */

.cig-cinta {
    position: absolute;
    left: 0;
    width: 100%;
    top:    calc(var(--y) / var(--canvas-h) * 100%);
    height: calc(var(--h) / var(--canvas-h) * 100%);
    overflow: hidden;
    pointer-events: none;
}

.cig-cinta-skew {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.cig-cinta-track {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    width: max-content;
    align-items: stretch;
    animation: cig-cinta-scroll 26s linear infinite;
    will-change: transform;
}

.cig-cinta--reverse .cig-cinta-track {
    animation-duration: 22s;
    animation-direction: reverse;
}

.cig-cinta-track img {
    display: block;
    height: 100%;
    width: auto;
    flex: 0 0 auto;
}

/* The track holds 24 tiles (--n:24). Animation translates by 1 tile = -100/24%. */
@keyframes cig-cinta-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-100% / var(--n, 24)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cig-cinta-track { animation: none; }
}

/* Footer amarillo: redes sociales (clickables) + copyright */
.cig-social {
    position: absolute;
    left:   calc(var(--x) / var(--canvas-w) * 100%);
    top:    calc(var(--y) / var(--canvas-h) * 100%);
    width:  calc(var(--w) / var(--canvas-w) * 100%);
    aspect-ratio: 1;
    display: block;
    transition: transform 0.2s ease-out;
}

.cig-social img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.cig-social:hover { transform: scale(1.08); }

.cig-copy {
    position: absolute;
    left:   calc(171  / var(--canvas-w) * 100%);
    top:    calc(4290 / var(--canvas-h) * 100%);
    width:  calc(1029 / var(--canvas-w) * 100%);
    margin: 0;
    padding: 0;
    text-align: center;
    color: #6b3a06;
    font-size: clamp(8px, 0.95vw, 14px);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.cig-copy sup { font-size: 0.7em; }

/* ¿Quiénes somos? — descripción a 2 columnas en HTML vivo
   Tipografía exacta del PSD: Barlow Condensed Medium 24pt, color #5C2E19. */
.cig-somos {
    position: absolute;
    left:   calc(var(--x) / var(--canvas-w) * 100%);
    top:    calc(var(--y) / var(--canvas-h) * 100%);
    width:  calc(var(--w) / var(--canvas-w) * 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(25 / var(--canvas-w) * 100%);
    color: #5C2E19;
    font-family: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
    /* 24 PSD-px ≈ 24/1366 * 100 = 1.757vw cuando el stage llena el viewport.
       En mobile (< 600px) el slot se expande +350 PSD via .cig-after-somos
       para acomodar un piso de 11px legible sin desbordes. */
    font-size: max(11px, 1.757vw);
    line-height: 1.2;
}

.cig-somos p {
    margin: 0 0 1em 0;
    text-align: justify;
}

.cig-somos p:last-child { margin-bottom: 0; }

.cig-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* === Pagina Productos =====================================================
   Reconstruida desde paginas (1).psd (1366 x 6451). Mismo metodo que la
   portada: cada capa absoluta posicionada por bbox del PSD escalada al
   viewport. */
.cig-body--productos {
    background: #ffffff;
}

.cig-stage--productos {
    --canvas-w: 1366;
    /* Último card (anticongelante) termina ~6971 + 278 (alto del bg_amarillo
       footer) = 7249. Redondeado a 7260 para un pelín de holgura. */
    --canvas-h: 7260;
}

/* El logo de cabecera en /productos es un <a> link a la portada. Hereda
   posicionamiento de .cig-layer; la altura sale del <img> hijo. */
.cig-stage--productos .cig-home-link {
    pointer-events: auto;
    cursor: pointer;
    display: block;
    text-decoration: none;
}
.cig-stage--productos .cig-home-link img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* === Card de producto =====================================================
   Cada card es un contenedor absoluto sobre el stage, dimensionado por su
   bbox del PSD (var --x/--y/--w/--h). Adentro:
     - .cig-card-frame: imagen del frame (banner + bg + dividers + botella)
       sin texto editorial. Llena 100% de la card.
     - .cig-tx: spans de texto vivo posicionados por su bbox local del PSB
       (var --tx/--ty/--tw/--th). El font-size se escala con el ancho del
       stage usando container queries (cqi).
*/
.cig-stage--productos { container-type: inline-size; }

.cig-stage--productos .cig-card {
    position: absolute;
    left:   calc(var(--x) / var(--canvas-w) * 100%);
    top:    calc(var(--y) / var(--canvas-h) * 100%);
    width:  calc(var(--w) / var(--canvas-w) * 100%);
    height: calc(var(--h) / var(--canvas-h) * 100%);
    container-type: inline-size;
    /* En el PSD el bote tiene clipping mask sobre la "Rectángulo 9"
       redondeada; psd_tools no lo aplica, asi que lo emulamos clipeando
       el card al mismo radio (~30 PSB-px). 30/1200 = 2.5cqi. */
    border-radius: 2.5cqi;
    overflow: hidden;
}

.cig-card-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.cig-tx {
    position: absolute;
    left:   calc(var(--tx) / var(--iw) * 100%);
    top:    calc(var(--ty) / var(--ih) * 100%);
    width:  calc(var(--tw) / var(--iw) * 100%);
    /* font-size y line-height en unidades del stage: 1 px del PSB == 1 cqi
       relativo a la card (cuya inline-size es var(--w)/var(--canvas-w) del
       stage). Por eso usamos cqi del card para mantener tamano proporcional
       a la card y --iw como referencia: fs_px = fs * card_w / iw. */
    font-size:   calc(var(--fs) / var(--iw) * 100cqi);
    line-height: calc(var(--lh) / var(--iw) * 100cqi);
    font-family: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.005em;
    white-space: normal;
    overflow: visible;
    /* La altura no se fija — el bbox solo tomaba el ink, no el em. Asi el
       texto no se recorta si la metrica de Barlow Condensed difiere
       ligeramente de la fuente original. */
}

.cig-tx[style*="text-align:right"]  { transform: translateX(0); }
.cig-tx[style*="text-align:center"] { /* nada */ }

/* === Mobile shift =========================================================
   En viewports angostos el slot del bloque "¿Quiénes somos?" no alcanza para
   acomodar el texto a 11px. Empujamos cinta + productos + footer +700 PSD
   y colapsamos las dos columnas a una sola — al ser un viewport angosto se
   lee mejor como una sola columna larga que como dos chuecas. */
@media (max-width: 600px) {
    .cig-stage {
        --canvas-h: 5035;
        /* El shift +700 deja huecos de cobertura entre las tiras de bg_beige
           y bg_cafe; pintamos el stage con el color beige real del PNG para
           que esos huecos queden uniformes en lugar de mostrar el verde del
           body (#c5c8a6). */
        background-color: #fffde5;
    }
    /* /productos no usa el shift +700 (no tiene bloque "¿Quiénes somos?"); su
       canvas-h tampoco se reduce en mobile — el layout vertical del catalogo
       no cambia. */
    .cig-stage--productos {
        --canvas-h: 7260;
        background-color: #ffffff;
    }
    .cig-after-somos {
        top: calc((var(--y) + 700) / var(--canvas-h) * 100%);
    }
    /* cig-copy no tiene --y inline (lo trae el CSS), asi que su override va aparte */
    .cig-copy.cig-after-somos {
        top: calc((4290 + 700) / var(--canvas-h) * 100%);
    }
    .cig-somos {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .cig-somos p {
        margin-bottom: 0.6em;
    }
}

/* === Reproductor de musica de fondo (boton flotante) ====================== */
#cig-bgm { display: none; }

.cig-bgm-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #5b2d19;
    color: #ffe27a;
    cursor: pointer;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.cig-bgm-toggle:hover,
.cig-bgm-toggle:focus-visible {
    background: #7a3c22;
    transform: scale(1.06);
    outline: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.cig-bgm-toggle:focus-visible {
    box-shadow: 0 0 0 3px #ffe27a, 0 6px 18px rgba(0, 0, 0, 0.3);
}
.cig-bgm-icon { display: inline-flex; }
.cig-bgm-toggle svg { display: block; }

/* Pulso suave cuando esta sonando para que se note que esta activo. */
.cig-bgm-toggle.is-playing .cig-bgm-dot {
    animation: cig-bgm-pulse 1.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
.cig-bgm-toggle.is-playing .cig-bgm-dot:nth-of-type(2) {
    animation-delay: 0.7s;
}
@keyframes cig-bgm-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(0.7); opacity: 0.7; }
}

/* Cuando NO esta sonando: icono mas apagado para sugerir "muted". */
.cig-bgm-toggle:not(.is-playing) {
    background: rgba(91, 45, 25, 0.85);
    color: rgba(255, 226, 122, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .cig-bgm-toggle, .cig-bgm-toggle .cig-bgm-dot { transition: none; animation: none; }
}