/* ============================================
   IMPLATEC - E-Commerce Dental
   Complete Stylesheet
   ============================================ */

/* El atributo `hidden` del HTML se aplica con una regla del navegador
   (display:none) que cualquier `display` del autor pisa. Sin esto,
   `el.hidden = true` no oculta nada en cuanto el elemento tiene su
   propio display: grid, flex o inline-flex. */
[hidden] { display: none !important; }

/* === Variables === */
:root {
    /* Paleta de Implatec, tomada del logo: el azul del wordmark y el
       degradado del hexágono. El naranja anterior (#E95420) era el color
       de Graphy, que es una de las dos marcas y no la empresa: con él, la
       tienda parecía de Graphy y chocaba con Geistlich, que es azul. */
    --primary: #1B5FD9;
    /* Azul marino de los titulares y de la barra superior. */
    --navy: #0E2A63;
    --navy-dark: #071B45;
    /* Realce cian del emblema del logo. Se usa con cuentagotas. */
    --cyan: #00A0F0;
    --primary-dark: #12409B;
    --primary-light: #3E86E8;
    --secondary: #0E2A63;
    --accent: #00B894;

    /* El gris del wordmark, para lo secundario de marca. */
    --brand-grey: #8F9296;

    /* Colores de cada marca. Los mismos que devuelve `brands.color` en la
       API, para que una etiqueta pintada en el servidor y otra en el
       navegador no salgan de distinto color. */
    /* Los colores de cada distribuidora NO se declaran aquí: viven en la
       columna `brands.color` y llegan al navegador con la marca. Escribirlos
       en el CSS obligaba a tocar este archivo para dar de alta una nueva. */
    --bg-light: #F5F8FD;
    --bg-white: #FFFFFF;
    --text-dark: #0E2A63;
    --text-medium: #6E7A8C;
    --text-light: #A8B4C4;
    --border: #DFE6E9;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.15);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.2);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

/* === Reset === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    color: var(--text-dark);
    background: var(--bg-white);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul { list-style: none; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; border: none; font-family: var(--font); }
input, select, textarea {
    font-family: var(--font);
    font-size: 0.95rem;
    outline: none;
}

/* 1440 y no 1200: en un monitor de 1920 el tope anterior dejaba 360 px
   muertos a cada lado, y la página se leía como una columna estrecha
   flotando en el centro. Con 1440 el contenido ocupa el ancho de la
   maqueta del cliente.
   El margen lateral es fluido —de 20 px en móvil a 48 px en escritorio—
   para que en pantallas grandes el texto no llegue pegado al borde, que
   es el defecto contrario. */
.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 48px);
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
    border: 2px solid transparent;
    cursor: pointer;
}

.btn--primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.btn--primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(27, 95, 217, 0.3);
}

.btn--outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn--outline:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.btn--google {
    background: white;
    color: var(--text-dark);
    border: 2px solid var(--border);
}
.btn--google:hover {
    background: var(--bg-light);
    border-color: var(--text-light);
}

.btn--full { width: 100%; justify-content: center; }
.btn--lg { padding: 16px 36px; font-size: 1.05rem; }
.btn--sm { padding: 8px 20px; font-size: 0.85rem; }
.btn--danger { background: #E74C3C; color: white; border-color: #E74C3C; }
.btn--danger:hover { background: #C0392B; }

/* === Header === */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 16px 0;
    transition: var(--transition);
}

.header.scrolled,
.header--solid {
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
    padding: 10px 0;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.4rem;
}

.logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.3rem;
}

.logo-icon--lg {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
}

.logo-text { color: var(--text-dark); }

.logo-img {
    height: 38px;
    width: auto;
    object-fit: contain;
}

.logo-img--auth {
    height: 52px;
    max-width: 190px;
}

/* Sin filtro. Antes se invertia el logo a blanco solido, y eso borraba el
   hexagono del emblema: quedaba un circulo blanco sin dentro. El pie usa
   una version propia con el texto en blanco y el emblema en su azul. */
.logo-img--footer {
    height: 42px;
}

.nav__menu {
    display: flex;
    gap: 8px;
}

