/* ============================================================
   Stoki · la web de presentación (stoki.es), «Entrar a mi negocio»
   y las páginas legales.
   ------------------------------------------------------------
   Segunda versión (21-10-2026). Jesús quería algo en la línea de las webs
   de programas para negocios de ahora (blanco, letra grande y el programa
   a la vista), pero sin parecerse a ninguna. Lo propio de Stoki:
     · verde petróleo y el amarillo de una ETIQUETA DE PRECIO, que es lo que
       se ve en cualquier tienda;
     · el TPV de verdad dibujado en una tablet, con su «✓ Cobrado» colgado
       como una etiqueta (lo único que se mueve, una vez, al cargar);
     · nada de opiniones ni cifras inventadas.

   Aquí la página SÍ baja: es una web, no el TPV (la regla de no hacer
   scroll es del mostrador). Cortes por ancho, nunca por alto.
   ============================================================ */

:root {
    --w-fondo: #FFFFFF;
    --w-gris: #F4F3F0;           /* superficies: franjas, tarjetas de muestra */
    --w-linea: #E3E1DC;
    --w-tinta: #16181D;
    --w-suave: #585D68;          /* 6,6:1 sobre blanco */
    --w-marca: #0E6E63;          /* verde petróleo: 5,9:1 con texto blanco */
    --w-marca-osc: #0A544B;
    --w-marca-claro: #E2F1EE;
    --w-etiqueta: #FFD84D;       /* amarillo de etiqueta de precio */
    --w-ok: #15803D;
    --w-r: 20px;
    --w-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --w-sans: 'Figtree', system-ui, sans-serif;
    --w-ancho: 1200px;

    /* Los colores del propio programa, solo dentro de las pantallas dibujadas. */
    --p-marca: #9A4A20; --p-suave: #F5E6DA; --p-tinta: #3A2619; --p-papel: #FFFCF8; --p-linea: #ECDCCD;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.w {
    margin: 0; background: var(--w-fondo); color: var(--w-tinta);
    font: 400 17px/1.6 var(--w-sans);
    -webkit-font-smoothing: antialiased;
}
.w a { color: var(--w-marca); }
.w a:hover { color: var(--w-marca-osc); }
.w :focus-visible { outline: 3px solid var(--w-marca); outline-offset: 3px; border-radius: 8px; }
.w-envoltura { max-width: var(--w-ancho); margin: 0 auto; padding: 0 28px; }
.w-saltar { position: absolute; left: -999px; top: 8px; background: var(--w-tinta); color: #fff; padding: 8px 14px; z-index: 9; }
.w-saltar:focus { left: 8px; }

/* ---------- Cabecera ---------- */
.w-cabecera { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.w-cabecera .w-envoltura { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.w-logo { display: inline-flex; align-items: center; gap: 10px; font: 800 28px/1 var(--w-display); color: var(--w-tinta) !important; text-decoration: none; letter-spacing: -.03em; }
.w-logo::before {   /* la etiqueta de precio, con su agujero */
    content: ''; width: 26px; height: 18px; background: var(--w-etiqueta);
    clip-path: polygon(0 50%, 28% 0, 100% 0, 100% 100%, 28% 100%);
    -webkit-mask: radial-gradient(circle at 30% 50%, #0000 2.6px, #000 3px);
            mask: radial-gradient(circle at 30% 50%, #0000 2.6px, #000 3px);
    transform: rotate(-12deg);
}
.w-menu { display: flex; gap: 26px; margin-left: 16px; align-items: center; }
.w-menu a, .w-entrar-link { color: var(--w-tinta); text-decoration: none; font-weight: 500; font-size: 15px; }
.w-menu a:hover, .w-entrar-link:hover { color: var(--w-marca); }
.w-menu a[aria-current="page"] { color: var(--w-marca); font-weight: 600; }
.w-menu-acciones { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.w-menu-acciones .w-btn { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
.w-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* El menú del móvil: un <details>, así funciona también sin JavaScript. */
.w-menu-movil { display: none; position: relative; }
.w-menu-movil summary { list-style: none; cursor: pointer; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--w-linea); display: grid; place-items: center; }
.w-menu-movil summary::-webkit-details-marker { display: none; }
.w-menu-movil summary span, .w-menu-movil summary span::before, .w-menu-movil summary span::after { display: block; width: 18px; height: 2px; background: var(--w-tinta); border-radius: 2px; position: relative; content: ''; }
.w-menu-movil summary span::before { position: absolute; top: -6px; }
.w-menu-movil summary span::after { position: absolute; top: 6px; }
.w-menu-movil nav { position: absolute; right: 0; top: 56px; background: #fff; border: 1px solid var(--w-linea); border-radius: 16px; padding: 8px; min-width: 240px;
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .25); display: flex; flex-direction: column; }
.w-menu-movil nav a { padding: 12px 14px; border-radius: 10px; color: var(--w-tinta); text-decoration: none; font-weight: 500; }
.w-menu-movil nav a:hover { background: var(--w-gris); }

/* ---------- Botones ---------- */
.w-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 26px; border-radius: 14px; border: 2px solid var(--w-marca);
    font: 600 16px/1 var(--w-sans); text-decoration: none; cursor: pointer;
    background: var(--w-marca); color: #fff !important;
}
.w-btn:hover { background: var(--w-marca-osc); border-color: var(--w-marca-osc); }
.w-btn.w-btn-hueco { background: #fff; color: var(--w-tinta) !important; border-color: var(--w-linea); }
.w-btn.w-btn-hueco:hover { border-color: var(--w-tinta); }

/* ---------- Portada ---------- */
.w-portada .w-envoltura {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 88px;
}
.w-portada h1 {
    font: 800 clamp(46px, 6vw, 80px)/1 var(--w-display); letter-spacing: -.025em;
    margin: 0 0 24px; max-width: 12ch;
}
.w-portada .w-entrada { font-size: 20px; line-height: 1.55; color: var(--w-suave); max-width: 30em; margin: 0 0 32px; }
.w-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.w-sirve { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; padding: 0; font-size: 15px; color: var(--w-suave); }
.w-sirve li { display: flex; align-items: center; gap: 8px; }
.w-sirve li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--w-marca-claro) center / 10px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%230E6E63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* La tablet con el TPV dibujado. Imita el de verdad (pos_view.php): fichas
   a la izquierda y el ticket a la derecha, con los colores del programa. */
.w-escena { position: relative; padding: 18px 18px 40px 0; }
.w-tablet {
    background: #1d1f24; border-radius: 30px; padding: 14px;
    box-shadow: 0 40px 70px -40px rgba(14, 40, 36, .55), 0 0 0 1px rgba(0, 0, 0, .06);
}
.w-pantalla { background: var(--p-papel); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 1.55fr 1fr; min-height: 340px; font-family: var(--w-sans); color: var(--p-tinta); }
.w-pantalla .pv-izq { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pv-cab { display: flex; justify-content: space-between; align-items: baseline; }
.pv-cab b { font: 600 20px/1 'Cormorant Garamond', Georgia, serif; }
.pv-cab span { font-size: 11px; color: #8a7666; }
.pv-buscar { height: 30px; border-radius: 10px; background: #fff; border: 1px solid var(--p-linea); font-size: 11px; color: #a08f80; display: flex; align-items: center; padding: 0 10px; }
.pv-fichas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv-ficha { background: #fff; border: 1px solid var(--p-linea); border-radius: 12px; padding: 8px; font: 400 11px/1.25 var(--w-sans); color: var(--p-tinta); text-align: left; cursor: pointer; }
.pv-ficha:hover { border-color: var(--p-marca); }
.pv-ficha.pv-toque { animation: pv-toque .35s ease; }
@keyframes pv-toque { 50% { transform: scale(.94); background: var(--p-suave); } }
.pv-ficha i { display: block; height: 44px; border-radius: 8px; margin-bottom: 6px; font: normal 600 20px/44px 'Cormorant Garamond', Georgia, serif; text-align: center; color: var(--p-marca); background: var(--p-suave); }
.pv-ficha b { display: block; font-weight: 600; margin-top: 2px; }
.w-pantalla .pv-der { background: #fff; border-left: 1px solid var(--p-linea); display: flex; flex-direction: column; }
.pv-tk { background: var(--p-marca); color: #fff; font-size: 12px; font-weight: 600; padding: 10px 12px; }
.pv-lineas { padding: 8px 12px; font-size: 12px; flex: 1; }
.pv-lineas { overflow: hidden; }
.pv-lineas p { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 0; padding: 6px 0; border-bottom: 1px dashed var(--p-linea); }
.pv-lineas .pv-vacio { border: 0; color: #a08f80; justify-content: center; padding-top: 30px; }
.pv-quitar { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--p-linea); background: #fff; color: var(--p-marca); font: 600 13px/1 var(--w-sans); cursor: pointer; margin-left: 4px; padding: 0; }
.pv-pago { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 12px; }
.pv-pago button { border: 1px solid var(--p-linea); background: #fff; border-radius: 8px; padding: 6px; font: 600 11px/1 var(--w-sans); color: var(--p-tinta); cursor: pointer; }
.pv-pago button[aria-checked="true"] { background: var(--p-suave); border-color: var(--p-marca); color: var(--p-marca); }
.pv-total { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; font-size: 11px; }
.pv-total b { font: 700 22px/1 var(--w-sans); }
.pv-cobrar { margin: 0 12px 12px; background: var(--p-marca); color: #fff; border: 0; border-radius: 10px; text-align: center; font: 600 13px/1 var(--w-sans); padding: 12px; cursor: pointer; }
.pv-cobrar:disabled { opacity: .45; cursor: default; }
.w-demo-pista { margin: 0 0 12px; font-size: 14px; color: var(--w-suave); display: none; }
.js .w-demo-pista { display: block; }

/* «✓ Cobrado»: la etiqueta que cuelga de la tablet. Lo único que se mueve. */
.w-colgante {
    position: absolute; right: -6px; bottom: 6px;
    background: var(--w-etiqueta); color: var(--w-tinta);
    padding: 14px 22px 14px 40px; font: 800 22px/1.1 var(--w-display); letter-spacing: -.02em;
    clip-path: polygon(0 50%, 18px 0, 100% 0, 100% 100%, 18px 100%);
    -webkit-mask: radial-gradient(circle at 24px 50%, #0000 5px, #000 5.5px);
            mask: radial-gradient(circle at 24px 50%, #0000 5px, #000 5.5px);
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .18));
    transform: rotate(-6deg); transform-origin: 24px 50%;
    animation: w-colgar 1.1s cubic-bezier(.2, 1.4, .4, 1) .5s both;
}
.w-colgante small { display: block; font: 600 13px/1.3 var(--w-sans); letter-spacing: 0; opacity: .8; }
@keyframes w-colgar { from { transform: rotate(-38deg) translateY(-30px); opacity: 0; } to { transform: rotate(-6deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .w-colgante { animation: none; } }
/* Con JavaScript la etiqueta sale al cobrar en la demo, no al cargar. */
.js .w-colgante { animation: none; }
.js .w-colgante.w-colgante-fuera { opacity: 0; transform: rotate(-38deg) translateY(-30px); pointer-events: none; }
.js .w-colgante.w-colgante-sale { animation: w-colgar .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@media (prefers-reduced-motion: reduce) { .js .w-colgante.w-colgante-sale { animation: none; opacity: 1; transform: rotate(-6deg); } }

/* ---------- Para quién (franja corta) ---------- */
.w-quien { border-top: 1px solid var(--w-linea); border-bottom: 1px solid var(--w-linea); }
.w-quien .w-envoltura { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; padding-top: 24px; padding-bottom: 24px; }
.w-quien p { margin: 0; font-weight: 600; }
.w-quien ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; color: var(--w-suave); }

/* ---------- Entrar a mi negocio (franja y página) ---------- */
.w-entrar .w-envoltura { padding-top: 0; padding-bottom: 0; }
.w-entrar-caja {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center;
    background: var(--w-marca-claro); border-radius: var(--w-r); padding: 36px 40px; margin: 0 0 8px;
}
.w-entrar h2 { font: 800 32px/1.05 var(--w-display); letter-spacing: -.03em; margin: 0 0 6px; }
.w-entrar p { margin: 0; color: var(--w-suave); }
.w-buscar { display: flex; gap: 10px; }
.w-buscar input {
    flex: 1; min-width: 0; min-height: 54px; padding: 0 18px; border-radius: 14px;
    border: 2px solid var(--w-linea); background: #fff; color: var(--w-tinta); font: 400 17px var(--w-sans);
}
.w-buscar input:focus { outline: none; border-color: var(--w-marca); box-shadow: 0 0 0 4px rgba(14, 110, 99, .15); }
.w-buscar .w-btn { min-height: 54px; }
.w-ayuda-campo { font-size: 14px; color: var(--w-suave); margin-top: 8px; }

/* ---------- Secciones ---------- */
.w-seccion { padding: 104px 0; }
.w-seccion h2 { font: 800 clamp(34px, 4.4vw, 54px)/1.02 var(--w-display); letter-spacing: -.025em; margin: 0 0 16px; max-width: 16ch; }
.w-seccion .w-intro { color: var(--w-suave); font-size: 19px; max-width: 34em; margin: 0 0 56px; }
.w-seccion.w-seguida { padding-top: 0; }

/* Qué hace: filas que alternan texto y una pantalla dibujada. */
.w-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 40px 0; }
.w-fila + .w-fila { border-top: 1px solid var(--w-linea); }
.w-fila:nth-child(even) .w-muestra { order: -1; }
.w-fila h3 { font: 800 30px/1.08 var(--w-display); letter-spacing: -.03em; margin: 0 0 12px; }
.w-fila > div > p { color: var(--w-suave); margin: 0 0 18px; max-width: 32em; }
.w-puntos { list-style: none; margin: 0; padding: 0; }
.w-puntos li { padding: 6px 0 6px 26px; position: relative; }
.w-puntos li::before { content: ''; position: absolute; left: 0; top: 14px; width: 12px; height: 8px; background: var(--w-etiqueta);
    clip-path: polygon(0 50%, 30% 0, 100% 0, 100% 100%, 30% 100%); }
.w-muestra { background: var(--w-gris); border-radius: var(--w-r); padding: 28px; min-height: 260px; display: flex; align-items: center; justify-content: center; }
.w-muestra > div { width: 100%; max-width: 420px; background: var(--p-papel); border-radius: 14px; box-shadow: 0 24px 40px -30px rgba(0, 0, 0, .35); color: var(--p-tinta); font-size: 12px; overflow: hidden; }

/* Muestra: agenda por profesional. */
.ag-cab, .ag-cuerpo { display: grid; grid-template-columns: 40px repeat(3, 1fr); }
.ag-cab span { padding: 10px 6px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--p-linea); }
.ag-cuerpo { grid-template-rows: repeat(6, 30px); position: relative; }
.ag-hora { grid-column: 1; font-size: 10px; color: #a08f80; padding: 2px 6px; border-top: 1px solid #f1e6dc; }
.ag-cita { border-radius: 8px; margin: 2px 4px; padding: 4px 6px; font-size: 10.5px; line-height: 1.2; border-left: 3px solid; overflow: hidden; }
.ag-cita b { display: block; font-size: 11px; }
.ag-a { background: #F3E3F0; border-color: #A0437F; } .ag-b { background: #E1EEF7; border-color: #2F6E9E; } .ag-c { background: #E6F2E4; border-color: #3C7D3A; }

/* Muestra: el cierre de caja. */
.cj { padding: 18px 20px; }
.cj h4 { margin: 0 0 12px; font: 600 20px/1 'Cormorant Garamond', Georgia, serif; }
.cj p { display: flex; justify-content: space-between; margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--p-linea); font-size: 13px; }
.cj .cj-ok { margin-top: 14px; border: 0; background: #E4F3E8; color: var(--w-ok); border-radius: 10px; padding: 10px 12px; font-weight: 600; justify-content: center; }

/* Muestra: el recordatorio por WhatsApp, en un móvil. */
.w-muestra .mv { max-width: 280px; background: #ECE5DD; border-radius: 26px; border: 8px solid #1d1f24; padding: 14px 12px 18px; }
.mv-cab { font-size: 12px; font-weight: 600; color: #1d1f24; text-align: center; margin-bottom: 12px; }
.mv-burbuja { background: #fff; border-radius: 10px 10px 10px 2px; padding: 10px 12px; font-size: 13px; line-height: 1.4; color: #1d1f24; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.mv-burbuja small { display: block; text-align: right; color: #8a8a8a; font-size: 10px; margin-top: 4px; }
.mv-resp { background: #D9FDD3; border-radius: 10px 10px 2px 10px; padding: 8px 12px; font-size: 13px; margin: 8px 0 0 auto; width: fit-content; color: #1d1f24; }

/* Lo que no cambia: la franja verde, la única de color del sitio. */
.w-promesas { background: var(--w-marca); color: #fff; margin-top: 96px; }
.w-promesas h2 { color: #fff; }
.w-promesas .w-intro { color: #CFE8E3; }
.w-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .25); }
.w-tres > div { padding: 32px 32px 0 0; }
.w-tres > div + div { padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, .25); }
.w-tres h3 { font: 800 26px/1.1 var(--w-display); letter-spacing: -.02em; margin: 0 0 10px; color: #fff; }
.w-tres p { margin: 0; color: #D7ECE8; }

/* Cómo empezar: aquí sí van números, porque es un orden. */
.w-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: paso; }
.w-pasos li { counter-increment: paso; }
.w-pasos li::before {
    content: counter(paso); display: inline-flex; align-items: center; justify-content: flex-end;
    width: 64px; height: 40px; padding-right: 14px; margin-bottom: 16px;
    background: var(--w-etiqueta); font: 800 22px/1 var(--w-display);
    clip-path: polygon(0 50%, 16px 0, 100% 0, 100% 100%, 16px 100%);
}
.w-pasos b { display: block; font: 800 22px/1.15 var(--w-display); letter-spacing: -.02em; margin-bottom: 6px; }
.w-pasos span { color: var(--w-suave); }

/* Precios (solo si el superadmin los enciende). */
.w-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.w-plan { padding: 32px; border: 1px solid var(--w-linea); border-radius: var(--w-r); }
.w-plan h3 { font: 800 24px/1.1 var(--w-display); margin: 0 0 6px; letter-spacing: -.02em; }
.w-plan .w-cifra { font: 800 48px/1 var(--w-display); letter-spacing: -.04em; margin: 18px 0 4px; }
.w-plan small { color: var(--w-suave); }
.w-plan p { color: var(--w-suave); margin: 14px 0 0; font-size: 16px; }
.w-nota { color: var(--w-suave); font-size: 15px; margin-top: 16px; }

/* Preguntas. */
.w-preguntas { max-width: 820px; }
.w-preguntas details { border-top: 1px solid var(--w-linea); }
.w-preguntas details:last-child { border-bottom: 1px solid var(--w-linea); }
.w-preguntas summary { cursor: pointer; padding: 22px 0; font: 600 19px/1.3 var(--w-sans); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.w-preguntas summary::-webkit-details-marker { display: none; }
.w-preguntas summary::after { content: '+'; font: 400 28px/1 var(--w-sans); color: var(--w-marca); }
.w-preguntas details[open] summary::after { content: '−'; }
.w-preguntas details p { margin: 0 0 22px; color: var(--w-suave); max-width: 64ch; }

/* Último empujón. */
.w-final { padding: 0 0 104px; }
.w-final .w-envoltura > div { background: var(--w-tinta); color: #fff; border-radius: 28px; padding: 72px 48px; text-align: center; }
.w-final h2 { font: 800 clamp(34px, 4.4vw, 54px)/1.02 var(--w-display); letter-spacing: -.025em; margin: 0 auto 14px; max-width: 16ch; color: #fff; }
.w-final .w-intro { color: #C9CCD3; font-size: 19px; margin: 0 auto 32px; max-width: 30em; }
.w-final .w-acciones { justify-content: center; }
.w-final .w-btn-hueco { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .35); }
.w-final .w-btn-hueco:hover { border-color: #fff; }
.w-contacto { margin-top: 22px; color: #C9CCD3; }
.w-final .w-contacto a { color: #fff; }

/* ---------- Pie ---------- */
.w-pie { border-top: 1px solid var(--w-linea); padding: 56px 0 32px; font-size: 15px; color: var(--w-suave); }
.w-pie .w-envoltura { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.w-pie-marca p { margin: 12px 0 0; max-width: 24em; }
.w-pie nav { display: flex; flex-direction: column; gap: 10px; }
.w-pie nav b { color: var(--w-tinta); font-weight: 600; }
.w-pie a { color: var(--w-suave); text-decoration: none; }
.w-pie a:hover { color: var(--w-marca); }
.w-pie .w-pie-fin { display: block; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--w-linea); font-size: 14px; }

/* WhatsApp siempre a mano, abajo a la derecha. Verde de WhatsApp: es el que la gente reconoce. */
.w-whatsapp {
    position: fixed; right: 20px; bottom: 20px; z-index: 6; display: inline-flex; align-items: center; gap: 10px;
    background: #1F8F4E; color: #fff !important; text-decoration: none; font-weight: 600; font-size: 15px;
    padding: 12px 18px 12px 14px; border-radius: 999px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45);
}
.w-whatsapp svg { width: 24px; height: 24px; fill: currentColor; }
.w-whatsapp:hover { background: #18733F; }

/* ---------- Movimiento: las pantallas dibujadas se rellenan al llegar ---------- */
.js [data-revela] .rv { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.js [data-revela] .rv-sello { opacity: 0; transform: scale(.85) rotate(-3deg); transition: opacity .35s ease, transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.js [data-revela].w-visto .rv, .js [data-revela].w-visto .rv-sello { opacity: 1; transform: none; }
.js [data-revela].w-visto .rv:nth-of-type(2) { transition-delay: .12s; }
.js [data-revela].w-visto .rv:nth-of-type(3) { transition-delay: .24s; }
.js [data-revela].w-visto .rv:nth-of-type(4) { transition-delay: .36s; }
.js [data-revela].w-visto .rv:nth-of-type(5) { transition-delay: .48s; }
.js [data-revela].w-visto .rv:nth-of-type(n+6) { transition-delay: .6s; }
.js [data-revela].w-visto .rv-sello { transition-delay: .7s; }
@media (prefers-reduced-motion: reduce) {
    .js [data-revela] .rv, .js [data-revela] .rv-sello { opacity: 1; transform: none; transition: none; }
}

/* ---------- Fotos: los dos tipos de negocio ---------- */
.w-sectores .w-envoltura { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.w-sector { position: relative; display: block; border-radius: var(--w-r); overflow: hidden; aspect-ratio: 16 / 10; color: #fff !important; text-decoration: none; }
.w-sector img { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; transition: transform .6s ease; }
.w-sector:hover img { transform: scale(1.04); }
.w-sector::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 20, 18, .8), rgba(10, 20, 18, 0) 58%); }
.w-sector span { position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 1; font-size: 16px; }
.w-sector b { display: block; font: 800 30px/1.05 var(--w-display); letter-spacing: -.025em; margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .w-sector img { transition: none; } .w-sector:hover img { transform: none; } }

/* ---------- Empezar + formulario corto ---------- */
.w-empezar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.w-pasos.w-pasos-lista { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.w-pasos-lista li { display: grid; grid-template-columns: 80px 1fr; column-gap: 8px; }
.w-pasos-lista li::before { grid-row: span 2; margin: 0; }
.w-pide-caja { background: var(--w-gris); border-radius: var(--w-r); padding: 32px; }
.w-pide-caja h3 { font: 800 26px/1.1 var(--w-display); letter-spacing: -.02em; margin: 0 0 18px; }
.w-pide { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.w-campo { display: flex; flex-direction: column; gap: 6px; }
.w-campo-ancho, .w-pide > .w-btn, .w-pide > .w-letra-pequena { grid-column: 1 / -1; }
.w-campo label { font-weight: 600; font-size: 14px; }
.w-campo small { color: var(--w-suave); font-size: 13px; }
.w-campo input, .w-campo select, .w-campo textarea {
    min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--w-linea);
    background: #fff; color: var(--w-tinta); font: 400 16px var(--w-sans); width: 100%;
}
.w-campo textarea { min-height: 110px; resize: vertical; }
.w-campo input:focus, .w-campo select:focus, .w-campo textarea:focus { outline: none; border-color: var(--w-marca); box-shadow: 0 0 0 4px rgba(14, 110, 99, .15); }
.w-letra-pequena { margin: 0; font-size: 13px; color: var(--w-suave); }
.w-trampa { display: none; }   /* display:none y no fuera de pantalla: lo que no se pinta, el navegador no lo autorrellena */
.w-hoja-form { max-width: 820px; }
.w-hecho { background: var(--w-marca-claro); border-radius: var(--w-r); padding: 40px; }
.w-hecho h1 { margin-top: 0; }

/* ---------- Páginas de sector, funciones, precios y nosotros ---------- */
.w-cab-pagina .w-envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 40px; padding-bottom: 72px; }
.w-cab-pagina h1 { font: 800 clamp(42px, 5.4vw, 72px)/1 var(--w-display); letter-spacing: -.03em; margin: 0 0 20px; max-width: 13ch; }
.w-cab-pagina .w-entrada { font-size: 20px; color: var(--w-suave); margin: 0 0 28px; max-width: 30em; }
.w-cab-pagina img { width: 100%; height: auto; border-radius: var(--w-r); display: block; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
.w-cab-pagina.w-sin-foto .w-envoltura { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
.w-cab-pagina.w-sin-foto h1 { max-width: 18ch; }

.w-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--w-linea); }
.w-rejilla > div { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--w-linea); }
.w-rejilla > div:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--w-linea); }
.w-rejilla h3 { font: 800 21px/1.15 var(--w-display); letter-spacing: -.015em; margin: 0 0 8px; }
.w-rejilla p { margin: 0; color: var(--w-suave); font-size: 16px; }

.w-grupo { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; padding: 48px 0; border-top: 1px solid var(--w-linea); }
.w-grupo:first-of-type { border-top: 0; padding-top: 0; }
.w-grupo h2 { font: 800 30px/1.08 var(--w-display); letter-spacing: -.025em; margin: 0 0 10px; }
.w-grupo > div:first-child p { color: var(--w-suave); margin: 0; }
.w-grupo dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin: 0; }
.w-grupo dt { font-weight: 700; margin-bottom: 4px; }
.w-grupo dd { margin: 0; color: var(--w-suave); font-size: 16px; }
.w-chapa { display: inline-block; font-size: 12px; font-weight: 600; background: var(--w-marca-claro); color: var(--w-marca-osc); border-radius: 6px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }

.w-tabla-caja { overflow-x: auto; border: 1px solid var(--w-linea); border-radius: var(--w-r); }
.w-tabla { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 560px; }
.w-tabla th, .w-tabla td { padding: 14px 16px; border-bottom: 1px solid var(--w-linea); text-align: center; }
.w-tabla tr:last-child td { border-bottom: 0; }
.w-tabla th:first-child, .w-tabla td:first-child { text-align: left; }
.w-tabla thead th { font: 800 20px/1.1 var(--w-display); letter-spacing: -.015em; vertical-align: bottom; }
.w-tabla thead small { display: block; font: 600 15px/1.3 var(--w-sans); color: var(--w-marca); margin-top: 6px; letter-spacing: 0; }
.w-tabla td small { display: block; color: var(--w-suave); font-size: 13px; }
.w-si { color: var(--w-ok); font-weight: 700; }
.w-no { color: #9aa0aa; }

.w-nosotros { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.w-nosotros img { width: 100%; height: auto; border-radius: var(--w-r); display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.w-nosotros > div > p { font-size: 18px; max-width: 36em; }
.w-subtitulo { font: 800 30px/1.08 var(--w-display); letter-spacing: -.025em; margin: 40px 0 16px; }
.w-rejilla.w-rejilla-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-rejilla.w-rejilla-dos > div { padding: 24px 24px 24px 0; border-left: 0; }
.w-rejilla.w-rejilla-dos > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--w-linea); }

/* ---------- Páginas sueltas: Entrar y legales ---------- */
.w-hoja { max-width: 780px; margin: 0 auto; padding: 40px 28px 104px; }
.w-hoja h1 { font: 800 clamp(40px, 5vw, 60px)/1 var(--w-display); margin: 8px 0 14px; letter-spacing: -.04em; }
.w-hoja h2 { font: 800 26px/1.15 var(--w-display); letter-spacing: -.02em; margin: 44px 0 10px; }
.w-hoja p, .w-hoja li { max-width: 68ch; }
.w-hoja .w-intro { color: var(--w-suave); font-size: 19px; margin: 0 0 28px; }
.w-hoja dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.w-hoja dt { font-weight: 600; }
.w-hoja dd { margin: 0; }
.w-pendiente { background: #FCEFD9; color: #8A4B0B; border-radius: 6px; padding: 1px 8px; font-size: .92em; }
.w-aviso { border-radius: 14px; padding: 14px 18px; margin: 18px 0; background: #FBE5E2; color: #8F1D1D; }
.w-varios { list-style: none; padding: 0; margin: 18px 0; }
.w-varios li { border-top: 1px solid var(--w-linea); padding: 14px 0; }
.w-varios li:last-child { border-bottom: 1px solid var(--w-linea); }
.w-varios small { display: block; color: var(--w-suave); }

/* ---------- Por ancho, nunca por alto ---------- */
@media (max-width: 1120px) {
    .w-menu { display: none; }
    .w-menu-movil { display: block; }
}
@media (max-width: 960px) {
    .w-portada .w-envoltura, .w-entrar-caja, .w-fila, .w-pasos, .w-empezar, .w-cab-pagina .w-envoltura,
    .w-sectores .w-envoltura, .w-nosotros, .w-grupo { grid-template-columns: minmax(0, 1fr); }
    .w-fila:nth-child(even) .w-muestra { order: 0; }
    .w-fila, .w-empezar, .w-grupo { gap: 28px; }
    .w-tres { grid-template-columns: minmax(0, 1fr); }
    .w-tres > div, .w-tres > div + div { padding: 24px 0; border-left: 0; }
    .w-tres > div + div { border-top: 1px solid rgba(255, 255, 255, .25); }
    .w-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .w-rejilla > div, .w-rejilla > div:not(:nth-child(3n + 1)) { padding: 24px 24px 24px 0; border-left: 0; }
    .w-rejilla > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--w-linea); }
    .w-pie .w-envoltura { grid-template-columns: 1fr 1fr; }
    .w-pie-marca { grid-column: 1 / -1; }
    .w-seccion { padding: 72px 0; }
    .w-portada .w-envoltura { padding-top: 24px; gap: 40px; }
}
@media (max-width: 640px) {
    body.w { font-size: 16px; }
    .w-envoltura { padding: 0 16px; }
    .w-cabecera .w-envoltura { gap: 12px; min-height: 68px; }
    .w-entrar-link { display: none; }
    .w-menu-acciones { gap: 10px; }
    .w-logo { font-size: 24px; }
    .w-buscar { flex-direction: column; }
    .w-acciones .w-btn { flex: 1 1 100%; }
    .w-entrar-caja, .w-pide-caja, .w-hecho { padding: 24px 20px; }
    .w-pide { grid-template-columns: minmax(0, 1fr); }
    .w-pantalla { grid-template-columns: 1fr; }
    .w-pantalla .pv-der { border-left: 0; border-top: 1px solid var(--p-linea); }
    .w-escena { padding-right: 0; }
    .w-colgante { right: 4px; font-size: 18px; }
    .w-muestra { padding: 16px; }
    .w-sector b { font-size: 24px; }
    .w-sector span { left: 18px; right: 18px; bottom: 16px; font-size: 15px; }
    .w-rejilla { grid-template-columns: minmax(0, 1fr); }
    .w-rejilla > div, .w-rejilla > div:nth-child(even) { padding: 22px 0; border-left: 0; }
    .w-rejilla.w-rejilla-dos { grid-template-columns: minmax(0, 1fr); }
    .w-rejilla.w-rejilla-dos > div, .w-rejilla.w-rejilla-dos > div:nth-child(even) { padding: 22px 0; border-left: 0; }
    .w-grupo dl { grid-template-columns: minmax(0, 1fr); }
    .w-final .w-envoltura > div { padding: 48px 20px; border-radius: 20px; }
    .w-hoja { padding: 24px 16px 72px; }
    .w-hoja dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .w-hoja dd { margin-bottom: 10px; }
    .w-whatsapp span { display: none; }
    .w-whatsapp { padding: 14px; }
    .w-pie .w-envoltura { grid-template-columns: 1fr; }
}