/* =====================================================================
   WSSaaS · Landing design system — "continuidad de WhatsApp"
   Paleta y lenguaje visual inspirados en WhatsApp (verde-teal, burbujas
   de chat, patrón doodle) para que el visitante sienta que la plataforma
   es una extensión natural de la app que ya usa todos los días.
   ===================================================================== */

:root {
    /* WhatsApp core palette */
    --wa-green: #25d366;          /* logo / acentos vivos */
    --wa-green-strong: #00a884;   /* CTA principal (WhatsApp Web actual) */
    --wa-teal: #128c7e;
    --wa-teal-dark: #075e54;      /* headers clásicos */
    --wa-blue-tick: #53bdeb;      /* doble check de leído / enlaces */
    --wa-bubble-out: #d9fdd3;     /* burbuja enviada */
    --wa-bubble-in: #ffffff;      /* burbuja recibida */
    --wa-chat-bg: #efeae2;        /* fondo del chat (beige) */

    /* Neutrales (tipografía estilo WhatsApp) */
    --ink: #111b21;
    --ink-soft: #3b4a54;
    --muted: #667781;
    --line: #e9edef;
    --panel: #f0f2f5;             /* paneles laterales WhatsApp Web */

    --radius: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(11, 20, 26, .08);
    --shadow-md: 0 8px 28px rgba(7, 94, 84, .12);
    --shadow-lg: 0 24px 60px rgba(7, 94, 84, .18);
    --maxw: 1140px;
}

html { scroll-behavior: smooth; }

body {
    color: var(--ink);
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande",
        Arial, Ubuntu, Cantarell, "Fira Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #fff;
}

.container { max-width: var(--maxw); }

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--ink); }
a { color: var(--wa-teal); }

/* The famous WhatsApp chat doodle, used as a subtle texture on dark/teal
   sections so the page reads as a continuation of the chat screen. */
.wa-doodle-bg {
    background-color: var(--wa-teal-dark);
    background-image: url("/img/wa-doodle-light.svg");
    background-size: 412px;
    background-repeat: repeat;
}

/* ---------------------------------------------------------------- Nav */
.landing-nav {
    border-bottom: 1px solid var(--line);
    height: 68px;
    line-height: 68px;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: saturate(180%) blur(8px);
}
.landing-nav .nav-wrapper { height: 68px; line-height: 68px; }
.landing-nav .brand-logo { display: inline-flex; align-items: center; gap: .55rem; }
.landing-nav .brand-logo .wa-logo { width: 34px; height: 34px; }
.landing-nav .brand-name { color: var(--ink); font-size: 1.15rem; font-weight: 800; letter-spacing: -.4px; }
.landing-nav ul a.nav-link { color: var(--ink-soft); font-weight: 600; transition: color .15s; }
.landing-nav ul a.nav-link:hover { color: var(--wa-green-strong); }
.landing-nav .sidenav-trigger i { color: var(--wa-teal-dark); line-height: 68px; height: 68px; }