.nav__link {
    padding: 8px 20px;
    border-radius: var(--radius-xl);
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition);
    color: var(--text-medium);
}
.nav__link:hover,
.nav__link.active {
    color: var(--primary);
    background: rgba(27, 95, 217, 0.08);
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav__cart,
.nav__user {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: 1.1rem;
    transition: var(--transition);
}
.nav__cart:hover,
.nav__user:hover {
    background: var(--primary);
    color: white;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav__toggle {
    display: none;
    background: none;
    font-size: 1.4rem;
    color: var(--text-dark);
}

/* === Hero Section === */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #FFF5F0 0%, #FFF 40%, #F0FFF4 100%);
    overflow: hidden;
    padding-top: 80px;
}

.hero__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.2;
    animation: float 6s ease-in-out infinite;
}
.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 60%; left: 20%; animation-delay: 1s; width: 8px; height: 8px; }
.particle:nth-child(3) { top: 30%; left: 70%; animation-delay: 2s; }
.particle:nth-child(4) { top: 70%; left: 80%; animation-delay: 3s; width: 10px; height: 10px; }
.particle:nth-child(5) { top: 50%; left: 50%; animation-delay: 4s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.hero__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero__badge {
    display: inline-block;
    padding: 6px 20px;
    background: rgba(27, 95, 217, 0.1);
    color: var(--primary);
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.hero__title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__description {
    font-size: 1.1rem;
    color: var(--text-medium);
    margin-bottom: 32px;
    line-height: 1.8;
}

.hero__buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
}

.hero__stats {
    display: flex;
    gap: 40px;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat__number {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
}

.stat__label {
    font-size: 0.8rem;
    color: var(--text-medium);
}

/* Hero Image Area */
.hero__image {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero__image-wrapper {
    position: relative;
    width: 420px;
    height: 420px;
}

.hero__image-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: 50%;
    opacity: 0.1;
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.hero__3d-model {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__icon-main {
    font-size: 8rem;
    color: var(--primary);
    opacity: 0.15;
    animation: float 4s ease-in-out infinite;
}

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.85rem;
    font-weight: 600;
    animation: float 5s ease-in-out infinite;
}

.floating-card i {
    color: var(--primary);
    font-size: 1.1rem;
}

.floating-card--1 { top: 20%; left: -10%; animation-delay: 0s; }
.floating-card--2 { top: 60%; right: -5%; animation-delay: 1.5s; }
.floating-card--3 { bottom: 10%; left: 5%; animation-delay: 3s; }

.hero__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.hero__wave svg { display: block; width: 100%; }

/* === Section Headers === */
.section__header {
    text-align: center;
    margin-bottom: 60px;
}

.section__tag {
    display: inline-block;
    padding: 6px 20px;
    background: rgba(27, 95, 217, 0.1);
    color: var(--primary);
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.section__title {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.section__subtitle {
    color: var(--text-medium);
    font-size: 1.05rem;
}

/* === Categories === */
.categories {
    padding: 100px 0;
    background: var(--bg-light);
}

.categories__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.category-card {
    background: white;
    padding: 36px 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition);
    border: 2px solid transparent;
}
.category-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.category-card__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(27, 95, 217,0.1), rgba(62, 134, 232,0.1));
    border-radius: var(--radius-md);
    font-size: 1.8rem;
    color: var(--primary);
}

.category-card h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.category-card p {
    color: var(--text-medium);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.category-card__link {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
}

/* === Products Grid === */
.featured {
    padding: 100px 0;
}

.products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.product-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid var(--border);
    position: relative;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.product-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 2;
}
.product-card__badge--new {
    background: var(--accent);
    color: white;
}
.product-card__badge--sale {
    background: #E74C3C;
    color: white;
}
.product-card__badge--hot {
    background: var(--primary);
    color: white;
}

.product-card__image {
    position: relative;
    height: 220px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-card__image i {
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.3;
}

.product-card__image--has-img {
    background: white;
}

.product-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.product-card__actions {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: var(--transition);
}
.product-card:hover .product-card__actions {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.product-card__actions button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    color: var(--text-dark);
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: none;
}
.product-card__actions button:hover {
    background: var(--primary);
    color: white;
}

.product-card__info {
    padding: 20px;
}

.product-card__category {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-card__name {
    font-size: 1rem;
    font-weight: 600;
    margin: 6px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}
.product-card__rating i { color: #F1C40F; font-size: 0.8rem; }
.product-card__rating span { color: var(--text-light); font-size: 0.8rem; }

.product-card__price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-card__price-current {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
}

.product-card__price-old {
    font-size: 0.85rem;
    color: var(--text-light);
    text-decoration: line-through;
}

.product-card__add-btn {
    width: 100%;
    padding: 12px;
    background: var(--bg-light);
    border: none;
    font-weight: 600;
    color: var(--primary);
    font-size: 0.9rem;
    transition: var(--transition);
    cursor: pointer;
}
.product-card__add-btn:hover {
    background: var(--primary);
    color: white;
}

.featured__cta {
    text-align: center;
    margin-top: 48px;
}

/* === About === */
.about {
    padding: 100px 0;
    background: var(--bg-light);
}

.about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about__image-card {
    position: relative;
    height: 450px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about__image-card--photo {
    background: white;
    overflow: hidden;
}

.about__photo-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    --reveal: 0;
}

.about__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about__photo--ghost {
    position: absolute;
    inset: 0;
    filter: grayscale(100%) brightness(0.85) contrast(0.9);
    opacity: 0.55;
}

.about__photo--reveal {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 calc((1 - var(--reveal)) * 100%) 0);
    transition: clip-path 0.15s linear;
    will-change: clip-path;
}

.about__photo-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--reveal) * 100%);
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--primary) 20%,
        #fff 50%,
        var(--primary) 80%,
        transparent 100%);
    box-shadow: 0 0 18px 2px var(--primary), 0 0 40px 4px rgba(0, 119, 204, 0.4);
    transform: translateY(-50%);
    opacity: calc(1 - var(--reveal) * 0.6);
    pointer-events: none;
    transition: top 0.15s linear, opacity 0.3s linear;
}

