/* ==========================================================
VARIABLES
========================================================== */

:root {
--font-dynapuff: 'DynaPuff', cursive, sans-serif;
--font-outfit: 'Outfit', sans-serif;
--font-corinthia: 'Corinthia', cursive, sans-serif;

--green: #2cbf3d;
--green-dark: #1b4332;
--green-light: #ecf3df;
--green-soft: #fbfff4;
--green-primary: #76c061;
--green-bg-light: #f4fbf2;
--gray-border: #e2e8f0;
--gray-bg-btn: #f1f3f5;
--gray-text-sub: #6c757d;

--text: #18221d;
--muted: #637069;

--white: #ffffff;
--black: #111111;

--yellow: #fbf2cc;
--cream: #f5eed3;

--border: rgba(0, 0, 0, 0.1);

--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 28px;

--shadow-sm:
    0 8px 25px rgba(27, 67, 50, 0.08);

--shadow-md:
    0 20px 50px rgba(27, 67, 50, 0.12);

--transition-fast:
    180ms cubic-bezier(.2, .8, .2, 1);

--transition:
    350ms cubic-bezier(.2, .8, .2, 1);

--transition-slow:
    700ms cubic-bezier(.2, .8, .2, 1);

--bg-badge: #d6f0e4;


}

/* ==========================================================
RESET
========================================================== */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}

body {
margin: 0;
padding: 0;

font-family: var(--font-outfit);
color: var(--text);

background: var(--white);

line-height: 1.5;

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

overflow-x: hidden;


}

img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}

img {
height: auto;
}

button,
input,
textarea,
select {
font: inherit;
}

button,
a {
-webkit-tap-highlight-color: transparent;
}

button {
cursor: pointer;
}

a {
color: inherit;
}

ul,
ol {
margin: 0;
padding: 0;
}

/* ==========================================================
TIPOGRAFÍA
========================================================== */

.font-dynapuff {
font-family: var(--font-dynapuff);
}

.font-outfit {
font-family: var(--font-outfit);
}

.font-corinthia {
font-family: var(--font-corinthia);
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-family: var(--font-dynapuff);
font-weight: 700;
line-height: 1.15;
}

p {
margin: 0;
}

::selection {
color: var(--white);
background: var(--green);
}

/* ==========================================================
ACCESIBILIDAD
========================================================== */

:focus-visible {
outline: 3px solid rgba(44, 191, 61, 0.55);
outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

/* ==========================================================
BOTONES
========================================================== */

.btn-green,
.btn-white {
min-height: 48px;

display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;

padding: 12px 18px;

border-radius: 14px;

text-decoration: none;

font-family: var(--font-outfit);
font-weight: 700;

transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);


}

.btn-green {
border: 1px solid var(--green);

background: var(--green);
color: var(--white);

box-shadow:
    0 8px 18px rgba(44, 191, 61, 0.18);


}

.btn-green:hover {
color: var(--white);

background: #24ad34;
border-color: #24ad34;

transform: translateY(-3px);

box-shadow:
    0 13px 28px rgba(44, 191, 61, 0.27);


}

.btn-green:active {
transform: translateY(-1px);
}

.btn-white {
border: 1px solid rgba(0, 0, 0, 0.18);

background: var(--white);
color: var(--black);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);


}

.btn-white:hover {
color: var(--black);

border-color: rgba(0, 0, 0, 0.35);

transform: translateY(-3px);

box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.1);


}

.arrow-icon {
font-size: 1.2rem;
line-height: 1;

transition: transform var(--transition-fast);


}

.btn-green:hover .arrow-icon,
.btn-white:hover .arrow-icon {
transform: translateX(4px);
}

/* ==========================================================
BADGE
========================================================== */

.badge {
width: fit-content;
max-width: 100%;

display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;

padding: 8px 13px;

border-radius: 999px;

background: var(--bg-badge);

color: var(--black);

font-family: var(--font-outfit);
font-size: 0.78rem;
font-weight: 700;

letter-spacing: 0.04em;
text-transform: uppercase;


}

/* ==========================================================
SCROLL REVEAL
========================================================== */

.reveal {
opacity: 0;
transform: translateY(30px);

transition:
    opacity 800ms ease,
    transform 800ms cubic-bezier(.2, .8, .2, 1);


}

