/* Wollo Dueños de Mascotas (wpet.casa) — mockup "v2 naranja", portado 2026-08-20 */

/* Scroll suave al hacer click en los anclas del nav (#herramientas, #tag,
   etc.) — scroll-margin-top evita que el nav flotante (fixed, aparece al
   bajar) tape el inicio de la sección al aterrizar. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
#inicio, #herramientas, #tag, #iadn, #precios, #nonprofits, #descargar {
    scroll-margin-top: 96px;
}

/* Complemento CSS de la protección de imágenes en front-duenos.js (además
   del draggable="false" + preventDefault, algunos navegadores solo respetan
   esto si también está en CSS). */
#wd-app img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

/* .GEN oculto temporalmente (pedido de Carlos 2026-08-25): por ahora no se
   quita del código ni de los datos, solo se oculta — el link del menú (las 4
   versiones, .wd-gen-oculto) y toda la sección de la página (#iadn). Para
   reactivarlo, basta borrar este bloque. */
.wd-gen-oculto, #iadn, #emp-gen { display: none !important; }
/* Modo Profesional: el slot left-3 es el MISMO <a> que en modo dueños dice
   "Wollo Tag" (no se puede ocultar el elemento a secas) — solo se oculta
   cuando #ht-header está en modo empresas. */
#ht-header[data-modo="empresas"] .wem-gen-oculto { display: none !important; }

.wd-wrap {
    --wd-bg: #FBF7F1;
    --wd-card: #FFFDF9;
    --wd-cream: #FFF7EE;
    --wd-text: #3E1C0A;
    --wd-text-2: #6E4A33;
    --wd-orange: #E2611C;
    --wd-orange-dark: #2A1206;
    --wd-orange-2: #F09055;
    --wd-bright: #FF7A1F;
    --wd-bright-text: #2B1200;
    --wd-pink: #E8618A;
    --wd-pink-dark: #8C2749;
    --wd-border: #EFE7DA;
    --wd-border-cream: #EFE0D0;
    --wd-track: #E8D9C8;
    --wd-muted: #A78468;
    --wd-muted-2: #8C6448;
    /* --ht-surface/--ht-band: SOLO para el hero/nav compartido (#ht-header,
       ver front-duenos.php). --wd-orange/--wd-cream siguen siendo el acento
       naranja y el "claro sobre banda" constantes en ambos modos; estas dos
       son las que de verdad se invierten claro↔oscuro. */
    --ht-surface: #FFF7EE;
    --ht-band: #E2611C;
    --wd-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    font-family: Archivo, system-ui, sans-serif;
    background: var(--wd-bg);
    color: var(--wd-text);
    -webkit-font-smoothing: antialiased;
    max-width: 100%;
    overflow-x: hidden;
}

/* Hero/nav compartido en modo "empresa": mismos contenedores, mismo texto ya
   escrito por JS — solo cambian estas variables, y todo lo que las usa
   transiciona solo (ver reglas `transition` añadidas más abajo). */
#ht-header[data-modo="empresas"] {
    --wd-card: #1D1D23;
    --wd-text: #F4F1EC;
    --wd-muted: #71717C;
    --wd-muted-2: #8A8A94;
    --wd-border: #26262C;
    --ht-surface: #2E2E33;
    --ht-band: #242429;
}

#ht-header,
#ht-header .wd-header-band,
#ht-header .wd-shell,
#ht-header .wd-notch-tab,
#ht-header .wd-notch-corner-left,
#ht-header .wd-notch-corner-right,
#ht-header .wd-notch-corner-left span,
#ht-header .wd-notch-corner-right span,
#ht-header .wd-nav-floating,
#ht-header .wd-mobile-menu,
#ht-header .wd-mobile-menu-dark,
#ht-header .wd-hero-pill,
#ht-header .wd-especies-card,
#ht-header .wd-especies-corner,
#ht-header .wd-especies-corner span,
#ht-header .wd-especies-mobile,
#ht-header .wd-moneda-pill,
#ht-header .wd-hero-social a,
#ht-header .wd-hero-h1,
#ht-header .wd-hero-texto,
#ht-header .wd-hero-aviso-texto,
#ht-header .wd-hero-gratis,
#ht-header .wd-nav-links a,
#ht-header .wd-notch-nav a,
#ht-header .wd-mobile-menu a,
#ht-header .wd-moneda-pill-label,
#ht-header .wd-burger span,
#ht-header .wd-btn-outline-dark {
    transition: background 380ms var(--wd-ease-out), color 380ms var(--wd-ease-out), border-color 380ms var(--wd-ease-out);
}
@media (prefers-reduced-motion: reduce) {
    #ht-header, #ht-header * { transition: none !important; }
}

/* Blink corto de texto al cambiar de modo (ver front-duenos.js) — el color de
   fondo/borde ya transiciona solo; el CONTENIDO (texto) no se puede
   "transicionar", así que se desvanece un instante mientras JS lo reemplaza. */
#ht-header .wd-hero-h1,
#ht-header .wd-hero-texto,
#ht-header .wd-hero-cta-bar,
#ht-header .wd-hero-gratis,
#ht-header .wd-hero-aviso {
    transition: opacity 150ms ease, background 380ms var(--wd-ease-out), color 380ms var(--wd-ease-out);
}
#ht-header.is-swapping-text .wd-hero-h1,
#ht-header.is-swapping-text .wd-hero-texto,
#ht-header.is-swapping-text .wd-hero-cta-bar,
#ht-header.is-swapping-text .wd-hero-gratis,
#ht-header.is-swapping-text .wd-hero-aviso {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    #ht-header.is-swapping-text .wd-hero-h1,
    #ht-header.is-swapping-text .wd-hero-texto,
    #ht-header.is-swapping-text .wd-hero-cta-bar,
    #ht-header.is-swapping-text .wd-hero-gratis,
    #ht-header.is-swapping-text .wd-hero-aviso {
        opacity: 1;
    }
}

/* Elementos sin equivalente en el otro modo (fotos de mascota/redes/especies
   en dueños; el marquee en empresas): se ocultan localmente, sin afectar el
   resto del hero. */
#ht-header[data-modo="empresas"] .ht-duenos-only { display: none !important; }
#ht-header[data-modo="duenos"] .ht-empresas-only { display: none !important; }

.wd-wrap * { box-sizing: border-box; }
.wd-wrap img { max-width: 100%; display: block; }
.wd-wrap a { color: var(--wd-orange); text-decoration: none; }
.wd-wrap a:hover { color: var(--wd-text); }
.wd-wrap h1, .wd-wrap h2 { letter-spacing: -.035em; margin: 0; }
.wd-wrap h3 { letter-spacing: -.03em; margin: 0; }
.wd-wrap p { margin: 0; }
.wd-wrap input { font-family: Archivo, sans-serif; }

.wd-only-desktop { display: flex; }
a.wd-only-desktop { display: inline-flex; }
.wd-only-mobile { display: none !important; }

.wd-pad { padding-left: 28px; padding-right: 28px; }

.wd-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px !important;
    border-radius: 99px;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    font-family: Archivo, sans-serif;
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), opacity 160ms ease;
}
.wd-btn:active { transform: scale(0.97); }
.wd-btn-primary { background: var(--wd-orange); color: var(--wd-cream) !important; }
.wd-btn-primary:hover { color: var(--wd-cream) !important; opacity: .92; }
.wd-btn-cream { background: var(--wd-cream); color: var(--wd-orange-dark) !important; border: 1.5px solid var(--wd-border-cream); }
.wd-btn-cream:hover { color: var(--wd-orange-dark) !important; opacity: .85; }
.wd-btn-outline-dark { border: 1.5px solid var(--wd-text); color: var(--wd-text) !important; background: transparent; }
.wd-btn-outline-dark:hover { color: var(--wd-text) !important; opacity: .75; }
.wd-btn-store { background: var(--wd-card); border: 1px solid var(--wd-border); color: var(--wd-text) !important; box-shadow: 0 16px 30px -22px rgba(62, 28, 10, .5); }
.wd-btn-icon { height: 20px; width: auto; flex: 0 0 auto; }

.wd-kicker { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-orange); margin-bottom: 14px; }
.wd-kicker-rosa { color: #FFE1EA; }

.wd-pulse-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--wd-orange); display: block; animation: wd-pulse 2s ease-in-out infinite; }
@keyframes wd-pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

/* Nav flotante */

.wd-nav-floating-outer {
    position: fixed;
    top: 12px;
    left: 14px;
    right: 14px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-26px) scale(.92);
    transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 420ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wd-nav-floating-outer.is-visible { opacity: 1; transform: translate(0, 0) scale(1); pointer-events: auto; }

.wd-nav-floating {
    width: 100%;
    max-width: 1160px;
    background: var(--ht-surface);
    border-radius: 30px;
    box-shadow: 0 22px 44px -26px rgba(62, 28, 10, .55);
    padding: 9px 10px 9px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wd-nav-logo { height: 26px; width: auto; flex: 0 0 auto; margin: 0 auto; }

.wd-nav-links { flex: 1; align-items: center; gap: 0; font-size: 15px; font-weight: 600; }
.wd-nav-links a { color: var(--wd-text); padding: 0 11px; white-space: nowrap; }
.wd-nav-links-right { justify-content: flex-end; }
.wd-nav-cta { margin-left: 10px; }
a.wd-nav-cta.wd-only-mobile { margin-left: auto; }

/* Dropdown por hover (.GEN y Soporte) — abre al pasar el mouse, cierra al
   quitarlo, sin JS: aplicarTextoModo() en front-duenos.js ya llena texto/href
   de estos data-ht-nav-slot genéricamente, así que solo hace falta CSS. Se
   usa tanto en el notch nav como en el flotante. */
.wd-nav-dropdown { position: relative; display: flex; align-items: center; }
.wd-nav-dropdown-trigger { display: inline-flex !important; align-items: center; gap: 5px; }
/* La flechita va como ::after (pseudo-elemento, no nodo real) a propósito:
   aplicarTextoModo() en front-duenos.js hace "a.textContent = s.t" sobre
   este mismo <a> para cambiar el texto según el modo — un <span> hijo real
   quedaría borrado en cada cambio de modo. El ::after sobrevive porque no es
   parte del árbol de nodos que textContent reemplaza. */
.wd-nav-dropdown-trigger::after {
    content: '';
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    opacity: .65;
    flex: 0 0 auto;
}
/* En modo empresas este mismo link ("Precios"/"Tu ahorro") no tiene panel
   detrás, así que la flecha se oculta y queda como un link plano — igual a
   como se veía antes de este cambio. */
#ht-header[data-modo="empresas"] .wd-nav-dropdown-trigger::after { display: none; }
.wd-nav-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(6px);
    min-width: 210px;
    background: var(--wd-card);
    border: 1px solid var(--wd-border-cream);
    border-radius: 16px;
    padding: 7px;
    box-shadow: 0 22px 44px -24px rgba(62, 28, 10, .35);
    display: flex;
    flex-direction: column;
    gap: 1px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms var(--wd-ease-out), transform 180ms var(--wd-ease-out), visibility 180ms;
    z-index: 130;
}
/* Selector reforzado (dos clases) para ganarle en especificidad a
   ".wd-notch-nav a" / ".wd-nav-links a" sin depender del orden en el archivo
   — esas reglas siguen aplicando al link disparador, pero no a los del panel. */