.about__photo-scan::before {
    content: '';
    position: absolute;
    inset: -20px 0 0 0;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 119, 204, 0.18) 100%);
    pointer-events: none;
}

.about__photo-progress {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.about__photo-progress::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #00c896);
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 8px var(--accent, #00c896);
    animation: pulseDot 1.6s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.about__icon-large {
    font-size: 6rem;
    color: white;
    opacity: 0.3;
}

.about__badge-card {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: white;
    padding: 24px 32px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.about__years {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.about__text {
    color: var(--text-medium);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 32px;
}

.about__features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about__feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.about__feature > i {
    color: var(--accent);
    font-size: 1.3rem;
    margin-top: 3px;
}

.about__feature h4 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.about__feature p {
    color: var(--text-medium);
    font-size: 0.9rem;
}

/* === Benefits === */
.benefits {
    padding: 60px 0;
    background: var(--secondary);
}

.benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.benefit {
    text-align: center;
    color: white;
}

.benefit i {
    font-size: 2rem;
    color: var(--primary-light);
    margin-bottom: 12px;
}

.benefit h4 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.benefit p {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
}

/* === Testimonials === */
.testimonials {
    padding: 100px 0;
}

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: white;
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition: var(--transition);
}
.testimonial-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.testimonial-card__stars {
    margin-bottom: 16px;
}
.testimonial-card__stars i {
    color: #F1C40F;
    font-size: 0.9rem;
}

.testimonial-card p {
    color: var(--text-medium);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-card__avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
}

.testimonial-card__author strong {
    display: block;
    font-size: 0.9rem;
}

.testimonial-card__author span {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* === Contact === */
.contact {
    padding: 100px 0;
    background: var(--bg-light);
}

.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact__details {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact__item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-medium);
}

.contact__item i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 95, 217, 0.1);
    color: var(--primary);
    border-radius: 50%;
}

.contact__social {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.contact__social a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    color: white;
    border-radius: 50%;
    font-size: 1rem;
    transition: var(--transition);
}
.contact__social a:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

.contact__form {
    background: white;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* === Forms === */
.form__group {
    margin-bottom: 20px;
}

.form__group label {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: var(--text-dark);
}

.form__group input,
.form__group select,
.form__group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    transition: var(--transition);
    background: white;
}

.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(27, 95, 217, 0.1);
}

.form__group textarea { resize: vertical; }

.input-icon {
    position: relative;
}

.input-icon i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 0.9rem;
}

.input-icon input {
    padding-left: 42px;
}

.form__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.form__row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form__link {
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 500;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-medium);
    margin-bottom: 16px;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.filter-select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
}