.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}

.reveal-delay {
transition-delay: 150ms;
}

.reveal-delay-1 {
transition-delay: 100ms;
}

.reveal-delay-2 {
transition-delay: 200ms;
}

/* ==========================================================
HEADER
========================================================== */

.site-header {
position: relative;
z-index: 100;

background: rgba(255, 255, 255, 0.92);

border-bottom: 1px solid transparent;

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

transition:
    box-shadow var(--transition),
    border-color var(--transition);


}

.site-header.scrolled {
border-color: var(--border);

box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.06);


}

.header-inner {
min-height: 88px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 30px;


}

/* ==========================================================
LOGO
========================================================== */

.brand {
display: inline-flex;
align-items: center;
gap: 10px;

color: var(--black);

text-decoration: none;

flex-shrink: 0;


}

.circle-logo {
width: 46px;
height: 46px;

display: inline-flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius: 50%;

color: var(--black);

background: #00ff62;

transition:
    transform var(--transition),
    box-shadow var(--transition);


}

.brand:hover .circle-logo {
transform: rotate(-8deg) scale(1.05);

box-shadow:
    0 8px 20px rgba(0, 255, 98, 0.25);


}

.business-name {
display: flex;
flex-direction: column;

font-family: var(--font-outfit);
font-size: 1.12rem;
font-weight: 800;

line-height: 0.78;


}

.business-name .font-corinthia {
font-size: 1.6rem;
font-weight: 700;
}

/* ==========================================================
NAVEGACIÓN
========================================================== */

.main-nav {
display: flex;
align-items: center;
justify-content: flex-end;

gap: 28px;


}

.main-nav > a:not(.btn-green) {
position: relative;

color: var(--black);

font-size: 0.9rem;
font-weight: 500;

text-decoration: none;

transition: color var(--transition-fast);


}

.main-nav > a:not(.btn-green)::after {
content: "";

position: absolute;

left: 0;
bottom: -6px;

width: 100%;
height: 2px;

background: var(--green);

transform: scaleX(0);
transform-origin: right;

transition: transform var(--transition);


}

.main-nav > a:not(.btn-green):hover {
color: var(--green-dark);
}

.main-nav > a:not(.btn-green):hover::after {
transform: scaleX(1);
transform-origin: left;
}

/* ==========================================================
MENÚ MÓVIL
========================================================== */

.menu-toggle {
width: 44px;
height: 44px;

display: none;

flex-direction: column;
align-items: center;
justify-content: center;

gap: 5px;

padding: 0;

border: 1px solid var(--border);
border-radius: 12px;

background: var(--white);


}

.menu-toggle span {
width: 20px;
height: 2px;

border-radius: 5px;

background: var(--black);

transition: transform var(--transition-fast);


}

.mobile-menu {
display: none;
}

/* ==========================================================
WHATSAPP
========================================================== */

.whatsapp-wrapper {
position: fixed;

right: 24px;
bottom: 24px;

z-index: 999;


}

.whatsapp-button {
min-height: 54px;

display: inline-flex;
align-items: center;
gap: 9px;

padding: 9px 17px 9px 10px;

border: 0;
border-radius: 999px;

color: var(--white);

background: #25d366;

box-shadow:
    0 12px 30px rgba(37, 211, 102, 0.32);

transition:
    transform var(--transition),
    box-shadow var(--transition);


}

.whatsapp-button:hover {
transform: translateY(-4px) scale(1.02);

box-shadow:
    0 18px 38px rgba(37, 211, 102, 0.38);


}

.whatsapp-button-icon {
width: 36px;
height: 36px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: rgba(255, 255, 255, 0.16);


}

.whatsapp-button-text {
font-weight: 700;
}

/* ==========================================================
WHATSAPP PANEL
========================================================== */

.whatsapp-panel {
position: absolute;

right: 0;
bottom: calc(100% + 15px);

width: min(360px, calc(100vw - 32px));

overflow: hidden;

border-radius: 20px;

background: var(--white);

box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.2);

opacity: 0;
visibility: hidden;

transform:
    translateY(15px)
    scale(0.96);

transform-origin: bottom right;

transition:
    opacity var(--transition),
    visibility var(--transition),
    transform var(--transition);


}