.wd-nav-dropdown .wd-nav-dropdown-panel a {
    color: var(--wd-text);
    padding: 9px 12px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.wd-nav-dropdown .wd-nav-dropdown-panel a:hover { background: var(--wd-cream); color: var(--wd-text); }
.wd-nav-dropdown:hover .wd-nav-dropdown-panel,
.wd-nav-dropdown:focus-within .wd-nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
/* El de la derecha (Soporte) se alinea al borde derecho para no salirse de pantalla */
.wd-nav-links-right .wd-nav-dropdown-panel,
.wd-notch-nav-right .wd-nav-dropdown-panel { left: auto; right: 0; }

.wd-burger {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.wd-burger span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--wd-text); position: relative; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), opacity 160ms ease; }
.wd-burger span + span { margin-top: 6px; }
.wd-burger.is-open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.wd-burger.is-open span:nth-child(2) { opacity: 0; }
.wd-burger.is-open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.wd-header-mobile-tab .wd-burger span { background: var(--wd-text); }

.wd-mobile-menu[hidden] { display: none; }
.wd-mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    max-width: 1160px;
    background: var(--ht-surface);
    border-radius: 0 0 26px 26px;
    padding: 10px 8px 6px;
    font-size: 18px;
    font-weight: 600;
    animation: wd-sheet 240ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.wd-mobile-menu a { color: var(--wd-text); padding: 11px 0; }
/* Sub-ítems de los dropdowns (.GEN/Soporte) aplanados para mobile — sin hover
   en touch, así que se listan seguidos del ítem padre, apenas indentados. */
.wd-mobile-menu a.wd-mobile-menu-sub { padding: 8px 0 8px 16px; font-size: 15px; opacity: .82; }
/* Estructura compartida (padding, radios, svg) vive en front-shared.css —
   acá solo quedan los colores propios de esta marca. */
.wd-mobile-menu-dark { background: var(--ht-band); }
.wd-mobile-menu-dark a { color: #EDE3D6; }
@keyframes wd-sheet { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.wd-moneda-btn {
    background: transparent;
    border: 1.5px solid #7A4A24;
    color: #FFE6D2;
    border-radius: 99px;
    padding: 8px 16px;
    font-family: Archivo, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.wd-moneda-pill {
    position: absolute;
    top: clamp(18px, 2.4vw, 30px);
    left: clamp(18px, 2.4vw, 34px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1.5px solid #E8D9C8;
    background: var(--wd-card);
    border-radius: 99px;
    padding: 11px 18px;
    font-family: Archivo, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--wd-text);
    cursor: pointer;
}
.wd-moneda-pill-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wd-muted); }

.wd-hero-social {
    position: absolute;
    top: calc(clamp(18px, 2.4vw, 30px) + 58px);
    left: clamp(18px, 2.4vw, 34px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wd-hero-social a {
    width: 40px;
    height: 40px;
    border-radius: 99px;
    border: 1.5px solid #E8D9C8;
    background: var(--wd-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wd-text) !important;
    transition: border-color 160ms var(--wd-ease-out), color 160ms var(--wd-ease-out);
}
.wd-hero-social a:hover { border-color: var(--wd-orange); color: var(--wd-orange) !important; }

/* Header integrado */

.wd-header-band { background: var(--ht-band); padding: 14px 14px 0; }

.wd-header-notch { align-items: flex-end; gap: 0; }
.wd-notch-tab { background: var(--ht-surface); border-radius: 34px 34px 0 0; padding: 18px 44px; display: flex; align-items: center; flex: 0 0 auto; }
.wd-notch-tab img { height: 40px; width: auto; }
.wd-notch-corner-left, .wd-notch-corner-right { width: 34px; height: 34px; background: var(--ht-surface); flex: 0 0 auto; position: relative; overflow: hidden; }
.wd-notch-corner-left span { position: absolute; inset: 0; background: var(--ht-band); border-bottom-right-radius: 34px; display: block; }
.wd-notch-corner-right span { position: absolute; inset: 0; background: var(--ht-band); border-bottom-left-radius: 34px; display: block; }
.wd-notch-nav { flex: 1; display: flex; align-items: center; gap: 0; font-size: 15px; font-weight: 600; padding: 0 10px 18px; flex-wrap: nowrap; }
.wd-notch-nav-left { justify-content: flex-start; }
.wd-notch-nav-right { justify-content: flex-end; }
.wd-notch-nav a { color: var(--wd-cream); padding: 0 11px; white-space: nowrap; }
.wd-notch-nav a:hover { color: #FFFDF9; }
.wd-notch-nav .wd-btn { margin-left: 12px; }

.wd-header-mobile-wrap { position: relative; margin-right: -14px; }
.wd-header-mobile { display: flex; align-items: flex-end; gap: 0; width: 100%; }
.wd-mobile-menu-overlay { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; }
.wd-header-mobile-tab { background: var(--ht-surface); border-radius: 22px 22px 0 0; padding: 4px 18px 4px 14px; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.wd-header-mobile-logo { height: 26px; width: auto; flex: 0 0 auto; }
.wd-header-mobile-corner { width: 22px; height: 22px; background: var(--ht-surface); flex: 0 0 auto; position: relative; overflow: hidden; }
.wd-header-mobile-corner span { position: absolute; inset: 0; background: var(--ht-band); border-bottom-left-radius: 22px; display: block; }
.wd-header-mobile-cta { margin-left: auto; margin-right: 16px; margin-bottom: 12px; padding: 10px 20px !important; font-size: 14px; }

.wd-shell { position: relative; overflow: hidden; background: var(--ht-surface); border-radius: 34px 34px 38px 0; padding: clamp(30px, 3.6vw, 56px) 16px clamp(30px, 3.4vw, 48px); }

.wd-hero-pet { position: absolute; bottom: 0; width: clamp(200px, 24vw, 380px); height: clamp(240px, 30vw, 460px); pointer-events: none; }
.wd-hero-pet img { width: 100%; height: 100%; object-fit: contain; }
.wd-hero-pet-left { left: 0; }
.wd-hero-pet-left img { object-position: left bottom; }
.wd-hero-pet-right { right: 0; }
.wd-hero-pet-right img { object-position: right bottom; }

.wd-hero-content { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; padding-left: 14px; padding-right: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.wd-hero-pill { position: relative; display: flex; align-items: center; gap: 4px; border: 2.5px solid var(--wd-text); border-radius: 99px; padding: 5px; background: var(--ht-surface); transition: background 380ms var(--wd-ease-out), border-color 380ms var(--wd-ease-out); }
.wd-hero-pill .wd-pill-thumb { background: var(--wd-text); }
.wd-hero-pill .wd-pill-opt { color: var(--wd-text); transition: color 380ms var(--wd-ease-out); }
.wd-hero-pill .wd-pill-opt.is-active { color: var(--ht-surface); }

/* Interruptor deslizante compartido (dueños/empresas): un thumb absoluto que
   se mueve/redimensiona con JS (getBoundingClientRect) al ancho real de cada
   opción — los textos no miden lo mismo ("Dueños" vs "Profesionales"), así
   que un 50/50 fijo se habría visto descuadrado. */
.wd-pill-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: 40px; border-radius: 99px; transition: left 280ms cubic-bezier(0.23, 1, 0.32, 1), width 280ms cubic-bezier(0.23, 1, 0.32, 1), background 380ms cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; }
.wd-pill-opt { position: relative; z-index: 2; border: none; background: transparent; font-family: Archivo, sans-serif; border-radius: 99px; padding: 11px 26px; font-size: 16px; font-weight: 700; cursor: pointer; transition: color 200ms ease; }
@media (prefers-reduced-motion: reduce) {
    .wd-pill-thumb { transition: none; }
}

.wd-hero-h1 { font-size: clamp(38px, 6.4vw, 84px); line-height: .98; letter-spacing: -.045em; font-weight: 800; margin-top: 26px; color: var(--wd-text); }
.wd-words { position: relative; display: block; color: var(--wd-orange); }
.wd-words-center { text-align: center; }
.wd-words > span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; white-space: nowrap; animation: wd-word 16.1s linear infinite; text-align: center; }
.wd-words > i { visibility: hidden; font-style: normal; }
@keyframes wd-word { 0% { opacity: 0; transform: translateY(14px); } 2% { opacity: 1; transform: translateY(0); } 12.5% { opacity: 1; transform: translateY(0); } 15%, 100% { opacity: 0; transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) {
    .wd-words > span { animation-name: wd-word-fade; }
}
@keyframes wd-word-fade { 0% { opacity: 0; } 2%, 12.5% { opacity: 1; } 15%, 100% { opacity: 0; } }

.wd-hero-texto { font-size: clamp(18px, 2vw, 22px); line-height: 1.4; font-weight: 600; color: var(--wd-text); margin-top: 26px; max-width: 38ch; }

.wd-hero-cta-bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.wd-btn-store span { font-size: 18px; line-height: 1; }

.wd-hero-gratis { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--wd-muted-2); }

.wd-hero-aviso {
    position: absolute;
    top: clamp(18px, 2.4vw, 30px);
    right: clamp(18px, 2.4vw, 34px);
    z-index: 3;
    width: min(290px, 24vw);
    background: var(--wd-card);
    border: 1px solid var(--wd-border);
    border-radius: 20px;
    padding: 16px 18px;
    text-align: left;
    box-shadow: 0 24px 46px -30px rgba(62, 28, 10, .45);
}
.wd-hero-aviso-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.wd-hero-aviso-tipo { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-orange); }
.wd-hero-aviso-hace { margin-left: auto; font-size: 12px; font-weight: 600; color: #B79A80; }
.wd-hero-aviso-texto { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--wd-text); }

/* Especies (Perros/Gatos/Conejos) */

.wd-especies { align-items: flex-start; gap: 0; }
.wd-especies-card { background: var(--wd-cream); border-radius: 0 0 34px 34px; padding: 18px 30px 20px 28px; display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.wd-especies-card > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wd-especie-item { display: flex; align-items: center; gap: 12px; }
.wd-especie-icono { width: 40px; height: 40px; border-radius: 99px; background: #FFE8D5; color: var(--wd-orange); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex: 0 0 auto; }
.wd-especie-icono img { width: 24px; height: 24px; object-fit: contain; }
.wd-especies-corner { width: 34px; height: 34px; background: var(--wd-cream); flex: 0 0 auto; position: relative; overflow: hidden; }
.wd-especies-corner span { position: absolute; inset: 0; background: var(--wd-orange); border-top-left-radius: 34px; display: block; }
.wd-especies-filler { flex: 1; }
.wd-especies-mobile { align-items: center; gap: 12px; background: var(--wd-cream); border-radius: 0 0 30px 30px; padding: 16px 20px; font-size: 14px; font-weight: 700; color: var(--wd-text); flex-wrap: wrap; }
.wd-especie-dot { width: 5px; height: 5px; border-radius: 99px; background: var(--wd-orange); display: block; }

/* Plataforma */

.wd-plataforma-band { background: var(--wd-orange); }
.wd-plataforma { max-width: 1200px; margin: 0 auto; padding-top: 62px; padding-bottom: 64px; color: var(--wd-bg); }
.wd-plataforma h2 { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.06; font-weight: 800; max-width: 900px; margin: 0 auto; text-align: center; }
.wd-plataforma-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-top: 40px; }
.wd-plataforma-card { background: var(--wd-cream); border-radius: 24px; padding: 26px; color: var(--wd-orange-dark); }
.wd-plataforma-kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wd-orange); }
.wd-plataforma-card-titulo { font-size: 22px; font-weight: 700; margin: 12px 0 8px; }
.wd-plataforma-card p { font-size: 16px; line-height: 1.5; color: #4A2A16; }

/* Modal de moneda */

.wd-moneda-modal {
    /* Vive fuera de .wd-wrap (ver front-duenos.php) para seguir disponible sin
       importar qué panel esté oculto — por eso redeclara aquí las variables
       --wd-* que antes heredaba de .wd-wrap; sin esto el modal se veía
       transparente/roto (las custom properties no atraviesan hermanos). */
    --wd-bg: #FBF7F1;
    --wd-card: #FFFDF9;
    --wd-text: #3E1C0A;
    --wd-text-2: #6E4A33;
    --wd-orange: #E2611C;
    --wd-border-cream: #EFE0D0;
    --wd-muted: #A78468;
    position: fixed; inset: 0; z-index: 200; background: rgba(62, 28, 10, .45); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: wd-fade 200ms ease both; font-family: Archivo, system-ui, sans-serif;
}
.wd-moneda-modal[hidden] { display: none; }
@keyframes wd-fade { from { opacity: 0; } to { opacity: 1; } }
.wd-moneda-modal-card { background: var(--wd-card); border-radius: 28px; padding: clamp(26px, 4vw, 40px); max-width: 480px; width: 100%; box-shadow: 0 40px 90px -40px rgba(62, 28, 10, .6); animation: wd-sheet 320ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.wd-moneda-modal-kicker { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-orange); }
.wd-moneda-modal-card h2 { font-size: clamp(26px, 4vw, 34px); line-height: 1.05; font-weight: 800; margin: 12px 0 8px; }
.wd-moneda-modal-card p { font-size: 16px; line-height: 1.5; color: var(--wd-text-2); margin-bottom: 22px; }
.wd-moneda-modal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.wd-moneda-modal-grid button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 16px 18px; border-radius: 18px; border: 1.5px solid var(--wd-border-cream); background: var(--wd-bg); cursor: pointer; font-family: Archivo, sans-serif; color: var(--wd-text); }
.wd-moneda-modal-sym { font-size: 22px; font-weight: 800; min-width: 30px; }
.wd-moneda-modal-code { display: block; font-size: 16px; font-weight: 700; }
.wd-moneda-modal-pais { display: block; font-size: 13px; font-weight: 600; color: var(--wd-muted); }

/* Modal de instalación PWA (paso a paso iOS / QR escritorio) — mismo
   lenguaje visual que el modal de moneda de arriba, aplicado por encima del
   CSS genérico del plugin pwa-koia (mismo mecanismo de show/hide vía
   .pwa-modal-overlay.is-active, ver pwa-install.js). !important donde hace
   falta porque el orden de carga entre el CSS del plugin y este archivo no
   está garantizado. */
.wd-instalar-modal {
    --wd-bg: #FBF7F1;
    --wd-card: #FFFDF9;
    --wd-text: #3E1C0A;
    --wd-text-2: #6E4A33;
    --wd-orange: #E2611C;
    --wd-border-cream: #EFE0D0;
    --wd-muted: #A78468;
    background: rgba(62, 28, 10, .45) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    font-family: Archivo, system-ui, sans-serif;
}
.wd-instalar-modal.is-active { animation: wd-fade 200ms ease both; }
.wd-instalar-modal-card {
    background: var(--wd-card) !important;
    border-radius: 28px !important;
    padding: clamp(26px, 4vw, 40px) !important;
    max-width: 420px !important;
    width: 100% !important;
    box-shadow: 0 40px 90px -40px rgba(62, 28, 10, .6) !important;
    text-align: left !important;
    transform: none !important;
}
.wd-instalar-modal.is-active .wd-instalar-modal-card { animation: wd-sheet 320ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.wd-instalar-modal-kicker { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wd-orange); }
.wd-instalar-modal-card h2 { font-size: clamp(24px, 4vw, 30px) !important; line-height: 1.08 !important; font-weight: 800 !important; margin: 12px 0 8px !important; color: var(--wd-text) !important; }
.wd-instalar-modal-card > p { font-size: 16px !important; line-height: 1.5 !important; color: var(--wd-text-2) !important; margin-bottom: 22px !important; }
.wd-instalar-modal-close {
    background: var(--wd-bg) !important;
    color: var(--wd-text-2) !important;
    top: 16px !important;
    right: 16px !important;
}
.wd-instalar-modal-close:hover { background: var(--wd-border-cream) !important; }

.wd-instalar-pasos { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.wd-instalar-pasos li { display: flex; align-items: flex-start; gap: 14px; }
.wd-instalar-paso-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--wd-orange); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.wd-instalar-paso-texto { font-size: 15px; line-height: 1.5; color: var(--wd-text); padding-top: 3px; }
.wd-instalar-paso-icono { vertical-align: -4px; margin: 0 2px; color: var(--wd-orange); }
.wd-instalar-modal-nota { font-size: 13px !important; color: var(--wd-muted) !important; margin-bottom: 0 !important; }

.wd-instalar-qr-frame { background: var(--wd-bg); border: 1.5px solid var(--wd-border-cream); border-radius: 20px; padding: 18px; display: inline-block; margin-bottom: 6px; }
.wd-instalar-qr-frame img { width: 190px; height: 190px; display: block; border-radius: 8px; }

/* Herramientas (carrusel) */

.wd-herramientas { padding: 56px 0 24px; }
.wd-herramientas-header { max-width: 1200px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wd-herramientas-header h2 { flex: 1; min-width: 260px; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; font-weight: 800; max-width: 700px; text-align: left; }
.wd-herramientas-controles { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; padding-top: 6px; }
/* Orden visual (no del DOM): en desktop el hint queda a la izquierda de las
   flechas, igual que siempre. En mobile se invierte (ver media query abajo). */
.wd-herramientas-hint { font-size: 14px; font-weight: 600; color: var(--wd-muted); order: 1; }
.wd-herramientas-arrows { display: flex; gap: 10px; order: 2; }
.wd-herramientas-controles button { width: 46px; height: 46px; border-radius: 99px; border: 1.5px solid var(--wd-text); background: transparent; color: var(--wd-text); font-size: 18px; font-weight: 700; cursor: pointer; font-family: Archivo, sans-serif; }
#wd-rail-next { background: var(--wd-text); color: var(--wd-bg); }

.wd-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px 28px; cursor: grab; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wd-rail::-webkit-scrollbar { display: none; }
.wd-rail:active { cursor: grabbing; }

.wd-rail-card { scroll-snap-align: center; flex: 0 0 auto; width: min(92vw, 1080px); background: var(--wd-card); border: 1px solid var(--wd-border); border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); user-select: none; transition: transform 250ms var(--wd-ease-out), box-shadow 250ms var(--wd-ease-out); }
@media (hover: hover) and (pointer: fine) {
    .wd-rail-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(62, 28, 10, .3); }
}
.wd-rail-media { position: relative; width: 100%; height: 100%; min-height: 320px; background: #F5EDE1; font-size: 0; line-height: 0; }
.wd-rail-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Badge tipo "Ley Kiara" — visible por defecto (la moneda por defecto del
   sitio es COP), pintarMoneda() en front-duenos.js lo oculta si el visitante
   elige otra moneda distinta a la marcada en data-wd-moneda-solo. */
.wd-rail-badge { position: absolute; top: 16px; left: 16px; background: var(--wd-orange); color: var(--wd-cream); font-size: 12px; font-weight: 800; letter-spacing: .02em; padding: 6px 12px; border-radius: 99px; line-height: 1; }
.wd-rail-texto { padding: clamp(20px, 2.6vw, 36px); display: flex; flex-direction: column; justify-content: center; }
.wd-rail-numero { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--wd-orange); }
.wd-rail-texto h3 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.08; font-weight: 800; margin: 10px 0 8px; }
.wd-rail-texto p { font-size: 16px; line-height: 1.45; color: var(--wd-text-2); max-width: 46ch; }
.wd-rail-bullets { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; }
/* Sin esto, el botón hereda align-items:stretch de .wd-rail-texto y se ve
   "largo" (ancho completo de la tarjeta) en vez de solo lo que necesita. */