/* === Footer === */
.footer {
    background: var(--secondary);
    color: white;
    padding: 60px 0 0;
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

.footer__brand p {
    color: rgba(255,255,255,0.6);
    margin-top: 16px;
    font-size: 0.9rem;
    line-height: 1.7;
}

.footer__brand .logo-text {
    color: white;
}

.footer__links h4 {
    font-size: 1rem;
    margin-bottom: 16px;
    color: white;
}

.footer__links a {
    display: block;
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    padding: 4px 0;
    transition: var(--transition);
}
.footer__links a:hover {
    color: var(--primary-light);
    transform: translateX(4px);
}

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

.footer__payments {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer__payments i {
    font-size: 1.5rem;
    opacity: 0.7;
}

/* === Page Header === */
.page-header {
    background: linear-gradient(135deg, var(--secondary), #1a1a2e);
    color: white;
    padding: 140px 0 60px;
    text-align: center;
}

.page-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.page-header p {
    color: rgba(255,255,255,0.7);
    font-size: 1.1rem;
}

/* === Products Page === */
.products-page {
    padding: 60px 0;
}

.products-page__layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
}

.filters {
    background: white;
    border-radius: var(--radius-md);
    padding: 24px;
    border: 1px solid var(--border);
    position: sticky;
    top: 100px;
    height: fit-content;
}

.filters__header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bg-light);
}

.filters__header h3 {
    font-size: 1.1rem;
}

.filters__group {
    margin-bottom: 24px;
}

.filters__group h4 {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-medium);
}

.filter-option input[type="radio"] {
    accent-color: var(--primary);
}

.products-page__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.products-page__toolbar span {
    color: var(--text-medium);
    font-size: 0.9rem;
}

.search-box {
    position: relative;
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

.search-box input {
    padding: 10px 16px 10px 40px;
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    width: 280px;
    font-size: 0.9rem;
    transition: var(--transition);
}

.search-box input:focus {
    border-color: var(--primary);
    width: 320px;
}

.no-results {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-medium);
}

.no-results i {
    font-size: 3rem;
    color: var(--text-light);
    margin-bottom: 16px;
}

/* === Cart Page === */
.cart-page {
    padding: 60px 0;
    min-height: 50vh;
}

.cart-empty {
    text-align: center;
    padding: 80px 20px;
}

.cart-empty i {
    font-size: 4rem;
    color: var(--text-light);
    margin-bottom: 20px;
}

.cart-empty h2 {
    margin-bottom: 8px;
}

.cart-empty p {
    color: var(--text-medium);
    margin-bottom: 24px;
}

.cart-content__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: 16px;
    transition: var(--transition);
}

.cart-item:hover {
    box-shadow: var(--shadow-sm);
}

.cart-item__image {
    width: 100px;
    height: 100px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item__image i {
    font-size: 2.5rem;
    color: var(--primary);
    opacity: 0.3;
}

.cart-item__name {
    font-weight: 600;
    margin-bottom: 4px;
}

.cart-item__category {
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
}

.cart-item__price {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.1rem;
}

.cart-item__controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-light);
    border: none;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
}
.qty-btn:hover { background: var(--primary); color: white; }

.cart-item__qty {
    font-weight: 600;
    font-size: 1rem;
    min-width: 30px;
    text-align: center;
}

.cart-item__remove {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 8px;
    transition: var(--transition);
}
.cart-item__remove:hover { color: #E74C3C; }

.cart-summary {
    background: white;
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    position: sticky;
    top: 100px;
}

.cart-summary h3 {
    font-size: 1.2rem;
    margin-bottom: 24px;
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: var(--text-medium);
}

.cart-summary__total {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 8px;
}

.cart-summary__divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
}

.cart-summary .btn {
    margin-top: 12px;
}

/* === Auth Page === */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 60px;
    background: linear-gradient(135deg, #FFF5F0 0%, #FFF 50%, #F0FFF4 100%);
}

.auth-card {
    background: white;
    padding: 48px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 460px;
}

.auth-card--register {
    max-width: 560px;
}

.auth-card__header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-card__logo {
    margin-bottom: 16px;
}

.auth-card__header h1 {
    font-size: 1.6rem;
    margin-bottom: 4px;
}

.auth-card__header p {
    color: var(--text-medium);
    font-size: 0.95rem;
}

.auth-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.auth-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    background: white;
    padding: 0 16px;
    position: relative;
    color: var(--text-light);
    font-size: 0.85rem;
}

.auth-card__footer {
    text-align: center;
    margin-top: 24px;
    font-size: 0.9rem;
    color: var(--text-medium);
}

.auth-card__footer a {
    color: var(--primary);
    font-weight: 600;
}