.whatsapp-panel.is-open {
opacity: 1;
visibility: visible;

transform:
    translateY(0)
    scale(1);


}

.whatsapp-panel-header {
display: flex;
align-items: center;
justify-content: space-between;

padding: 16px;

color: var(--white);

background: #075e54;


}

.whatsapp-profile {
display: flex;
align-items: center;
gap: 10px;
}

.whatsapp-avatar {
width: 42px;
height: 42px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: #25d366;


}

.whatsapp-avatar img {
filter: brightness(0) invert(1);
}

.whatsapp-profile > div:last-child {
display: flex;
flex-direction: column;
}

.whatsapp-profile strong {
font-size: 0.95rem;
}

.whatsapp-profile span {
color: rgba(255, 255, 255, 0.75);

font-size: 0.72rem;


}

.whatsapp-close {
width: 35px;
height: 35px;

border: 0;
border-radius: 50%;

color: var(--white);
background: rgba(255, 255, 255, 0.12);

font-size: 1.5rem;
line-height: 1;

transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);


}

.whatsapp-close:hover {
background: rgba(255, 255, 255, 0.2);

transform: rotate(90deg);


}

.whatsapp-panel-body {
padding: 18px;

background:
    linear-gradient(
        135deg,
        #e5ddd5,
        #eee7df
    );


}

.whatsapp-message {
width: fit-content;
max-width: 90%;

margin-bottom: 15px;

padding: 11px 13px;

border-radius: 4px 15px 15px 15px;

background: var(--white);

color: #333;

font-size: 0.86rem;

box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.05);


}

#whatsapp-form {
position: relative;

padding: 12px;

border-radius: 15px;

background: rgba(255, 255, 255, 0.96);


}

#whatsapp-form label {
display: block;

margin-bottom: 7px;

font-size: 0.78rem;
font-weight: 700;


}

#whatsapp-message-input {
width: 100%;

min-height: 95px;

resize: vertical;

padding: 11px;

border: 1px solid rgba(0, 0, 0, 0.13);
border-radius: 11px;

color: var(--text);
background: var(--white);

outline: none;

font-size: 0.88rem;

transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);


}

#whatsapp-message-input:focus {
border-color: #25d366;

box-shadow:
    0 0 0 3px rgba(37, 211, 102, 0.12);


}

.whatsapp-counter {
margin-top: 5px;

text-align: right;

color: #777;

font-size: 0.7rem;


}

.whatsapp-send {
width: 100%;

margin-top: 9px;

border-radius: 11px;

background: #25d366;
border-color: #25d366;


}

.whatsapp-send:hover {
background: #1fbd5a;
border-color: #1fbd5a;
}

/* ==========================================================
FOOTER WHATSAPP
========================================================== */

.footer-whatsapp {
padding: 0;

border: 0;

background: transparent;

color: rgba(0, 0, 0, 0.7);

font-size: 0.8rem;

cursor: pointer;


}

.footer-whatsapp:hover {
color: var(--green-dark);
}

/* ==========================================================
RESPONSIVE
========================================================== */

@media (max-width: 991.98px) {

.main-nav {
    display: none;
}

.menu-toggle {
    display: flex;
}

.mobile-menu {
    position: absolute;

    top: 100%;
    left: 16px;
    right: 16px;

    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 10px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.98);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.12);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.mobile-menu > a {
    padding: 12px 14px;

    border-radius: 10px;

    color: var(--black);

    text-decoration: none;

    font-weight: 600;
}

.mobile-menu > a:hover {
    background: var(--green-soft);
}

.mobile-menu .btn-green {
    color: var(--white);
}

.whatsapp-wrapper {
    right: 16px;
    bottom: 16px;
}


}

@media (max-width: 575.98px) {

.header-inner {
    min-height: 74px;
}

.circle-logo {
    width: 40px;
    height: 40px;
}

.business-name {
    font-size: 1rem;
}

.business-name .font-corinthia {
    font-size: 1.4rem;
}

.whatsapp-button {
    width: 54px;
    height: 54px;

    justify-content: center;

    padding: 0;
}

.whatsapp-button-text {
    display: none;
}

.whatsapp-panel {
    right: -4px;

    width: min(350px, calc(100vw - 24px));
}


}