.wd-rail-texto > .wd-btn { align-self: flex-start; }
.wd-rail-bullets div { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 600; color: var(--wd-text); }
.wd-rail-bullets span { width: 22px; height: 22px; border-radius: 99px; background: #FFE8D5; color: var(--wd-orange); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 2px; }

.wd-rail-dots { max-width: 1200px; margin: 0 auto; display: flex; gap: 8px; justify-content: center; }
.wd-rail-dots button { width: 10px; height: 10px; border-radius: 99px; border: none; padding: 0; cursor: pointer; background: var(--wd-track); transition: width .25s ease, background .25s ease; }
.wd-rail-dots button.is-active { width: 32px; background: var(--wd-orange); }

/* Wollo Tag */

.wd-tag-section { background: var(--wd-bg); padding: 72px 14px 24px; margin: 40px 0 0; }
.wd-tag-header { max-width: 1200px; margin: 0 auto; text-align: center; }
.wd-tag-header .wd-kicker { margin-bottom: 0; }
.wd-tag-header h2 { font-size: clamp(32px, 4.8vw, 58px); line-height: 1; letter-spacing: -.04em; font-weight: 800; margin: 16px auto 0; color: var(--wd-text); max-width: 800px; }
.wd-tag-header p { font-size: 18px; line-height: 1.5; color: var(--wd-text-2); margin: 18px auto 0; max-width: 560px; }

/* Bento del Wollo Tag — foto a la izquierda, cuadros a la derecha. Incluye
   las 3 tarjetas de "pérdida" fusionadas aquí 2026-08-24 (antes un banner
   aparte): por eso son 7 en vez de 4, con la última ("Activación inmediata")
   ocupando las 2 columnas para cerrar la fila impar. */
.wd-tag-bento { max-width: 1200px; margin: 44px auto 0; display: grid; grid-template-columns: .85fr 1.15fr; gap: 16px; align-items: stretch; }
.wd-tag-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
.wd-tag-feature { border-radius: 26px; padding: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; transition: transform 250ms var(--wd-ease-out), box-shadow 250ms var(--wd-ease-out); }
.wd-tag-feature-ancho { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: clamp(18px, 2.4vw, 28px); }
.wd-tag-feature-ancho .wd-tag-feature-valor { margin: 0; }
.wd-tag-feature-ancho p { max-width: 34ch; }
@media (hover: hover) and (pointer: fine) {
    .wd-tag-feature:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -30px rgba(62, 28, 10, .4); }
}
.wd-tag-feature-muted { background: #F3EEE6; }
.wd-tag-feature-clara { background: #FFE8D5; }
.wd-tag-feature-solida { background: var(--wd-orange); }
.wd-tag-feature-icono { width: 64px; height: 64px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.wd-tag-feature-icono img { width: 100%; height: 100%; object-fit: contain; }
.wd-tag-feature-valor { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; margin: 22px 0 10px; color: var(--wd-text); letter-spacing: -.03em; line-height: 1.05; }
.wd-tag-feature-solida .wd-tag-feature-valor { color: var(--wd-cream); }
.wd-tag-feature p { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--wd-text-2); max-width: 26ch; }
.wd-tag-feature-solida p { color: #FFE6D2; }

.wd-tag-foto { position: relative; border-radius: 26px; overflow: hidden; min-height: clamp(360px, 42vw, 620px); background: #F3EEE6; }
.wd-tag-foto img { width: 100%; height: 100%; object-fit: cover; }

.wd-tag-custom-wrap { max-width: 1200px; margin: 16px auto 0; }
.wd-tag-custom-card { background: var(--wd-card); border: 1px solid var(--wd-border); border-radius: 30px; padding: clamp(26px, 3vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(26px, 3vw, 44px); align-items: center; }

.wd-tag-preview-scene { position: relative; border-radius: 24px; padding: 40px 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 300px; background: #F5EDE1; }
.wd-tag-preview-box { position: relative; width: 240px; height: 240px; display: flex; justify-content: center; align-items: center; }
.wd-tag-preview-img { width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; }
.wd-tag-preview-overlay { position: relative; z-index: 1; text-align: center; width: 100%; margin-top: 100px; display: flex; flex-direction: column; align-items: center; }
.wd-tag-preview-nombre { font-size: 1.8rem; line-height: 1; color: rgba(0, 0, 0, .72); text-transform: uppercase; word-break: break-word; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; mix-blend-mode: multiply; margin-bottom: 4px; }
.wd-tag-preview-id { font-family: Arial, sans-serif; font-size: .7rem; font-weight: 700; color: rgba(0, 0, 0, .4); letter-spacing: 1px; }

.wd-tag-toggle { display: flex; width: fit-content; align-items: center; border: 2.5px solid var(--wd-text); border-radius: 50px; padding: 5px; margin-top: 22px; }
.wd-tag-pill { padding: 9px 24px; border-radius: 50px; font-size: 15px; font-weight: 700; font-family: Archivo, sans-serif; transition: background 220ms var(--wd-ease-out), color 220ms var(--wd-ease-out); white-space: nowrap; border: none; cursor: pointer; background: transparent; color: var(--wd-text); }
.wd-tag-pill.is-active { background: var(--wd-text); color: #fff; }
.wd-tag-tab { display: none; margin-top: 18px; }
.wd-tag-tab.is-active { display: block; }

.wd-tag-custom-controles .wd-kicker { margin-bottom: 0; }
.wd-tag-custom-titulo { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.03em; margin: 8px 0 0; color: var(--wd-text); }
.wd-tag-field { margin-top: 22px; }
.wd-tag-field label, .wd-tag-field-label { display: block; font-size: 13px; font-weight: 700; color: var(--wd-text-2); margin-bottom: 8px; }
#wd-tag-input { width: 100%; border: 1.5px solid var(--wd-border); background: var(--wd-bg); border-radius: 14px; padding: 14px 16px; font-size: 17px; font-weight: 700; color: var(--wd-text); outline: none; }
.wd-tag-cueros, .wd-tag-tipos { display: flex; gap: 10px; flex-wrap: wrap; }
.wd-tag-cueros button {
    display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 99px;
    font-family: Archivo, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer;
    border: 1.5px solid var(--wd-border); background: var(--wd-bg); color: var(--wd-text);
    transition: transform 140ms var(--wd-ease-out), border-color 160ms var(--wd-ease-out), background 160ms var(--wd-ease-out);
}
.wd-tag-cueros button.is-active { border-color: var(--wd-orange); background: #FFE8D5; }
.wd-tag-cueros button:active, .wd-tag-tipos button:active { transform: scale(0.96); }
.wd-tag-swatch { width: 20px; height: 20px; border-radius: 99px; display: block; flex: 0 0 auto; box-shadow: inset 0 1px 2px rgba(255, 255, 255, .4); }
.wd-tag-tipos button {
    padding: 10px 18px; border-radius: 99px; cursor: pointer; font-size: 15px; font-weight: 700;
    border: 1.5px solid var(--wd-border); background: var(--wd-bg); color: var(--wd-text);
    transition: transform 140ms var(--wd-ease-out), border-color 160ms var(--wd-ease-out), background 160ms var(--wd-ease-out);
}
.wd-tag-tipos button.is-active { border-color: var(--wd-orange); background: #FFE8D5; }

.wd-tag-cta-bar { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; flex-wrap: wrap; }
.wd-tag-cta-nota { font-size: 14px; font-weight: 600; color: var(--wd-muted); }

/* .GEN */

.wd-iadn-section { background: var(--wd-bg); padding: 18px 14px; }
.wd-iadn-card { position: relative; overflow: hidden; background: var(--wd-orange); border-radius: 38px; padding: clamp(30px, 4vw, 60px); }
.wd-iadn-blob-1 { position: absolute; top: -60px; left: -40px; width: 260px; height: 120px; border: 34px solid var(--wd-text); border-radius: 99px; opacity: .14; transform: rotate(-18deg); pointer-events: none; }
.wd-iadn-blob-2 { position: absolute; bottom: -70px; right: 34%; width: 300px; height: 140px; border: 34px solid var(--wd-cream); border-radius: 99px; opacity: .45; transform: rotate(12deg); pointer-events: none; }
.wd-iadn-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(30px, 4vw, 56px); align-items: center; max-width: 1160px; margin: 0 auto; }
.wd-iadn-kicker { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FFE0C9; }
.wd-iadn-grid h2 { font-size: clamp(36px, 5vw, 64px); line-height: .98; font-weight: 800; margin: 16px 0 0; color: var(--wd-cream); }
.wd-iadn-grid > div:first-child > p { font-size: 18px; line-height: 1.5; color: #FFEBDC; margin: 20px 0 0; max-width: 460px; }
.wd-iadn-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 0; }
.wd-iadn-tabs button {
    display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 99px;
    font-family: Archivo, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer;
    border: 1.5px solid rgba(255, 247, 238, .5); background: transparent; color: var(--wd-cream);
    transition: transform 140ms var(--wd-ease-out), background 160ms var(--wd-ease-out), color 160ms var(--wd-ease-out), border-color 160ms var(--wd-ease-out);
}
.wd-iadn-tabs button.is-active { border-color: var(--wd-cream); background: var(--wd-cream); color: var(--wd-orange-dark); }
.wd-iadn-tabs button:active { transform: scale(0.96); }

.wd-iadn-media-wrap { position: relative; padding: 0 0 40px; }
.wd-iadn-media { position: relative; border-radius: 30px; overflow: hidden; height: clamp(360px, 46vw, 520px); transform: rotate(2.5deg); box-shadow: 0 34px 70px -34px rgba(43, 18, 0, .5); }
.wd-iadn-media img { width: 100%; height: 100%; object-fit: cover; }
.wd-iadn-card-flotante { position: absolute; right: -8px; bottom: 0; max-width: 330px; background: var(--wd-card); border-radius: 22px; padding: 20px 22px; box-shadow: 0 26px 50px -26px rgba(43, 18, 0, .45); }
.wd-iadn-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wd-iadn-avatar { width: 30px; height: 30px; border-radius: 99px; background: var(--wd-orange); color: var(--wd-cream); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.wd-iadn-nombre { font-size: 14px; font-weight: 700; color: var(--wd-text); }
.wd-iadn-badge { margin-left: auto; background: var(--wd-bright); color: var(--wd-bright-text); border-radius: 99px; padding: 4px 10px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wd-iadn-respuesta { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--wd-text); transition: opacity 150ms var(--wd-ease-out); }
.wd-iadn-fuente { font-size: 13px; line-height: 1.45; color: var(--wd-muted); margin-top: 10px; transition: opacity 150ms var(--wd-ease-out); }
.wd-iadn-respuesta.is-swapping, .wd-iadn-fuente.is-swapping { opacity: 0; }

/* Precios */

.wd-precios-section { max-width: 1200px; margin: 0 auto; padding-top: 64px; padding-bottom: 24px; }
.wd-precios-header { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.wd-precios-header h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05; font-weight: 800; }
.wd-precios-header p { font-size: 18px; color: var(--wd-text-2); margin-top: 16px; }
.wd-precios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.wd-precio-card { background: var(--wd-card); border: 1px solid var(--wd-border); border-radius: 26px; padding: 32px; display: flex; flex-direction: column; }
.wd-precio-nombre { font-size: 20px; font-weight: 700; }
.wd-precio-detalle { font-size: 15px; color: var(--wd-muted); margin: 4px 0 20px; }
.wd-precio-valor { font-size: 46px; font-weight: 800; letter-spacing: -.03em; }
.wd-precio-periodo { font-size: 15px; color: var(--wd-muted); margin-bottom: 24px; }
.wd-precio-items { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--wd-text-2); margin-bottom: 28px; }
.wd-precio-cta { margin-top: auto; justify-content: center; }

.wd-precio-card-destacado { background: var(--wd-orange); border: none; color: var(--wd-cream); }
.wd-precio-card-destacado .wd-precio-valor { font-size: 34px; line-height: 1.1; }
.wd-precio-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wd-precio-tag { background: var(--wd-bright); color: var(--wd-bright-text); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; }
.wd-precio-card-destacado .wd-precio-detalle { color: #EBD6C4; }
.wd-precio-card-destacado .wd-precio-periodo { color: #EBD6C4; }
.wd-precio-items-claras { color: #F5E3D4; }

.wd-comparativa { margin: 24px 0 0; background: var(--wd-card); border: 1px solid var(--wd-border); border-radius: 26px; overflow-x: auto; }
.wd-comparativa-row { display: grid; grid-template-columns: minmax(150px, 2fr) repeat(3, minmax(70px, 1fr)); min-width: 480px; gap: 12px; align-items: center; padding: 16px 22px; }
.wd-comparativa-row:not(.wd-comparativa-header) { border-top: 1px solid var(--wd-border); }
.wd-comparativa-header { background: var(--wd-bg); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wd-muted); }
.wd-comparativa-header > div { text-align: center; }
.wd-comparativa-header > div:first-child { text-align: left; }
.wd-comparativa-feature { font-size: 15px; font-weight: 500; color: var(--wd-text); }
.wd-comparativa-row > div:not(.wd-comparativa-feature):not(:first-child) { text-align: center; font-size: 15px; font-weight: 700; }
.wd-is-check { color: var(--wd-orange); }
.wd-is-dash { color: var(--wd-muted); }

@media (max-width: 640px) {
    .wd-comparativa-row { grid-template-columns: minmax(100px, 1.3fr) repeat(3, minmax(46px, 1fr)); min-width: 0; padding: 14px 10px; gap: 6px; }
    .wd-comparativa-feature { font-size: 13px; }
    .wd-comparativa-row > div:not(.wd-comparativa-feature):not(:first-child) { font-size: 13px; overflow-wrap: break-word; hyphens: auto; }
    .wd-comparativa-header { font-size: 11px; }
}

@media (max-width: 380px) {
    .wd-comparativa-row { grid-template-columns: minmax(84px, 1.2fr) repeat(3, minmax(40px, 1fr)); padding: 12px 8px; gap: 4px; }
    .wd-comparativa-feature { font-size: 12px; }
    .wd-comparativa-row > div:not(.wd-comparativa-feature):not(:first-child) { font-size: 12px; }
    .wd-comparativa-header { font-size: 10px; letter-spacing: .03em; }
}

/* Nonprofits / Adopción */

.wd-nonprofits-section { padding: 56px 14px 0; }
.wd-nonprofits-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.wd-nonprofits-grid > .wd-adopcion-card { grid-column: 1; grid-row: 1; }

.wd-adopcion-card { position: relative; overflow: hidden; background: var(--wd-pink); border-radius: 34px; padding: clamp(30px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: flex-start; gap: 30px; min-height: clamp(400px, 40vw, 540px); }
.wd-adopcion-blob { position: absolute; bottom: -70px; right: -30px; width: 280px; height: 130px; border: 34px solid var(--wd-cream); border-radius: 99px; opacity: .16; transform: rotate(14deg); pointer-events: none; }
.wd-adopcion-top { position: relative; }
.wd-adopcion-top h2 { font-size: clamp(40px, 5.6vw, 74px); line-height: .95; letter-spacing: -.045em; font-weight: 800; margin: 18px 0 0; color: var(--wd-cream); text-transform: uppercase; }
.wd-adopcion-top h2 span { color: #FFD9E4; }
.wd-adopcion-bottom { position: relative; }
.wd-adopcion-bottom p { font-size: 17px; line-height: 1.45; color: #FFE1EA; margin: 0 0 22px; max-width: 44ch; }
.wd-adopcion-cta { display: block; text-align: center; background: var(--wd-cream); color: var(--wd-pink-dark) !important; padding: 18px 28px; border-radius: 99px; font-size: 17px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; max-width: 460px; }

.wd-adopcion-col { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 16px; }
.wd-adopcion-foto { position: relative; border-radius: 34px; overflow: hidden; flex: 0 0 auto; height: clamp(200px, 20vw, 280px); background: #F7E2E9; }
.wd-adopcion-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Esta foto comparte fila con .wd-programa-card — debe quedar tan alta como
   esa tarjeta de texto, no con su propia altura fija (la de .wd-adopcion-foto
   es para la fotito chica de arriba, no para esta). */
.wd-nonprofits-grid > .wd-adopcion-foto-grande { grid-column: 1; grid-row: 2; align-self: stretch; height: auto; }
.wd-adopcion-mini { background: var(--wd-pink); border-radius: 34px; padding: clamp(22px, 2.2vw, 30px); flex: 1; display: flex; flex-direction: column; justify-content: center; color: var(--wd-cream); }
/* "adopta cerca de tu casa" ahora se lee como título del bloque, no como
   una línea más al mismo nivel que "solicitud 100 % digital". */
.wd-adopcion-mini div:first-child { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; font-weight: 800; letter-spacing: -.01em; }
.wd-adopcion-mini-divider { height: 2px; background: rgba(255, 247, 238, .5); margin: 14px 0; }
.wd-adopcion-mini div:last-child { font-size: 14px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: #FFE1EA; }

/* "Wollo for Nonprofits": mismo tratamiento grande de texto/botón que
   .wd-adopcion-card (arriba), pero sobre fondo blanco/crema en vez de rosa. */
.wd-programa-card { background: var(--wd-cream); border: 1px solid #F6DCC6; border-radius: 34px; padding: clamp(30px, 3.4vw, 52px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; grid-column: 2; grid-row: 2; min-height: clamp(320px, 30vw, 420px); }
.wd-programa-texto { max-width: 100%; }
.wd-programa-titulo { font-size: clamp(40px, 5.6vw, 74px); font-weight: 800; letter-spacing: -.045em; text-transform: uppercase; line-height: .95; color: var(--wd-pink-dark); }
.wd-programa-subtitulo { font-size: 18px; font-weight: 700; color: var(--wd-orange-dark); margin: 16px 0 6px; }
.wd-programa-texto p { font-size: 17px; line-height: 1.5; color: var(--wd-text-2); max-width: 46ch; }
.wd-programa-cta { background: var(--wd-pink); color: var(--wd-cream) !important; padding: 18px 28px; border-radius: 99px; font-size: 17px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }

/* FAQ */

.wd-faq-section { max-width: 900px; margin: 0 auto; padding-top: 64px; padding-bottom: 64px; }
.wd-faq-section h2 { font-size: clamp(28px, 3.8vw, 40px); font-weight: 800; margin-bottom: 28px; text-align: center; }
.wd-faq-item { border-bottom: 1px solid var(--wd-border); padding: 8px 0; }
.wd-faq-item summary { cursor: pointer; padding: 14px 0; display: flex; align-items: center; gap: 20px; font-size: 19px; font-weight: 700; list-style: none; }
.wd-faq-item summary::-webkit-details-marker { display: none; }
.wd-faq-item summary::after { content: "+"; margin-left: auto; font-size: 26px; font-weight: 400; color: var(--wd-orange); display: inline-block; transition: transform 200ms var(--wd-ease-out); }
.wd-faq-item[open] summary::after { transform: rotate(45deg); }
.wd-faq-item p { font-size: 17px; line-height: 1.6; color: var(--wd-text-2); margin: 0 0 24px; max-width: 720px; }
.wd-faq-content { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 250ms var(--wd-ease-out); }
.wd-faq-item[open] .wd-faq-content { grid-template-rows: 1fr; }
.wd-faq-content > p { overflow: hidden; opacity: 0; transition: opacity 150ms var(--wd-ease-out); }
.wd-faq-item[open] .wd-faq-content > p { opacity: 1; transition-delay: 90ms; }

/* CTA final */

.wd-cta-final-section { background: var(--wd-orange); padding: 18px 14px 14px; margin: 40px 0 0; }
.wd-cta-final-card { position: relative; overflow: hidden; background: var(--wd-cream); border-radius: 38px; padding: clamp(34px, 4.4vw, 64px); }
.wd-cta-final-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 3.4vw, 52px); align-items: center; max-width: 1160px; margin: 0 auto; }
.wd-cta-final-titulo-naranja { font-size: clamp(32px, 4.6vw, 58px); line-height: 1; letter-spacing: -.035em; font-weight: 800; color: var(--wd-orange); }
.wd-cta-final-titulo-oscuro { font-size: clamp(24px, 3vw, 38px); line-height: 1.08; font-weight: 800; margin-top: 10px; color: var(--wd-orange-dark); }
.wd-cta-final-grid > div:first-child > p { font-size: 17px; line-height: 1.5; color: var(--wd-text-2); margin: 18px 0 30px; max-width: 470px; }
.wd-cta-final-botones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wd-cta-final-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.wd-cta-final-stat { background: #FBF1E6; border: 1px solid #F1DFCD; border-radius: 22px; padding: 22px 20px; transition: transform 200ms var(--wd-ease-out), box-shadow 200ms var(--wd-ease-out); }
.wd-cta-final-stat-valor { font-size: 30px; font-weight: 800; color: var(--wd-text); font-variant-numeric: tabular-nums; }
.wd-cta-final-stat-texto { font-size: 14px; line-height: 1.4; color: var(--wd-text-2); font-weight: 600; margin-top: 6px; }
.wd-cta-final-stat-destacado { background: var(--wd-orange); border-color: var(--wd-orange); }
.wd-cta-final-stat-destacado .wd-cta-final-stat-valor { color: var(--wd-cream); }
.wd-cta-final-stat-destacado .wd-cta-final-stat-texto { color: #FFE6D2; }

/* Marquee */

.wd-marquee-wrap { background: var(--wd-orange); padding: 0 0 6px; overflow: hidden; }
.wd-marquee { display: flex; width: max-content; animation: wd-marquee 34s linear infinite; font-size: clamp(18px, 2.2vw, 26px); font-weight: 700; color: var(--wd-orange-2); letter-spacing: -.01em; padding: 10px 0; }
.wd-marquee span { padding-right: 24px; white-space: nowrap; }
@keyframes wd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Footer */

.wd-footer { background: var(--wd-orange); color: var(--wd-cream); padding: 44px 28px 26px; }
.wd-footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 44px 32px; }
.wd-footer-col-cta { max-width: 420px; }
.wd-footer-logo { height: 32px; width: auto; margin-bottom: 18px; }
.wd-footer-col-cta p { font-size: 17px; line-height: 1.5; color: #EBD6C4; margin-bottom: 24px; }
.wd-footer-moneda-btn { margin-top: 18px; background: transparent; border: 1.5px solid #7A4A24; color: #FFE6D2; border-radius: 99px; padding: 9px 18px; font-family: Archivo, sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }
.wd-footer-titulo { font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.wd-footer-titulo-mt { margin-top: 30px; }
.wd-footer-contacto { display: flex; flex-direction: column; gap: 8px; margin-bottom: 30px; }
.wd-footer-contacto a, .wd-footer-legal a { color: #EBD6C4; font-size: 15px; }
.wd-footer-redes { display: flex; flex-direction: column; gap: 10px; }
.wd-footer-redes a { color: #EBD6C4; font-size: 15px; display: flex; align-items: center; gap: 12px; }
.wd-footer-red-icono { width: 26px; height: 26px; border-radius: 8px; background: #55290F; display: flex; align-items: center; justify-content: center; color: #FFA45C; flex: 0 0 auto; }
.wd-footer-red-proximamente { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #A78468; cursor: default; }
.wd-footer-legal { display: flex; flex-direction: column; gap: 8px; }
.wd-footer-bottom-wrap { max-width: 1200px; margin: 0 auto; }
.wd-footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 44px; padding-top: 24px; font-size: 13px; }
.wd-footer-bottom .wd-footer-copy:last-child { text-align: right; }
.wd-footer-redes-bottom { display: flex; align-items: center; justify-content: center; gap: 14px; }
.wd-footer-redes-bottom a, .wd-footer-red-proximamente-bottom { display: flex; color: #FFE6D2; }
.wd-footer-red-proximamente-bottom { opacity: .45; cursor: default; }
.wd-footer-copy { font-size: 13px; color: #FFFFFF; }
@media (max-width: 640px) {
    .wd-footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
    .wd-footer-bottom .wd-footer-copy:last-child { text-align: center; }
}

/* Animaciones (scroll reveal + hero on-load, mismo mecanismo que front-empresas.js) */

[data-we-reveal], [data-we-reveal-load] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms var(--wd-ease-out), transform 600ms var(--wd-ease-out);
}
[data-we-reveal].is-visible, [data-we-reveal-load].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-we-reveal-group] > [data-we-reveal]:nth-child(2) { transition-delay: 60ms; }
[data-we-reveal-group] > [data-we-reveal]:nth-child(3) { transition-delay: 120ms; }
[data-we-reveal-group] > [data-we-reveal]:nth-child(4) { transition-delay: 180ms; }

.wd-hero-pill[data-we-reveal-load] { transition-delay: 0ms; }
.wd-hero-h1[data-we-reveal-load] { transition-delay: 60ms; }
.wd-hero-texto[data-we-reveal-load] { transition-delay: 130ms; }
.wd-hero-cta-bar[data-we-reveal-load] { transition-delay: 200ms; }
.wd-hero-gratis[data-we-reveal-load] { transition-delay: 250ms; }
.wd-especies[data-we-reveal-load], .wd-especies-mobile[data-we-reveal-load] { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
    [data-we-reveal], [data-we-reveal-load] {
        transform: none;
        transition: opacity 300ms ease;
    }
    .wd-plataforma-card:hover, .wd-tag-feature:hover, .wd-rail-card:hover {
        transform: none;
    }
    .wd-marquee, .wd-words > span { animation: none; }
}

/* Responsive */

@media (max-width: 1060px) {
    .wd-only-desktop { display: none !important; }
    .wd-only-mobile { display: flex !important; }
    .wd-rail { scroll-snap-type: x mandatory; }
    /* El tab del logo queda pegado arriba a la izquierda en móvil (a
       diferencia del notch centrado de desktop), así que esa esquina de la
       tarjeta debe quedar cuadrada para que el tab se vea pegado a ella. */
    .wd-shell { border-radius: 0 34px 38px 0; }
    .wd-nav-cta.wd-only-mobile { padding: 10px 20px !important; font-size: 14px; }
    /* Flechas del carrusel de herramientas: pegadas a la derecha, con el
       hint "Desliza para verlas" chiquito debajo (antes se veían sueltas,
       envueltas a la izquierda por el flex-wrap del header). */
    .wd-herramientas-controles { flex-direction: column; align-items: flex-end; width: 100%; gap: 6px; }
    .wd-herramientas-arrows { order: 1; }
    .wd-herramientas-hint { order: 2; font-size: 12px; }
}

@media (max-width: 960px) {
    .wd-tag-bento { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .wd-tag-feature-ancho { flex-direction: column; align-items: flex-start; }
    .wd-tag-feature-ancho p { max-width: none; }
}

@media (max-width: 900px) {
    .wd-hero-pet { display: none; }
    .wd-hero-toprow { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 380px; margin: 0 auto 30px; gap: 10px; }
    .wd-moneda-pill, .wd-hero-social { position: static; width: auto; max-width: none; margin: 0; }
    .wd-hero-social { justify-content: flex-end; gap: 6px; }
    .wd-hero-social a { width: 36px; height: 36px; }
    .wd-moneda-pill { padding: 11px 14px; }
    .wd-hero-aviso { position: static; width: 100%; max-width: 380px; margin: 30px auto 0; }
    .wd-iadn-grid { grid-template-columns: 1fr; }
    .wd-nonprofits-grid { grid-template-columns: 1fr; }
    .wd-nonprofits-grid > .wd-adopcion-card,
    .wd-adopcion-col,
    .wd-nonprofits-grid > .wd-adopcion-foto-grande,
    .wd-programa-card { grid-column: 1; grid-row: auto; }
}

@media (max-width: 640px) {
    .wd-pad { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ===========================================================================
   Panel "Empresas" (modo profesional) — wem-*
   Segundo panel completo, tema oscuro, portado del mockup "Wollo para
   Empresas.dc.html". Coexiste en el DOM junto a .wd-wrap; front-duenos.js
   alterna cuál está visible (fade) con el toggle del hero. Prefijo propio
   para no chocar con las clases wd-* aunque ambos vivan en la misma página.
   =========================================================================== */

.wem-wrap {
    --wem-bg: #24242A;
    --wem-card: #15151A;
    --wem-card-2: #1D1D23;
    --wem-card-3: #101014;
    --wem-border: #26262C;
    --wem-border-2: #33333B;
    --wem-text: #F4F1EC;
    --wem-text-2: #9A9AA4;
    --wem-text-3: #71717C;
    --wem-text-4: #8A8A94;
    --wem-orange: #E2611C;
    --wem-orange-bright: #FF8A3D;
    --wem-cream: #FFF7EE;
    --wem-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    font-family: Archivo, system-ui, sans-serif;
    background: var(--wem-bg);
    color: var(--wem-text);
    -webkit-font-smoothing: antialiased;
    max-width: 100%;
    overflow-x: hidden;
}
.wem-wrap[hidden] { display: none; }

/* Transición entre paneles (dueños ⇄ empresas): fade puro, sin desplazamiento —
   pedido explícito de Carlos ("una transición suave desvanecida"). */
.wd-wrap, .wem-wrap {
    transition: opacity 260ms ease;
}
.wd-wrap.is-fading-out, .wem-wrap.is-fading-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .wd-wrap, .wem-wrap { transition: none; }
}

.wem-wrap * { box-sizing: border-box; }
.wem-wrap img { max-width: 100%; display: block; }
.wem-wrap a { color: var(--wem-orange-bright); text-decoration: none; }
.wem-wrap a:hover { color: var(--wem-cream); }
.wem-wrap h1, .wem-wrap h2 { letter-spacing: -.04em; margin: 0; }
.wem-wrap h3 { letter-spacing: -.03em; margin: 0; }
.wem-wrap p { margin: 0; }

.wem-only-desktop { display: flex; }
a.wem-only-desktop { display: inline-flex; }
.wem-only-mobile { display: none !important; }

.wem-pad { padding-left: 28px; padding-right: 28px; }

.wem-blob { position: absolute; top: -80px; right: -40px; width: 300px; height: 140px; border: 34px solid var(--wem-orange); border-radius: 99px; opacity: .12; transform: rotate(16deg); pointer-events: none; }

.wem-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 17px 32px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    font-family: Archivo, sans-serif;
    transition: transform 160ms var(--wem-ease-out), opacity 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.wem-btn:active { transform: scale(0.97); }
.wem-btn-primary { background: var(--wem-orange); color: var(--wem-cream); }
.wem-btn-primary:hover { color: var(--wem-cream); opacity: .88; }
.wem-btn-outline { border: 1px solid var(--wem-border-2); color: var(--wem-text); background: transparent; }
.wem-btn-outline:hover { color: var(--wem-text); opacity: .8; }
.wem-btn-cream { background: var(--wem-cream); color: #2A1206; }
.wem-btn-cream:hover { color: #2A1206; opacity: .88; }

.wem-kicker { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wem-orange-bright); margin-bottom: 14px; }
.wem-pulse-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--wem-orange); display: block; animation: wem-pulse 2s ease-in-out infinite; }
@keyframes wem-pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

/* Nav flotante */

.wem-nav-floating-outer {
    position: fixed;
    top: 12px;
    left: 14px;
    right: 14px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-26px) scale(.92);
    transition: opacity 300ms var(--wem-ease-out), transform 420ms var(--wem-ease-out);
}
.wem-nav-floating-outer.is-visible { opacity: 1; transform: translate(0, 0) scale(1); pointer-events: auto; }
.wem-nav-floating { width: 100%; max-width: 1160px; background: var(--wem-card); border: 1px solid var(--wem-border); border-radius: 30px; box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .6); padding: 9px 10px 9px 18px; display: flex; align-items: center; gap: 12px; }
.wem-nav-logo { height: 26px; width: auto; flex: 0 0 auto; }
.wem-nav-links { margin-left: auto; align-items: center; gap: 0; font-size: 15px; font-weight: 600; }
.wem-nav-links a { color: var(--wem-text); padding: 0 11px; white-space: nowrap; }
.wem-nav-login { color: var(--wem-orange-bright) !important; padding: 0 14px !important; margin-left: 6px; }
.wem-nav-cta { margin-left: auto; }

.wem-burger { width: 42px; height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; border: none; background: transparent; cursor: pointer; padding: 0; display: flex; flex-direction: column; }
.wem-burger span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--wem-text); position: relative; transition: transform 220ms var(--wem-ease-out), opacity 160ms ease; }
.wem-burger span + span { margin-top: 6px; }
.wem-burger.is-open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.wem-burger.is-open span:nth-child(2) { opacity: 0; }
.wem-burger.is-open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.wem-mobile-menu[hidden] { display: none; }
.wem-mobile-menu { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 1160px; background: var(--wem-card); border: 1px solid var(--wem-border); border-radius: 0 0 26px 26px; padding: 10px 8px 6px; font-size: 18px; font-weight: 600; animation: wem-sheet 240ms var(--wem-ease-out) both; }
.wem-mobile-menu a { color: var(--wem-text); padding: 11px 0; }
.wem-mobile-menu .wem-mobile-login { color: var(--wem-orange-bright); }
.wem-mobile-menu-overlay { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; border-top: none; border-radius: 0 0 22px 22px; }
@keyframes wem-sheet { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Header integrado */

.wem-header-band { background: var(--wem-bg); padding: 14px 14px 0; }

.wem-header-notch { align-items: flex-end; gap: 0; }
.wem-notch-nav { flex: 1; display: flex; align-items: center; gap: 0; font-size: 15px; font-weight: 600; padding: 0 10px 18px; flex-wrap: nowrap; }
.wem-notch-nav-left { justify-content: flex-start; }
.wem-notch-nav-right { justify-content: flex-end; }
.wem-notch-nav a { color: var(--wem-text); padding: 0 11px; white-space: nowrap; }
.wem-notch-nav a:hover { color: var(--wem-orange-bright); }
.wem-notch-login { color: var(--wem-orange-bright) !important; padding: 0 0 0 14px !important; }
.wem-notch-sep { width: 1px; height: 16px; background: var(--wem-border-2); display: block; }
.wem-notch-corner-left, .wem-notch-corner-right { width: 34px; height: 34px; background: var(--wem-card); flex: 0 0 auto; position: relative; overflow: hidden; }
.wem-notch-corner-left span, .wem-notch-corner-right span { position: absolute; inset: 0; background: var(--wem-bg); display: block; }
.wem-notch-corner-left span { border-bottom-right-radius: 34px; }
.wem-notch-corner-right span { border-bottom-left-radius: 34px; }
.wem-notch-tab { background: var(--wem-card); border-radius: 34px 34px 0 0; padding: 18px 40px; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.wem-notch-tab img { height: 32px; width: auto; }
.wem-notch-tab-sub { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wem-text-4); }

.wem-header-mobile-wrap { position: relative; }
.wem-header-mobile { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; }
.wem-header-mobile-logo { height: 26px; width: auto; margin: 0 auto; flex: 0 0 auto; }
.wem-header-mobile-cta { flex: 0 0 auto; padding: 12px 22px !important; font-size: 15px; }

.wem-shell { position: relative; overflow: hidden; background: var(--wem-card); border-radius: 34px 34px 38px 38px; padding: clamp(34px, 4vw, 62px) 16px clamp(30px, 3.4vw, 48px); }

.wem-moneda-pill { position: absolute; top: 24px; left: 24px; z-index: 3; display: flex; align-items: center; gap: 9px; border: 1px solid var(--wem-border-2); background: var(--wem-card-2); border-radius: 99px; padding: 12px 20px; font-family: Archivo, sans-serif; font-size: 15px; font-weight: 700; color: var(--wem-text); cursor: pointer; }
.wem-moneda-pill-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wem-text-3); }

.wem-hero-content { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; padding: 0 14px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wem-hero-pill { position: relative; display: flex; align-items: center; gap: 4px; border: 2px solid var(--wem-border-2); border-radius: 99px; padding: 5px; background: var(--wem-card-2); }
.wem-hero-pill .wd-pill-thumb { background: var(--wem-cream); }
.wem-hero-pill .wd-pill-opt { color: #C9C9D2; }
.wem-hero-pill .wd-pill-opt:hover { color: var(--wem-text); }
.wem-hero-pill .wd-pill-opt.is-active { color: var(--wem-bg); }
.wem-hero-pill .wd-pill-opt.is-active:hover { color: var(--wem-bg); }
.wem-hero-h1 { font-size: clamp(38px, 6vw, 82px); line-height: .98; letter-spacing: -.045em; font-weight: 800; margin: 28px 0 0; color: var(--wem-text); max-width: 20ch; }
.wem-hero-texto { font-size: clamp(18px, 2vw, 22px); line-height: 1.4; font-weight: 500; color: var(--wem-text-2); margin: 24px 0 0; max-width: 44ch; }
.wem-hero-texto em { font-style: normal; color: var(--wem-text); font-weight: 700; }
.wem-hero-cta-bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 32px 0 0; }
.wem-hero-gratis { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 24px 0 0; font-size: 15px; font-weight: 600; color: var(--wem-text-3); }

.wem-hero-aviso { position: absolute; right: 24px; bottom: 24px; max-width: 320px; background: var(--wem-card-2); border: 1px solid var(--wem-border); border-radius: 20px; padding: 16px 18px; text-align: left; }
.wem-hero-aviso-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.wem-hero-aviso-tipo { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wem-orange-bright); }
.wem-hero-aviso-hace { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--wem-text-3); }
.wem-hero-aviso-texto { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--wem-text); }

.wem-marquee-wrap { padding: 22px 0 8px; overflow: hidden; }
.wem-marquee { display: flex; width: max-content; animation: wem-marquee 34s linear infinite; font-size: clamp(16px, 2vw, 22px); font-weight: 700; color: var(--wem-border-2); letter-spacing: -.01em; }
.wem-marquee span { padding-right: 24px; white-space: nowrap; }
@keyframes wem-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Plataforma */

.wem-plataforma-band { background: var(--wem-bg); }
.wem-plataforma { max-width: 1200px; margin: 0 auto; padding: 56px 30px 64px; }
.wem-plataforma h2 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.05; font-weight: 800; margin: 0 auto; max-width: 900px; text-align: center; color: var(--wem-cream); }
.wem-plataforma-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 44px 0 0; }
.wem-plataforma-card { background: var(--wem-cream); border: 1px solid var(--wem-cream); border-radius: 24px; padding: 28px; }
.wem-plataforma-kicker { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wem-orange); }
.wem-plataforma-card-titulo { font-size: 23px; font-weight: 700; margin: 14px 0 10px; color: #2A1206; }
.wem-plataforma-card p { font-size: 16px; line-height: 1.5; color: #5A3A22; }

/* Soluciones (carrusel) */

.wem-soluciones { padding: 8px 0 24px; }
.wem-soluciones-header { max-width: 1200px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wem-soluciones-header h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; font-weight: 800; flex: 1; min-width: 260px; text-align: center; color: var(--wem-text); }
.wem-soluciones-controles { display: flex; align-items: center; gap: 14px; padding-top: 6px; }
.wem-soluciones-hint { font-size: 14px; font-weight: 600; color: var(--wem-text-3); }
.wem-soluciones-controles button { width: 46px; height: 46px; border-radius: 99px; border: 1px solid var(--wem-border-2); background: transparent; color: var(--wem-text); font-size: 18px; font-weight: 700; cursor: pointer; font-family: Archivo, sans-serif; }
#wem-rail-next { background: var(--wem-cream); border-color: var(--wem-cream); color: var(--wem-bg); }

.wem-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px 28px; cursor: grab; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wem-rail::-webkit-scrollbar { display: none; }
.wem-rail:active { cursor: grabbing; }
.wem-rail-card { scroll-snap-align: center; flex: 0 0 auto; width: min(92vw, 1080px); background: var(--wem-card); border: 1px solid var(--wem-border); border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); user-select: none; }
.wem-rail-texto { padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.wem-rail-numero { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--wem-orange-bright); }
.wem-rail-texto h3 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.02; font-weight: 800; margin: 16px 0 14px; color: var(--wem-text); }
.wem-rail-para { font-size: 15px; font-weight: 700; color: var(--wem-orange-bright); margin: 0 0 12px; }
.wem-rail-texto p { font-size: 18px; line-height: 1.5; color: var(--wem-text-2); max-width: 44ch; margin: 0 0 26px; }
.wem-rail-texto .wem-btn { align-self: flex-start; }
.wem-rail-demo { background: var(--wem-card-3); border-left: 1px solid var(--wem-border); padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.wem-rail-demo-kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wem-text-3); }
.wem-rail-demo-dato { font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--wem-text); }
.wem-rail-demo-texto { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--wem-text-2); }
.wem-rail-demo-sep { height: 1px; background: var(--wem-border); margin: 6px 0; }
.wem-rail-bullets { display: flex; flex-direction: column; gap: 10px; }
.wem-rail-bullets div { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 600; color: #C9C9D2; }
.wem-rail-bullets span { width: 20px; height: 20px; border-radius: 99px; background: #2A1A10; color: var(--wem-orange-bright); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 2px; }

.wem-rail-dots { max-width: 1200px; margin: 0 auto; display: flex; gap: 8px; justify-content: center; }
.wem-rail-dots button { width: 10px; height: 10px; border-radius: 99px; border: none; padding: 0; cursor: pointer; background: var(--wem-border); transition: width .25s ease, background .25s ease; }
.wem-rail-dots button.is-active { width: 32px; background: var(--wem-orange); }

/* .gen */

.wem-gen-section { padding: 56px 14px 0; }
.wem-gen-card { position: relative; overflow: hidden; background: var(--wem-orange); border-radius: 38px; padding: clamp(30px, 4vw, 60px); max-width: 1400px; margin: 0 auto; }
.wem-gen-card .wem-blob { top: auto; bottom: -70px; right: -30px; border-color: var(--wem-cream); opacity: .2; }
.wem-gen-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(30px, 4vw, 56px); align-items: center; max-width: 1160px; margin: 0 auto; }
.wem-gen-kicker { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FFE0C9; }
.wem-gen-grid h2 { font-size: clamp(34px, 4.8vw, 62px); line-height: .98; font-weight: 800; margin: 16px 0 0; color: var(--wem-cream); }
.wem-gen-grid > div:first-child > p { font-size: 18px; line-height: 1.5; color: #FFEBDC; margin: 20px 0 0; max-width: 46ch; }
.wem-gen-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 0; }
.wem-gen-tabs button { padding: 12px 20px; border-radius: 99px; font-family: Archivo, sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; border: 1.5px solid rgba(255, 247, 238, .5); background: transparent; color: var(--wem-cream); }
.wem-gen-tabs button.is-active { border-color: var(--wem-cream); background: var(--wem-cream); color: #2A1206; }
.wem-gen-card-flotante { background: var(--wem-card); border: 1px solid var(--wem-border); border-radius: 26px; padding: clamp(24px, 2.6vw, 34px); }
.wem-gen-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.wem-gen-avatar { width: 32px; height: 32px; border-radius: 99px; background: var(--wem-orange); color: var(--wem-cream); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.wem-gen-nombre { font-size: 15px; font-weight: 700; color: var(--wem-text); }
.wem-gen-badge { margin-left: auto; background: #2A1A10; color: var(--wem-orange); border-radius: 99px; padding: 5px 12px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wem-gen-respuesta { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.32; font-weight: 700; color: var(--wem-text); transition: opacity 150ms var(--wem-ease-out); }
.wem-gen-fuente { font-size: 14px; line-height: 1.45; color: var(--wem-text-4); margin-top: 14px; transition: opacity 150ms var(--wem-ease-out); }
.wem-gen-respuesta.is-swapping, .wem-gen-fuente.is-swapping { opacity: 0; }

/* Ahorro */

.wem-ahorro-section { max-width: 1200px; margin: 0 auto; padding: 64px 28px 0; }
.wem-ahorro-header { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.wem-ahorro-header h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.04; font-weight: 800; margin: 12px 0 0; color: var(--wem-text); }
.wem-ahorro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }
.wem-ahorro-form { display: flex; flex-direction: column; gap: 16px; }
.wem-ahorro-card { background: var(--wem-card); border: 1px solid var(--wem-border); border-radius: 24px; padding: 26px; }
.wem-ahorro-card-kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wem-text-3); }
.wem-ahorro-presets { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.wem-ahorro-presets button { padding: 11px 18px; border-radius: 99px; font-family: Archivo, sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid var(--wem-border-2); background: var(--wem-card-2); color: #C9C9D2; }
.wem-ahorro-presets button.is-active { border-color: var(--wem-orange); background: var(--wem-orange); color: var(--wem-cream); }
.wem-ahorro-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wem-ahorro-row span:first-child { font-size: 15px; font-weight: 600; color: #C9C9D2; }
.wem-ahorro-row-mt { margin-top: 24px; }
.wem-ahorro-val { font-size: 22px; font-weight: 800; color: var(--wem-text); }
.wem-ahorro-num { width: 76px; text-align: center; border: 1px solid var(--wem-border-2); border-radius: 12px; padding: 8px 10px; font-family: Archivo, sans-serif; font-size: 18px; font-weight: 700; color: var(--wem-text); background: var(--wem-card-2); }
.wem-ahorro-nota { font-size: 14px; color: var(--wem-text-3); margin: 16px 0 0; }
.wem-ahorro-nota strong { color: var(--wem-text); font-weight: 700; }

.wem-ahorro-resultado { background: var(--wem-card-3); border: 1px solid var(--wem-border); border-radius: 26px; padding: clamp(26px, 3vw, 38px); position: sticky; top: 90px; }
.wem-ahorro-resultado-kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wem-text-3); }
.wem-ahorro-resultado-valor { font-size: clamp(38px, 5vw, 62px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--wem-orange-bright); margin: 16px 0 6px; }
.wem-ahorro-resultado-moneda { font-size: 15px; color: var(--wem-text-4); }
.wem-ahorro-sep { height: 1px; background: var(--wem-border); margin: 26px 0; }
.wem-ahorro-mini-cards { display: flex; flex-direction: column; gap: 18px; }
.wem-ahorro-mini-card { display: flex; align-items: baseline; gap: 14px; }
.wem-ahorro-mini-card span:first-child { font-size: 30px; font-weight: 800; color: var(--wem-text); letter-spacing: -.03em; min-width: 92px; }
.wem-ahorro-mini-card span:last-child { font-size: 15px; line-height: 1.4; color: var(--wem-text-2); }
.wem-ahorro-cta { display: flex; justify-content: center; text-align: center; margin: 30px 0 0; width: 100%; }

.wem-fill { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; width: 100%; }
.wem-fill::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--wem-border-2); }
.wem-fill::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 99px; background: var(--wem-orange); border: 3px solid var(--wem-bg); cursor: pointer; box-shadow: 0 4px 12px -4px rgba(226, 97, 28, .9); }
.wem-fill::-moz-range-track { height: 6px; border-radius: 99px; background: var(--wem-border-2); }
.wem-fill::-moz-range-thumb { width: 24px; height: 24px; border-radius: 99px; background: var(--wem-orange); border: 3px solid var(--wem-bg); cursor: pointer; }

/* Precios */

.wem-precios-section { max-width: 1200px; margin: 0 auto; padding: 64px 28px 0; }
.wem-precios-header { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.wem-precios-header h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.04; font-weight: 800; color: var(--wem-text); }
.wem-precios-header p { font-size: 18px; color: var(--wem-text-2); margin: 16px 0 0; }
.wem-precios-badge { display: inline-flex; align-items: center; gap: 12px; margin: 24px auto 0; background: var(--wem-card-2); border: 1px solid var(--wem-border); border-radius: 99px; padding: 12px 22px; text-align: left; }
.wem-precios-badge strong { font-size: 15px; font-weight: 700; color: var(--wem-text); }
.wem-precios-badge span:last-child { font-size: 15px; color: var(--wem-text-2); }

.wem-precios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.wem-precio-card { background: var(--wem-card); border: 1px solid var(--wem-border); border-radius: 26px; padding: 32px; display: flex; flex-direction: column; }
.wem-precio-nombre { font-size: 20px; font-weight: 700; color: var(--wem-text); }
.wem-precio-detalle { font-size: 15px; color: var(--wem-text-3); margin: 4px 0 20px; }
.wem-precio-valor { font-size: 46px; font-weight: 800; letter-spacing: -.03em; color: var(--wem-text); }
.wem-precio-periodo { font-size: 15px; color: var(--wem-text-3); margin-bottom: 24px; }
.wem-precio-items { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--wem-text-2); margin-bottom: 28px; }
.wem-precio-cta { margin-top: auto; justify-content: center; text-align: center; }
.wem-precio-card-destacado { background: var(--wem-orange); border-color: var(--wem-orange); color: var(--wem-cream); }
.wem-precio-card-destacado .wem-precio-nombre { color: var(--wem-cream); }
.wem-precio-card-destacado .wem-precio-detalle { color: #FFE6D2; }
.wem-precio-card-destacado .wem-precio-valor { color: var(--wem-cream); }
.wem-precio-card-destacado .wem-precio-periodo { color: #FFE6D2; }
.wem-precio-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wem-precio-tag { background: rgba(255, 247, 238, .2); color: var(--wem-cream); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; }
.wem-precio-items-claras { color: #FFEFE2; }

.wem-comparativa { margin: 20px 0 0; background: var(--wem-card); border: 1px solid var(--wem-border); border-radius: 26px; overflow: hidden; }
.wem-comparativa-row { display: grid; grid-template-columns: minmax(150px, 2fr) repeat(3, minmax(70px, 1fr)); gap: 12px; align-items: center; padding: 16px 22px; }
.wem-comparativa-row:not(.wem-comparativa-header) { border-top: 1px solid var(--wem-border); }
.wem-comparativa-header { background: var(--wem-card-3); font-weight: 800; color: var(--wem-text-3); }
.wem-comparativa-feature { font-size: 15px; font-weight: 600; color: #C9C9D2; }
.wem-comparativa-row > div:not(.wem-comparativa-feature):not(:first-child) { text-align: center; font-size: 16px; font-weight: 700; }
.wem-comparativa-row.wem-comparativa-header > div { text-align: center; font-size: 14px; }
.wem-comparativa-row.wem-comparativa-header > div:first-child { text-align: left; }
.is-check { color: var(--wem-orange-bright); }
.is-dash { color: #4A4A52; }

/* FAQ */

.wem-faq-section { max-width: 900px; margin: 0 auto; padding: 64px 28px 0; }
.wem-faq-section h2 { font-size: clamp(28px, 3.8vw, 40px); font-weight: 800; margin-bottom: 28px; text-align: center; color: var(--wem-text); }
.wem-faq-item { border-bottom: 1px solid var(--wem-border); }
.wem-faq-item summary { cursor: pointer; padding: 22px 0; display: flex; align-items: center; gap: 20px; font-size: 19px; font-weight: 700; list-style: none; color: var(--wem-text); }
.wem-faq-item summary::-webkit-details-marker { display: none; }
.wem-faq-item summary::after { content: "+"; margin-left: auto; font-size: 26px; font-weight: 400; color: var(--wem-orange-bright); display: inline-block; transition: transform 200ms var(--wem-ease-out); }
.wem-faq-item[open] summary::after { transform: rotate(45deg); }
.wem-faq-content { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 250ms var(--wem-ease-out); }
.wem-faq-item[open] .wem-faq-content { grid-template-rows: 1fr; }
.wem-faq-content > p { font-size: 17px; line-height: 1.6; color: var(--wem-text-2); margin: 0 0 24px; max-width: 720px; overflow: hidden; opacity: 0; transition: opacity 150ms var(--wem-ease-out); }
.wem-faq-item[open] .wem-faq-content > p { opacity: 1; transition-delay: 90ms; }

/* CTA final */

.wem-cta-final-section { padding: 64px 14px 14px; }
.wem-cta-final-card { position: relative; overflow: hidden; background: var(--wem-card); border: 1px solid var(--wem-border); border-radius: 38px; padding: clamp(34px, 4.4vw, 64px); max-width: 1400px; margin: 0 auto; }
.wem-cta-final-card .wem-blob { top: -50px; right: -30px; width: 240px; height: 110px; border-width: 30px; opacity: .14; }
.wem-cta-final-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 3.4vw, 52px); align-items: center; max-width: 1160px; margin: 0 auto; }
.wem-cta-final-titulo-naranja { font-size: clamp(32px, 4.6vw, 58px); line-height: 1; font-weight: 800; color: var(--wem-orange-bright); }
.wem-cta-final-titulo-claro { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.06; font-weight: 800; margin: 10px 0 0; color: var(--wem-text); }
.wem-cta-final-grid > div:first-child > p { font-size: 17px; line-height: 1.5; color: var(--wem-text-2); margin: 18px 0 30px; max-width: 470px; }
.wem-cta-final-botones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wem-cta-final-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.wem-cta-final-stat { background: var(--wem-card-2); border: 1px solid var(--wem-border); border-radius: 22px; padding: 22px 20px; }
.wem-cta-final-stat-valor { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--wem-text); }
.wem-cta-final-stat-texto { font-size: 14px; line-height: 1.4; color: var(--wem-text-2); font-weight: 600; margin-top: 6px; }
.wem-cta-final-stat-destacado { background: var(--wem-orange); border-color: var(--wem-orange); }
.wem-cta-final-stat-destacado .wem-cta-final-stat-valor { color: var(--wem-cream); }
.wem-cta-final-stat-destacado .wem-cta-final-stat-texto { color: #FFE6D2; }

/* Footer */

.wem-footer { background: var(--wem-bg); color: var(--wem-text); padding: 44px 28px 26px; }
.wem-footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 44px 32px; }
.wem-footer-col-cta { max-width: 420px; }
.wem-footer-logo { height: 30px; width: auto; margin-bottom: 14px; }
.wem-footer-titulo-grande { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.03em; color: var(--wem-orange-bright); }
.wem-footer-col-cta p { font-size: 17px; line-height: 1.5; color: var(--wem-text-2); margin: 12px 0 24px; }
.wem-footer-titulo { font-size: 17px; font-weight: 800; margin-bottom: 14px; color: var(--wem-text); }
.wem-footer-titulo-mt { margin-top: 30px; }
.wem-footer-contacto { display: flex; flex-direction: column; gap: 8px; margin-bottom: 30px; }
.wem-footer-contacto a, .wem-footer-legal a, .wem-footer-redes a { color: var(--wem-text-2); font-size: 15px; }
.wem-footer-redes { display: flex; flex-direction: column; gap: 10px; }
.wem-footer-red-proximamente { color: var(--wem-text-2); font-size: 15px; opacity: .45; cursor: default; }
.wem-footer-legal { display: flex; flex-direction: column; gap: 8px; }
.wem-footer-bottom-wrap { max-width: 1200px; margin: 0 auto; }
.wem-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--wem-border); font-size: 13px; color: var(--wem-text-3); }
.wem-footer-copy { font-size: 13px; color: var(--wem-text-3); }
.wem-moneda-btn { background: transparent; border: 1px solid var(--wem-border-2); color: #C9C9D2; border-radius: 99px; padding: 8px 16px; font-family: Archivo, sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }

/* Hover lift + botones de selección: mismo lenguaje de micro-interacción que el resto del sitio */
@media (hover: hover) and (pointer: fine) {
    .wem-plataforma-card, .wem-precio-card, .wem-cta-final-stat {
        transition: transform 200ms var(--wem-ease-out), border-color 200ms var(--wem-ease-out);
    }
    .wem-plataforma-card:hover { transform: translateY(-3px); border-color: var(--wem-orange); }
    .wem-rail-card { transition: transform 250ms var(--wem-ease-out); }
    .wem-rail-card:hover { transform: translateY(-4px); }
}
.wem-ahorro-presets button, .wem-rail-dots button, .wem-gen-tabs button {
    transition: transform 140ms var(--wem-ease-out), background 160ms var(--wem-ease-out), color 160ms var(--wem-ease-out), border-color 160ms var(--wem-ease-out);
}
.wem-ahorro-presets button:active { transform: scale(0.96); }

.wem-cta-final-stat-valor[data-we-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .wem-plataforma-card:hover, .wem-rail-card:hover { transform: none; }
}

/* Responsive */

@media (max-width: 1060px) {
    .wem-only-desktop { display: none !important; }
    .wem-only-mobile { display: flex !important; }
    .wem-rail { scroll-snap-type: x mandatory; }
}

@media (max-width: 900px) {
    .wem-hero-aviso { position: static; width: 100%; max-width: 380px; margin: 30px auto 0; }
    .wem-moneda-pill { position: static; margin: 0 auto 20px; }
    .wem-ahorro-resultado { position: static; }
}

@media (max-width: 640px) {
    .wem-pad { padding-left: 18px !important; padding-right: 18px !important; }
    .wem-comparativa-row { grid-template-columns: minmax(110px, 1.4fr) repeat(3, minmax(50px, 1fr)); padding: 14px 16px; gap: 8px; }
}