/* === Checkout Page === */
.checkout-page {
    padding: 100px 0 60px;
    min-height: 100vh;
    background: var(--bg-light);
}

.checkout-steps {
    display: flex;
    gap: 8px;
}

.step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-xl);
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: 500;
}

.step.active {
    color: var(--primary);
    background: rgba(27, 95, 217, 0.1);
}

.step.completed {
    color: var(--accent);
}

.step__number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    font-weight: 700;
    font-size: 0.8rem;
}

.step.active .step__number {
    background: var(--primary);
    color: white;
}

.step.completed .step__number {
    background: var(--accent);
    color: white;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.checkout-step {
    background: white;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.checkout-step h2 {
    font-size: 1.4rem;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkout-step h2 i {
    color: var(--primary);
}

.checkout-form .form__group {
    margin-bottom: 16px;
}

.checkout-summary {
    background: white;
    padding: 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 100px;
}

.checkout-summary h3 {
    margin-bottom: 20px;
}

.checkout-summary__items {
    max-height: 300px;
    overflow-y: auto;
}

.checkout-summary__item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.checkout-summary__item-img {
    width: 50px;
    height: 50px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-summary__item-img i {
    color: var(--primary);
    opacity: 0.4;
}

.checkout-summary__item-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.checkout-summary__item-qty {
    font-size: 0.75rem;
    color: var(--text-light);
}

.checkout-summary__item-price {
    margin-left: auto;
    font-weight: 600;
    font-size: 0.9rem;
}

.secure-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px;
    background: rgba(0, 184, 148, 0.1);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
}

/* === Payment Methods === */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.payment-method {
    cursor: pointer;
}

.payment-method input { display: none; }

.payment-method__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.payment-method input:checked + .payment-method__card {
    border-color: var(--primary);
    background: rgba(27, 95, 217, 0.03);
}

.payment-method__card .fa-check-circle {
    color: var(--border);
    font-size: 1.2rem;
    margin-left: auto;
    transition: var(--transition);
}

.payment-method input:checked + .payment-method__card .fa-check-circle {
    color: var(--primary);
}

.payment-method__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    font-size: 1.3rem;
    color: var(--primary);
}

.payment-method__icon--yape {
    background: #742284;
}

.yape-logo {
    color: white;
    font-weight: 800;
    font-size: 1.5rem;
}

.payment-method__info h4 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.payment-method__info p {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Yape Payment */
.yape-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 24px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.yape-qr {
    text-align: center;
}

.qr-placeholder {
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border);
}

.qr-placeholder i {
    font-size: 4rem;
    color: #742284;
    margin-bottom: 8px;
}

.qr-placeholder p {
    font-size: 0.85rem;
    color: var(--text-light);
}

.yape-number {
    font-size: 0.95rem;
    color: var(--text-medium);
}

.yape-instructions h4 {
    margin-bottom: 12px;
}

.yape-instructions ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.yape-instructions li {
    padding: 4px 0;
    font-size: 0.9rem;
    color: var(--text-medium);
    list-style: decimal;
}

/* Card Form */
.card-form {
    padding: 24px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.card-brands {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

.card-brands i {
    font-size: 2rem;
    color: var(--text-light);
}

.checkout-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
}

/* Order Success */
.order-success {
    text-align: center;
    padding: 40px;
}

.success-icon {
    font-size: 5rem;
    color: var(--accent);
    margin-bottom: 20px;
}

.success-icon i { animation: successPulse 1s ease-in-out; }

@keyframes successPulse {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.order-number {
    display: inline-block;
    padding: 16px 32px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin: 20px 0;
}

.order-number span {
    display: block;
    font-size: 0.85rem;
    color: var(--text-light);
}

.order-number strong {
    font-size: 1.4rem;
    color: var(--primary);
}

.success-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
}

/* === Modal === */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}

.modal__content {
    position: relative;
    background: white;
    padding: 40px;
    border-radius: var(--radius-lg);
    max-width: 460px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalIn 0.3s ease;
}

.modal__content--lg {
    max-width: 700px;
}

@keyframes modalIn {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-light);
    border: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.modal__close:hover { background: #E74C3C; color: white; }

.modal__footer {
    text-align: center;
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--text-medium);
}

.modal__footer a {
    color: var(--primary);
    font-weight: 600;
}

/* Product Detail in Modal */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.product-detail__image {
    height: 300px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail__image i {
    font-size: 5rem;
    color: var(--primary);
    opacity: 0.2;
}

.product-detail__image--has-img {
    background: white;
}

.product-detail__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.product-detail__info h2 {
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.product-detail__category {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.product-detail__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin: 12px 0;
}

.product-detail__desc {
    color: var(--text-medium);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.product-detail__qty {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.product-detail__qty span {
    font-weight: 500;
    font-size: 0.9rem;
}

/* === Toast Notification === */
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 16px 28px;
    background: var(--secondary);
    color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 3000;
    animation: toastIn 0.4s ease;
    transform: translateX(0);
}

.toast--success { background: var(--accent); }
.toast--error { background: #E74C3C; }

@keyframes toastIn {
    from { transform: translateX(120%); }
    to { transform: translateX(0); }
}

/* === Responsive === */
@media (max-width: 1024px) {
    .hero__title { font-size: 2.8rem; }
    .categories__grid { grid-template-columns: repeat(2, 1fr); }
    .products__grid { grid-template-columns: repeat(3, 1fr); }
    .benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .testimonials__grid { grid-template-columns: 1fr 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: white;
        flex-direction: column;
        padding: 80px 32px 32px;
        box-shadow: var(--shadow-xl);
        transition: var(--transition);
        z-index: 999;
    }

    .nav__menu.active { right: 0; }
    .nav__toggle { display: block; }

    .hero__content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .hero__title { font-size: 2.2rem; }
    .hero__buttons { justify-content: center; }
    .hero__stats { justify-content: center; }
    .hero__image-wrapper { width: 300px; height: 300px; }

    .categories__grid { grid-template-columns: 1fr 1fr; }
    .products__grid { grid-template-columns: 1fr 1fr; }

    .about__grid { grid-template-columns: 1fr; gap: 40px; }
    .contact__grid { grid-template-columns: 1fr; }
    .testimonials__grid { grid-template-columns: 1fr; }
    .benefits__grid { grid-template-columns: 1fr 1fr; }

    .products-page__layout { grid-template-columns: 1fr; }
    .filters { position: static; }

    .cart-content__layout { grid-template-columns: 1fr; }
    .cart-item { grid-template-columns: 80px 1fr; gap: 12px; }
    .cart-item__price { grid-column: 2; }
    .cart-item__controls { grid-column: 2; }

    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-steps { display: none; }

    .yape-container { grid-template-columns: 1fr; }
    .product-detail { grid-template-columns: 1fr; }

    .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .hero__title { font-size: 1.8rem; }
    .hero__stats { flex-direction: column; gap: 16px; }
    .hero__buttons { flex-direction: column; }
    .section__title { font-size: 1.8rem; }
    .categories__grid { grid-template-columns: 1fr; }
    .products__grid { grid-template-columns: 1fr; }
    .benefits__grid { grid-template-columns: 1fr; }
    .form__row-2 { grid-template-columns: 1fr; }
    .auth-card { padding: 32px 24px; }
    .checkout-step { padding: 24px; }
    .search-box input { width: 100%; }
    .products-page__toolbar { flex-direction: column; gap: 12px; }
}

/* ============================================
   PROCESS PAGE — Dynamic scroll-built image
   ============================================ */

.process-hero {
    padding: 160px 0 80px;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, var(--bg-light) 100%);
}

.process-hero__title {
    font-size: 3rem;
    font-weight: 800;
    margin: 16px 0 20px;
    line-height: 1.15;
}

.process-hero__subtitle {
    color: var(--text-medium);
    font-size: 1.1rem;
    max-width: 640px;
    margin: 0 auto 32px;
}

.process-hero__hint {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
    animation: hintBounce 2s ease-in-out infinite;
}

@keyframes hintBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

.process-track {
    background: var(--bg-light);
}

.process-section {
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
    position: relative;
}

.process-section:nth-child(even) {
    background: #fff;
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.process-grid--text-right .process-text { order: 2; }
.process-grid--text-right .process-stage { order: 1; }

.process-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.process-step-number {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    letter-spacing: -2px;
}

.process-step-tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(27, 95, 217, 0.1);
    color: var(--primary);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.process-step-title {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1.2;
}

.process-step-desc {
    color: var(--text-medium);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 24px;
}

.process-step-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.process-step-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dark);
    font-weight: 500;
}

.process-step-list i {
    color: var(--accent);
    font-size: 0.95rem;
    background: rgba(0, 184, 148, 0.12);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === Stage (image area) === */
.process-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 480px;
    justify-self: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d3436 60%, #0f3460 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.process-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 1px, transparent 1px),
        radial-gradient(circle at 70% 80%, rgba(255,255,255,0.04) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(0,184,148,0.08) 0%, transparent 50%);
    background-size: 40px 40px, 60px 60px, 100% 100%;
    pointer-events: none;
}

.process-stage__inner {
    position: absolute;
    inset: 0;
}

.process-stage__label {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    backdrop-filter: blur(6px);
    z-index: 5;
}

.process-stage__label--final {
    background: linear-gradient(135deg, var(--accent), #00d2a0);
    box-shadow: 0 0 20px rgba(0, 184, 148, 0.6);
}

/* === Layers === */
.process-layer {
    position: absolute;
    inset: 0;
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The "newly added" layer of each section starts hidden until visible */
.process-section:not(.is-visible) .process-layer--new {
    opacity: 0;
    transform: scale(0.6) translateY(40px);
}
.process-section.is-visible .process-layer--new {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Layer 1: base platform */
.layer-base {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 18px;
    background: linear-gradient(180deg, #4a5568 0%, #1a202c 100%);
    border-radius: 50%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                inset 0 2px 4px rgba(255, 255, 255, 0.1);
}
.layer-base::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(180deg, #718096 0%, transparent 100%);
    border-radius: 50%;
    opacity: 0.6;
}

/* Layer 2: tooth icon */
.layer-tooth {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 7rem;
    color: #fff;
    text-shadow: 0 8px 30px rgba(255, 255, 255, 0.3),
                 0 0 60px rgba(0, 184, 148, 0.4);
    animation: floatTooth 4s ease-in-out infinite;
}

@keyframes floatTooth {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-8px); }
}

/* Layer 3: resin drops */
.process-layer--drops .drop {
    position: absolute;
    width: 14px;
    height: 18px;
    background: linear-gradient(180deg, #4fc3f7 0%, #0288d1 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 0 12px rgba(79, 195, 247, 0.6);
}
.drop--1 { top: 12%; left: 38%; animation: dropFall 2.4s ease-in-out infinite; }
.drop--2 { top: 8%;  left: 52%; animation: dropFall 2.4s ease-in-out 0.6s infinite; }
.drop--3 { top: 14%; left: 62%; animation: dropFall 2.4s ease-in-out 1.2s infinite; }

@keyframes dropFall {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    80% { transform: translateY(60px); opacity: 0.8; }
    100% { transform: translateY(80px); opacity: 0; }
}

/* Layer 4: printer */
.process-layer--printer .printer-head {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 50px;
    background: linear-gradient(180deg, #2d3436 0%, #636e72 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    border: 2px solid #1a1a2e;
}
.process-layer--printer .printer-beam {
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 28%;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, transparent 100%);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.7);
    animation: beamPulse 1.6s ease-in-out infinite;
}

@keyframes beamPulse {
    0%, 100% { opacity: 0.6; height: 28%; }
    50% { opacity: 1; height: 32%; }
}

/* Layer 5: UV cure halo */
.cure-halo {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(155, 89, 255, 0.5);
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(155, 89, 255, 0.5),
                inset 0 0 50px rgba(155, 89, 255, 0.3);
    animation: cureRing 3s ease-in-out infinite;
}
.cure-halo--2 {
    width: 280px;
    height: 280px;
    border-color: rgba(155, 89, 255, 0.25);
    animation-delay: 0.8s;
}

@keyframes cureRing {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* Layer 6: final sparkles + badge */
.process-layer--final .sparkle {
    position: absolute;
    color: #ffd700;
    font-size: 1.2rem;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
    animation: sparkleTwinkle 2s ease-in-out infinite;
}
.sparkle--1 { top: 22%; left: 22%; animation-delay: 0s; }
.sparkle--2 { top: 28%; right: 18%; animation-delay: 0.5s; font-size: 0.9rem; }
.sparkle--3 { top: 50%; left: 14%; animation-delay: 1s; font-size: 1.4rem; }

@keyframes sparkleTwinkle {
    0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.15) rotate(180deg); }
}

.final-badge {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--accent), #00d2a0);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 184, 148, 0.5);
}
.final-badge i { font-size: 1.1rem; }

.process-stage--final {
    box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.4),
                var(--shadow-xl),
                0 0 80px rgba(0, 184, 148, 0.3);
}

/* === Responsive === */
@media (max-width: 900px) {
    .process-hero__title { font-size: 2.2rem; }
    .process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .process-grid--text-right .process-text { order: 2; }
    .process-grid--text-right .process-stage { order: 1; }
    .process-grid--text-left .process-text { order: 2; }
    .process-grid--text-left .process-stage { order: 1; }
    .process-stage { max-width: 360px; }
    .process-step-number { font-size: 3.5rem; }
    .process-step-title { font-size: 1.8rem; }
    .process-section { min-height: auto; padding: 60px 0; }
}

/* ============================================================
   Accesibilidad
   ============================================================ */

/* Etiqueta visible solo para lectores de pantalla.
   No se usa display:none ni visibility:hidden: eso la esconde también
   del lector, que es justo lo contrario de lo que se busca. La técnica
   es sacarla del flujo con un rectángulo de 1px recortado. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* El foco del teclado tiene que verse. Muchos diseños lo quitan con
   outline:none y dejan la página inutilizable sin ratón. */
:focus-visible {
    outline: 2px solid var(--primary, #00a8a8);
    outline-offset: 2px;
}

/* Salto al contenido: primer elemento tabulable de la página, invisible
   hasta que recibe el foco. Evita recorrer todo el menú con el teclado
   en cada página. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 9999;
    padding: 10px 16px;
    border-radius: 0 0 8px 8px;
    background: var(--primary, #00a8a8);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
}

/* Quien haya pedido menos movimiento en su sistema no debería recibir
   animaciones: en algunas personas provocan mareo. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   Identidad de Implatec — común a todas las páginas
   ============================================================
   Vive aquí y no en implatec.css porque esa hoja solo la carga la portada:
   la barra de anuncio y el lema del logo tienen que salir en las nueve.
   ============================================================ */

:root { --topbar-h: 38px; }

/* La barra va FIJA, igual que el header, y el header baja para dejarle
   sitio. Con la barra en el flujo, el header —que es fijo— se le ponía
   encima y el anuncio aparecía partido por el logo.

   El desplazamiento se compensa una sola vez aquí: la barra deja de ocupar
   espacio al ser fija, y este relleno lo devuelve. */
body { padding-top: var(--topbar-h); }

.header { top: var(--topbar-h); }

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy-dark) 55%, var(--navy) 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
}
.topbar__in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 38px;
    padding: 7px 0;
    text-align: center;
}
.topbar i { font-size: 0.86rem; color: var(--cyan); }

/* ---------- Logo con su lema ---------- */
.nav__logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Sin hueco: el logo ya trae su propio aire abajo y con 2px más el
       lema se despegaba en vez de leerse como su bajada. */
    gap: 0;
    text-decoration: none;
}
.nav__lema {
    font-size: 0.55rem;
    font-weight: 600;
    /* Menos espaciado entre letras: el lema tiene 33 caracteres y el logo
       mide 143px de ancho a esta altura. Con 0.115em ocupaba unos 216px y
       se salía bastante por la derecha; apretándolo se acerca al ancho del
       logo y el conjunto se lee como un bloque. */
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: var(--text-medium);
    /* Pegado al borde izquierdo del logo, no sangrado 52px para colgar de
       la palabra saltándose el emblema. Esa sangría lo empujaba tan a la
       derecha que dejaba de leerse como parte del logo y parecía un texto
       suelto flotando al lado. */
    padding-left: 2px;
    line-height: 1.15;
}

/* ---------- Botón del nav ---------- */
.nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 21px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--primary) 32%, transparent);
    transition: var(--transition);
}
.nav__cta:hover { background: var(--primary-dark); transform: translateY(-1px); }

@media (max-width: 900px) {
    .nav__lema { display: none; }
}
@media (max-width: 620px) {
    .nav__cta { display: none; }
    .topbar { font-size: 0.75rem; }
}

/* ---- Formulario de Izipay incrustado (checkout) --------------------- */
/* El SDK ajusta su alto al del contenedor: sin un mínimo, el iframe sale
   de 0 px y parece que no cargó nada. */
.izipay-form {
    min-height: 560px;
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.izipay-estado {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    background: var(--bg-light);
    color: var(--text-medium);
}
.izipay-estado--error {
    background: #fff4f4;
    border: 1px solid #ffd4d4;
    color: #a12626;
}