/* ================================================================ CÓMO COMPRAR — estilos intercambiables ================================================================ La página se veía siempre igual: un hero enorme y una pila de cajas. Acá viven seis presentaciones distintas del mismo contenido, elegibles desde Configuración → Cómo comprar (`como_comprar_estilo`), independientes del tema de la tienda. Se aplican con la clase `cc-estilo-` en el , así no hay que tocar los 18 templates por layout. Todas comparten el mismo markup: .cc-hero > h1 + p .cc-steps > .cc-step > (.cc-step-icon | .cc-step-img) + .cc-step-body .cc-faq-sec, .cc-cta-sec, .cc-cta ================================================================ */ /* ── Base común: el hero deja de comerse la pantalla ─────────────── */ body[class*="cc-estilo-"] .cc-hero { /* Antes ocupaba una pantalla entera con el título cortado. */ padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; min-height: 0; } body[class*="cc-estilo-"] .cc-hero h1 { font-size: clamp(1.8rem, 4.2vw, 2.8rem); line-height: 1.12; text-wrap: balance; margin: 0 auto 0.6rem; max-width: 20ch; } body[class*="cc-estilo-"] .cc-hero p { font-size: 1rem; line-height: 1.65; max-width: 56ch; margin: 0 auto; opacity: 0.92; } body[class*="cc-estilo-"] .cc-steps { max-width: var(--ancho-contenido, 1200px); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--padding-lateral, 1.25rem); /* Algunos temas le ponen a esta sección un gris fijo (#e5e7eb) que no tiene nada que ver con el fondo de la tienda: quedaba un rectángulo gris en medio de la página. El fondo lo pone la página. */ background: transparent; } /* Los temas le dan alto o ancho fijo a .cc-step para su propia grilla: acá el alto lo tiene que dar el contenido de cada paso. */ body[class*="cc-estilo-"] .cc-step { height: auto; min-height: 0; } body[class*="cc-estilo-"] .cc-step-title { font-family: var(--font-display, inherit); margin: 0 0 0.35rem; } body[class*="cc-estilo-"] .cc-step-text { color: var(--color-texto-pagina-suave, #57534e); line-height: 1.65; margin: 0; /* Dos temas (moda2, modaco) ocultan este texto con opacity:0 y lo revelan al pasar el mouse, con el fallback en `hover: none` —que no matchea en una ventana de escritorio angosta—. En una página que explica cómo comprar, la explicación no puede estar escondida detrás de un hover. */ opacity: 1; transform: none; } /* Numeración automática: sirve a todos los estilos y evita depender de que el comercio haya puesto 1️⃣ 2️⃣ 3️⃣ a mano en el emoji. */ body[class*="cc-estilo-"] .cc-steps { counter-reset: paso; } body[class*="cc-estilo-"] .cc-step { counter-increment: paso; } /* ── 1. Tarjetas ───────────────────────────────────────────────── Grilla de fichas con el número en grande. Ordenado y neutro. */ body.cc-estilo-tarjetas .cc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } body.cc-estilo-tarjetas .cc-step { display: block; background: var(--color-secundario, #fff); border: 1px solid var(--color-borde, #e7e5e4); border-radius: 14px; padding: 1.4rem; box-shadow: none; transition: transform .2s, box-shadow .2s; } body.cc-estilo-tarjetas .cc-step:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20, 25, 30, .09); } /* El número va en el flujo, no absoluto: con position:absolute había que reservarle sitio con padding y cualquier diferencia de tamaño lo hacía pisar el título. */ body.cc-estilo-tarjetas .cc-step::before { content: counter(paso); font-family: var(--font-display, inherit); font-size: 0.95rem; font-weight: 700; color: var(--color-texto-sobre-primario, #fff); background: var(--color-primario, #4a7c59); width: 1.9rem; height: 1.9rem; border-radius: 999px; display: grid; place-items: center; margin-bottom: 0.85rem; } body.cc-estilo-tarjetas .cc-step-icon { display: none; } body.cc-estilo-tarjetas .cc-step-img { width: 100%; height: 150px; border-radius: 10px; margin-bottom: 0.9rem; } /* ── 2. Timeline ───────────────────────────────────────────────── Los pasos como hitos de una línea: se lee como un recorrido. */ body.cc-estilo-timeline .cc-steps { /* display explícito: si no, hereda la grilla que el tema define para .cc-steps y los pasos quedan en columnas en vez de en una línea. */ display: block; max-width: 760px; position: relative; } body.cc-estilo-timeline .cc-step { display: block; position: relative; padding: 0 0 2.2rem 3.2rem; background: none; border: none; box-shadow: none; } body.cc-estilo-timeline .cc-step::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--color-primario, #4a7c59); color: var(--color-texto-sobre-primario, #fff); font-family: var(--font-display, inherit); font-weight: 700; display: grid; place-items: center; z-index: 1; } /* La línea baja desde cada hito hasta el siguiente; en el último no se dibuja. */ body.cc-estilo-timeline .cc-step::after { content: ""; position: absolute; left: 1.05rem; top: 2.4rem; bottom: 0.2rem; width: 2px; background: var(--color-borde, #e7e5e4); } body.cc-estilo-timeline .cc-step:last-child::after { display: none; } body.cc-estilo-timeline .cc-step:last-child { padding-bottom: 0; } body.cc-estilo-timeline .cc-step-icon { display: none; } body.cc-estilo-timeline .cc-step-img { width: 100%; max-width: 320px; height: 160px; border-radius: 10px; margin-top: 0.8rem; } /* ── 3. Números ────────────────────────────────────────────────── Editorial: el número enorme al costado, sin cajas. */ body.cc-estilo-numeros .cc-steps { max-width: 820px; display: flex; flex-direction: column; gap: 2.6rem; } body.cc-estilo-numeros .cc-step { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start; background: none; border: none; padding: 0; box-shadow: none; } body.cc-estilo-numeros .cc-step::before { content: counter(paso, decimal-leading-zero); font-family: var(--font-display, inherit); font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 700; line-height: 0.85; color: var(--color-primario, #4a7c59); opacity: 0.28; } body.cc-estilo-numeros .cc-step-title { font-size: 1.25rem; } body.cc-estilo-numeros .cc-step-icon { display: none; } body.cc-estilo-numeros .cc-step-img { width: 100%; max-width: 260px; height: 140px; border-radius: 10px; margin-top: 0.9rem; } /* ── 4. Zigzag ─────────────────────────────────────────────────── Alterna lado a lado. El que mejor aprovecha las fotos. */ body.cc-estilo-zigzag .cc-steps { max-width: 900px; display: flex; flex-direction: column; gap: 2.2rem; } body.cc-estilo-zigzag .cc-step { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: center; background: none; border: none; padding: 0; box-shadow: none; } body.cc-estilo-zigzag .cc-step:nth-child(even) .cc-step-body { order: -1; } body.cc-estilo-zigzag .cc-step-icon { font-size: 2.6rem; width: auto; height: auto; background: none; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 12px; background: var(--color-fondo-alt, rgba(0, 0, 0, .04)); } body.cc-estilo-zigzag .cc-step-img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 12px; } body.cc-estilo-zigzag .cc-step-title { font-size: 1.3rem; } body.cc-estilo-zigzag .cc-step-body::before { content: "Paso " counter(paso); display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primario-legible, var(--color-primario, #4a7c59)); margin-bottom: 0.4rem; font-weight: 700; } @media (max-width: 700px) { body.cc-estilo-zigzag .cc-step { grid-template-columns: 1fr; gap: 0.9rem; } body.cc-estilo-zigzag .cc-step:nth-child(even) .cc-step-body { order: 0; } } /* ── 5. Minimal ────────────────────────────────────────────────── Sin cajas ni colores: tipografía y una línea de separación. */ body.cc-estilo-minimal .cc-steps { max-width: 680px; display: flex; flex-direction: column; gap: 0; } body.cc-estilo-minimal .cc-step { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: baseline; background: none; border: none; border-top: 1px solid var(--color-borde, #e7e5e4); border-radius: 0; padding: 1.6rem 0; box-shadow: none; } body.cc-estilo-minimal .cc-step:first-child { border-top: none; padding-top: 0; } body.cc-estilo-minimal .cc-step::before { content: counter(paso) "."; font-family: var(--font-display, inherit); font-size: 1rem; font-weight: 700; color: var(--color-primario-legible, var(--color-primario, #4a7c59)); } body.cc-estilo-minimal .cc-step-icon, body.cc-estilo-minimal .cc-step-img { display: none; } body.cc-estilo-minimal .cc-step-title { font-size: 1.08rem; } /* ── 6. Fichas ─────────────────────────────────────────────────── Bandas anchas con el ícono grande a la izquierda. Denso y claro. */ body.cc-estilo-fichas .cc-steps { max-width: 820px; display: flex; flex-direction: column; gap: 0.85rem; } body.cc-estilo-fichas .cc-step { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; background: var(--color-secundario, #fff); border: 1px solid var(--color-borde, #e7e5e4); border-left: 4px solid var(--color-primario, #4a7c59); border-radius: 10px; padding: 1.1rem 1.3rem; box-shadow: none; } body.cc-estilo-fichas .cc-step-icon { font-size: 1.9rem; width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--color-fondo-alt, rgba(0, 0, 0, .04)); border-radius: 10px; } body.cc-estilo-fichas .cc-step-img { width: 3.4rem; height: 3.4rem; border-radius: 10px; } body.cc-estilo-fichas .cc-step-title { font-size: 1.05rem; } /* ── Cierre común: FAQ y llamada final ──────────────────────────── */ body[class*="cc-estilo-"] .cc-faq-sec { max-width: 720px; padding-bottom: 3rem; } body[class*="cc-estilo-"] .cc-faq-item { border-bottom: 1px solid var(--color-borde, #e7e5e4); padding: 1rem 0; } body[class*="cc-estilo-"] .cc-cta-sec { text-align: center; padding: 0 1.5rem 1.5rem; } body[class*="cc-estilo-"] .cc-cta { padding-bottom: 4rem; } body[class*="cc-estilo-"] .cc-cta a { background: var(--color-primario, #4a7c59); color: var(--color-texto-sobre-primario, #fff); } @media (prefers-reduced-motion: reduce) { body[class*="cc-estilo-"] .cc-step { transition: none; } body[class*="cc-estilo-"] .cc-step:hover { transform: none; } }