/* WhatsApp-style pill buttons */
.btn, .btn-large {
    border-radius: 999px;
    text-transform: none;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: none;
}
.btn-wa, .btn-wa:hover, .btn-wa:focus {
    background: var(--wa-green-strong);
    color: #fff;
}
.btn-wa:hover { box-shadow: 0 6px 18px rgba(0, 168, 132, .35); }
.btn-wa-ghost {
    background: transparent;
    color: var(--wa-teal-dark);
    border: 1.5px solid #c9d6d2;
}
.btn-wa-ghost:hover { background: rgba(0, 168, 132, .08); color: var(--wa-teal-dark); }
.btn-wa-light { background: #fff; color: var(--wa-teal-dark); }
.btn-wa-light:hover { background: #f3fff6; color: var(--wa-teal-dark); }

/* ------------------------------------------------------------- Hero */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(37, 211, 102, .18), transparent 60%),
        linear-gradient(160deg, #ffffff 0%, #f0faf4 55%, #e6f6ec 100%);
    padding: 4.5rem 1rem 4rem;
}
.hero .container { position: relative; z-index: 2; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(0, 168, 132, .10);
    color: var(--wa-teal-dark);
    font-weight: 700; font-size: .82rem;
    padding: .4rem .9rem; border-radius: 999px;
    border: 1px solid rgba(0, 168, 132, .18);
    margin-bottom: 1.1rem;
}
.hero h1 {
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    line-height: 1.1; letter-spacing: -1px; margin: 0 0 1rem;
}
.hero h1 .hl { color: var(--wa-green-strong); }
.hero p.lead { font-size: 1.18rem; color: var(--ink-soft); max-width: 540px; margin: 0 0 1.8rem; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hero .trust { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .9rem; color: var(--muted); margin-top: 1.4rem; }
.hero .trust span { display: inline-flex; align-items: center; gap: .35rem; }
.hero .trust .ok { color: var(--wa-green-strong); font-weight: 800; }

/* ------------------------------------------------ Chat mockup (hero) */
.wa-chat {
    max-width: 380px;
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 8px solid #0b141a;
    background: var(--wa-chat-bg);
}
.wa-chat-top {
    background: var(--wa-teal-dark);
    color: #fff;
    display: flex; align-items: center; gap: .65rem;
    padding: .7rem .9rem;
}
.wa-chat-top .ava {
    width: 38px; height: 38px; border-radius: 50%;
    background: #25d366; color: #075e54;
    display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
    flex: 0 0 auto;
}
.wa-chat-top .who { line-height: 1.15; }
.wa-chat-top .who b { font-size: .95rem; }
.wa-chat-top .who small { color: #a7d3cd; font-size: .72rem; }
.wa-chat-top .acts { margin-left: auto; color: #cfe7e3; font-size: 1.1rem; letter-spacing: .25rem; }
.wa-chat-body {
    background-image: url("/img/wa-doodle.svg");
    background-color: var(--wa-chat-bg);
    background-size: 340px;
    padding: 1rem .9rem 1.2rem;
    display: flex; flex-direction: column; gap: .55rem;
    min-height: 340px;
}
.wa-msg {
    max-width: 82%;
    padding: .5rem .7rem .35rem;
    border-radius: 10px;
    font-size: .9rem; line-height: 1.32;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .12);
    position: relative;
    color: #111b21;
}
.wa-msg .t { display: block; font-size: .65rem; color: #667781; text-align: right; margin-top: .15rem; }
.wa-msg.in { background: var(--wa-bubble-in); align-self: flex-start; border-top-left-radius: 2px; }
.wa-msg.out { background: var(--wa-bubble-out); align-self: flex-end; border-top-right-radius: 2px; }
.wa-msg.out .t::after { content: " ✓✓"; color: var(--wa-blue-tick); }
.wa-msg .bot-tag {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .66rem; font-weight: 800; color: var(--wa-green-strong);
    margin-bottom: .15rem; text-transform: uppercase; letter-spacing: .4px;
}
.wa-quick { display: flex; flex-wrap: wrap; gap: .35rem; align-self: flex-end; max-width: 82%; justify-content: flex-end; }
.wa-quick a {
    background: #fff; color: var(--wa-teal); border: 1px solid #d7e3df;
    font-size: .78rem; font-weight: 600; padding: .3rem .6rem; border-radius: 999px;
}
.wa-chat-input {
    background: var(--panel);
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .7rem;
}
.wa-chat-input .field {
    flex: 1; background: #fff; border-radius: 999px;
    padding: .5rem .9rem; color: var(--muted); font-size: .85rem;
}
.wa-chat-input .send {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--wa-green-strong); color: #fff;
    display: grid; place-items: center; flex: 0 0 auto; font-size: 1.1rem;
}

/* --------------------------------------------------------- Sections */
.section-pad { padding: 4.5rem 1rem; }
.section-tag { text-align: center; color: var(--wa-green-strong); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: .8rem; margin-bottom: .5rem; }
.section-title { text-align: center; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.5px; margin: 0 0 .6rem; }
.section-sub { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto 2.8rem; font-size: 1.05rem; }
.alt-bg { background: var(--panel); }
.tint-bg { background: linear-gradient(180deg, #f0faf4, #ffffff); }

/* Flex grid for card rows — Materialize columns float, so cards of uneven
   height "catch" on each other and break the grid. Flex keeps clean rows and
   equal heights. */
.cards-row { display: flex; flex-wrap: wrap; }
.cards-row.center-cards { justify-content: center; }
.cards-row > [class*="col"] { display: flex; }
.cards-row > [class*="col"] > .feature-card,
.cards-row > [class*="col"] > .usecase,
.cards-row > [class*="col"] > .price-card { width: 100%; }

/* Feature cards */
.feature-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(0, 168, 132, .35); }
.feature-ic {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; font-size: 1.6rem;
    background: rgba(0, 168, 132, .10); margin-bottom: 1rem;
}
.feature-card h5 { font-size: 1.12rem; font-weight: 700; margin: 0 0 .4rem; }
.feature-card p { color: var(--ink-soft); margin: 0; }

/* Steps */
.step { text-align: center; padding: 1rem; }
.step .num {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--wa-green-strong); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.25rem; margin-bottom: .7rem;
    box-shadow: 0 6px 16px rgba(0, 168, 132, .35);
}
.step h5 { font-size: 1.1rem; }
.step p { color: var(--ink-soft); }

/* Use cases */
.usecase {
    height: 100%; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.5rem; border-left: 4px solid var(--wa-green-strong);
}
.usecase .uc-emoji { font-size: 1.8rem; }
.usecase h5 { font-size: 1.08rem; margin: .5rem 0 .35rem; }
.usecase p { color: var(--ink-soft); margin: 0; }

/* Integrations strip */
.int-grid { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.int-chip {
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: .6rem 1.1rem; font-weight: 700; color: var(--ink-soft);
    display: inline-flex; align-items: center; gap: .45rem; box-shadow: var(--shadow-sm);
}

/* Stats band */
.stat-band { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1rem; }
.stat { text-align: center; padding: .6rem; }
.stat .n { font-size: 2rem; font-weight: 800; color: var(--wa-teal-dark); }
.stat .l { color: var(--muted); font-weight: 600; }

/* ---------------------------------------------------------- Pricing */
.price-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.9rem 1.6rem; height: 100%; position: relative; transition: box-shadow .18s, transform .18s;
}
.price-card:hover { box-shadow: var(--shadow-md); }
.price-card.popular { border: 2px solid var(--wa-green-strong); box-shadow: var(--shadow-md); transform: translateY(-6px); }
.price-card .pop-chip {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--wa-green-strong); color: #fff; font-weight: 800; font-size: .72rem;
    padding: .35rem .9rem; border-radius: 999px; letter-spacing: .5px;
}
.price-card h5 { font-size: 1.2rem; }
.price-card .amount { font-size: 2.3rem; font-weight: 800; color: var(--ink); margin: .4rem 0; }
.price-card .amount small { font-size: .95rem; font-weight: 600; color: var(--muted); }
.price-card ul { margin: 1rem 0 1.4rem; }
.price-card li { padding: .3rem 0; color: var(--ink-soft); display: flex; align-items: flex-start; gap: .5rem; }
.price-card li::before { content: "✓"; color: var(--wa-green-strong); font-weight: 800; }

/* -------------------------------------------------------------- FAQ */
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; margin-bottom: .7rem; background: #fff; }
.faq-item h6 { font-weight: 700; margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; }
.faq-item h6::before { content: "💬"; }
.faq-item p { color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------- CTA band */
.cta-band {
    color: #fff; text-align: center; padding: 4rem 1rem;
    background-color: var(--wa-teal-dark);
    background-image: radial-gradient(800px 300px at 50% -20%, rgba(37, 211, 102, .35), transparent 60%), url("/img/wa-doodle-light.svg");
    background-size: auto, 412px;
}
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.cta-band p { color: #d8efe9; font-size: 1.1rem; margin-bottom: 1.6rem; }

/* ----------------------------------------------------------- Footer */
.page-footer.wa-footer { background: var(--wa-teal-dark) !important; padding-top: 2.5rem; }
.wa-footer .brand-mark .brand-name { color: #fff; }
.wa-footer h6 { color: #fff; font-weight: 700; }
.wa-footer a { color: #b9d7d1 !important; }
.wa-footer a:hover { color: #fff !important; }
.wa-footer .footer-copyright { background: rgba(0, 0, 0, .18); }

/* --------------------------------------------------------- A11y/legal */
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { font-size: 1.9rem; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: .5rem; background: #fff; padding: .5rem 1rem; z-index: 1000; border-radius: 8px; }

@media only screen and (max-width: 992px) {
    /* The hero uses Materialize's `valign-wrapper`, which applies `display:flex` and
       prevents Materialize's float-based columns from stacking. Switch the row back to
       block flow at narrow widths so the two halves stack cleanly. */
    .hero .row.valign-wrapper { display: block; }
    .hero { padding: 2.8rem 1rem 3rem; }
    .wa-chat { margin: 2.2rem auto 0; max-width: 380px; }
}

@media only screen and (max-width: 600px) {
    .hero { padding: 2rem .9rem 2.5rem; }
    .hero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.15; }
    .hero p.lead { font-size: 1rem; margin-bottom: 1.4rem; }
    .hero-badge { font-size: .75rem; padding: .35rem .75rem; margin-bottom: .9rem; }
    /* Stack the CTAs vertically and make them full-width so they're easy to tap. */
    .hero-cta-row { flex-direction: column; align-items: stretch; gap: .6rem; }
    .hero-cta-row > a { width: 100%; justify-content: center; text-align: center; }
    .hero .trust { gap: .8rem 1rem; font-size: .82rem; margin-top: 1.2rem; }
    .hero .trust span { white-space: nowrap; }
    /* The phone "frame" border is too thick on a small mockup — slim it down so the
       chat body has more room and the rounded corners stay visible. */
    .wa-chat { border-width: 6px; border-radius: 18px; max-width: 100%; }
    .wa-chat-body { min-height: 280px; padding: .8rem .75rem 1rem; }
    .wa-msg { font-size: .85rem; padding: .45rem .6rem .3rem; }
    /* Generic section padding gets tighter so the page doesn't feel airy/wasted on mobile. */
    .section-pad { padding: 3rem 1rem; }
    .stat-band { padding: 1.2rem .6rem; }
    .stat { padding: .4rem .3rem; }
    .stat .n { font-size: 1.05rem; line-height: 1.25; }
    .stat .l { font-size: .76rem; line-height: 1.25; }
    /* Nav: tighten the brand and replace the long brand-name with the icon-only
       monogram on very narrow screens so the burger and brand both fit. */
    .landing-nav .nav-wrapper { height: 60px; line-height: 60px; }
    .landing-nav .brand-name { font-size: 1rem; }
    /* Section titles get hyphenated and wrapped a bit tighter. */
    .section-title { font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.2; }
    .section-sub { font-size: .95rem; margin-bottom: 1.8rem; }
    /* Cards stretch full width and sit closer together. */
    .feature-card, .usecase, .price-card { padding: 1.2rem 1.1rem; }
    /* Footer columns stack centered. */
    .wa-footer .row > .col { text-align: center; }
}

/* For very small phones (Galaxy S/iPhone SE-class), allow the chat preview to shrink
   further without breaking proportions. */
@media only screen and (max-width: 380px) {
    .hero { padding: 1.7rem .7rem 2rem; }
    .wa-chat { border-width: 5px; }
    .wa-chat-body { min-height: 240px; }
}

/* Visually hidden but readable by screen readers / machines. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Answer-first block (GEO): direct, complete answer right below the hero. */
.answer-section { }
.answer-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--wa-green-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 1.4rem 1.6rem;
    max-width: 900px;
    margin: 0 auto;
}
.answer-card h2 { font-size: 1.25rem; margin: 0 0 .6rem; color: var(--wa-teal-dark); }
.answer-card p { font-size: 1.04rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* Machine-readable plan comparison table (for SEO / agentic search). */
.comparison-wrap { overflow-x: auto; margin-top: 1.2rem; }
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.comparison-table th, .comparison-table td {
    padding: .7rem .9rem;
    text-align: center;
    border-bottom: 1px solid var(--line);
    font-size: .96rem;
}
.comparison-table thead th {
    background: var(--wa-teal-dark);
    color: #fff;
    font-weight: 700;
}
.comparison-table tbody th[scope="row"] {
    text-align: left;
    color: var(--ink);
    font-weight: 600;
    background: var(--panel);
}
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td { border-bottom: 0; }