/* ============================================
   IDENTIDUCA — main.css  v1.0.0
   assets/css/main.css
   ============================================ */


/* ----- 1. CUSTOM PROPERTIES ----- */

:root {
    --c-green:       #207C84;
    --c-green-dark:  #1a6269;
    --c-green-light: #d6eef0;
    --c-blue:        #1E3E57;
    --c-red:         #E74D3D;
    --c-red-dark:    #d43d2d;
    --c-beige:       #F5EFE6;
    --c-beige-dark:  #ede6d9;
    --c-white:       #ffffff;
    --c-black:       #1a1a1a;
    --c-footer-bg:   #17252f;

    /*
     * Warm neutrals derived from the brand beige, not the cool blue-grey of a
     * generic UI palette. Grey with a blue cast reads as software; next to
     * #F5EFE6 it also looks dirty. Same lightness steps, warm hue.
     */
    --c-gray-50:     #faf7f2;
    --c-gray-100:    #f2ece2;
    --c-gray-200:    #e4dbcd;
    --c-gray-300:    #d2c6b4;
    --c-gray-400:    #a2917d;
    --c-gray-500:    #786a5a;   /* 4.58:1 on the beige — the lightest that still passes AA */
    --c-gray-600:    #5d5347;
    --c-gray-700:    #473f36;
    --c-gray-800:    #322c25;
    --c-gray-900:    #211d18;

    --c-success:     #10b981;
    --c-warning:     #f59e0b;
    --c-error:       #ef4444;

    /*
     * Alegreya carries the voice in the headings; the body stays on Roboto,
     * whose taller x-height holds up better at reading sizes. The warmth of the
     * page comes from the neutrals below, not from the text face.
     */
    --font-body:      'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-headline:  'Alegreya', Georgia, serif;

    --ease-out:           cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast:    all 0.2s var(--ease-out);
    --transition-normal:  all 0.3s var(--ease-out);
    --transition-slow:    all 0.5s var(--ease-out);
    --transition-warm:    all 0.4s var(--ease-out);   /* accordions */

    /* Warm shadows — brown tint instead of pure black */
    --shadow-sm:       0 1px 2px 0 rgba(30,20,10,.06);
    --shadow-md:       0 4px 6px -1px rgba(30,20,10,.12), 0 2px 4px -1px rgba(30,20,10,.07);
    --shadow-lg:       0 10px 15px -3px rgba(30,20,10,.12), 0 4px 6px -2px rgba(30,20,10,.06);
    --shadow-xl:       0 20px 25px -5px rgba(30,20,10,.12), 0 10px 10px -5px rgba(30,20,10,.05);
    --shadow-2xl:      0 25px 50px -12px rgba(30,20,10,.22);
    --shadow-card:     0 4px 20px rgba(30,20,10,.09);
    --shadow-card-hover: 0 12px 40px rgba(30,20,10,.16);

    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   22px;
    --radius-card: 24px;
    --radius-full: 9999px;

    --section-py:         80px;
    --section-py-tablet:  60px;
    --section-py-mobile:  40px;
    --container-max:      1200px;
}


/* ----- 2. RESET & BASE ----- */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;           /* ↑ más espacio de lectura */
    color: var(--c-gray-800);
    background-color: var(--c-white);
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: var(--transition-fast); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* Headings — Alegreya en display/secciones */
h1, h2, h3, h4, h5, h6 {
    margin: 0; font-weight: 700; line-height: 1.25;
    color: var(--c-blue);
    font-family: var(--font-headline);   /* serif en todos los títulos */
    text-wrap: balance;                  /* no orphan word on its own line */
}
p { text-wrap: pretty; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.375rem); }
p  { margin: 0 0 1rem; }

/* Skip-to-content link accesible */
.skip-to-content {
    position: fixed; top: -100%; left: 50%; transform: translateX(-50%);
    background: var(--c-blue); color: var(--c-white);
    padding: 12px 24px; border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight: 600; font-size: .9375rem; z-index: 9999;
    transition: top .2s ease;
}
.skip-to-content:focus { top: 0; }

/* Focus visible global */
:focus-visible {
    outline: 3px solid var(--c-green);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ----- 3. LAYOUT UTILITIES ----- */

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }

.section {
    padding: var(--section-py) 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
}

.section--white    { background-color: var(--c-white); }
.section--beige    { background-color: var(--c-beige); }
.section--dark     { background-color: var(--c-blue); }
.section--green    { background-color: var(--c-green); }
/*
 * A 135° three-stop gradient is the house style of every SaaS landing page.
 * Vertical, two stops and a shorter hue travel reads as depth in a single
 * colour rather than as an effect — and the paper grain used on the beige
 * sections carries over, so dark and light areas share the same material.
 */
.section--gradient {
    background-color: #1E3E57;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #1E3E57 0%, #1c4c5e 100%);
}

/* Subtle SVG texture on beige backgrounds */
.section--beige,
.intro,
.faq,
.members,
.testimonials,
.accompany { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='%23c8b9a2' fill-opacity='.25'/%3E%3C/svg%3E"); }

.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--green h1, .section--green h2, .section--green h3, .section--green h4,
/*
 * :where() keeps this at zero specificity so a card living inside a gradient
 * section can still set its own heading colour. Without it, this rule (0-1-1)
 * beat .service-card__title (0-1-0) and painted the card titles white on beige.
 */
.section--gradient :where(h1, h2, h3, h4) {
    color: var(--c-white);
}

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

.section__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.section__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--c-blue);
    margin-bottom: 20px;
    line-height: 1.2;
}

.section--dark .section__title,
.section--green .section__title,
.section--gradient .section__title { color: var(--c-white); }

.section__description {
    font-family: var(--font-body);
    font-size: 1.125rem;
    color: var(--c-gray-600);
    line-height: 1.8;
    margin-bottom: 0;
}

.section--dark .section__description,
.section--green .section__description,
.section--gradient .section__description { color: rgba(255,255,255,.9); }


/* ----- 4. BUTTONS (warmer, rounder, no uppercase) ----- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: .02em;                   /* reduced from .5px */
    border-radius: var(--radius-md);       /* 12px, no pill */
    transition: var(--transition-normal);
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/*
 * The old button swept a white gleam across itself on hover — a game-UI tic
 * that says "software". The hover now just deepens the colour and lifts the
 * button a hair: the same feedback, none of the theatre.
 */

.btn--primary { background-color: var(--c-green); color: var(--c-white); border-color: var(--c-green); }
.btn--primary:hover { background-color: var(--c-green-dark); border-color: var(--c-green-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--secondary { background-color: transparent; color: var(--c-blue); border-color: var(--c-blue); }
.btn--secondary:hover { background-color: var(--c-blue); color: var(--c-white); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--accent { background-color: var(--c-red); color: var(--c-white); border-color: var(--c-red); }
.btn--accent:hover { background-color: var(--c-red-dark); border-color: var(--c-red-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--white { background-color: var(--c-white); color: var(--c-blue); border-color: var(--c-white); }
.btn--white:hover { background-color: var(--c-beige); color: var(--c-blue); transform: translateY(-1px); }

.btn--lg { padding: 18px 40px; font-size: 1.125rem; }
.btn--sm { padding: 10px 24px; font-size: .8125rem; }
.btn--block { width: 100%; display: flex; }


/* ----- 5. SHARED CARD PATTERN ----- */

/*
 * The 4px green bar across the top was a dashboard tab, and the hover swapped
 * it to red — a colour blink that carried no meaning. The card now holds a
 * single hairline border all the way round; on hover that line warms to green
 * and the card lifts slightly. Brand colour stays in the gesture, not in a tab.
 */
.card {
    --card-bg:     var(--c-white);
    --card-border: var(--c-gray-200);

    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 40px;
    box-shadow: var(--shadow-card);
    transition: var(--transition-normal);
}
.card:hover {
    --card-border: var(--c-green);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

.card--beige { --card-bg: var(--c-beige); --card-border: var(--c-beige-dark); }
.card--beige:hover { --card-bg: var(--c-white); }
.card--centered { text-align: center; display: flex; flex-direction: column; align-items: center; }


/* ----- 6. ICON CIRCLE — soft green→teal gradient ----- */

/*
 * Flat brand colour instead of a diagonal gradient, and no rotate on hover —
 * a badge that spins is a toy. It grows a hair; that is enough.
 */
.icon-circle {
    --icon-bg: var(--c-green);

    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--icon-bg);
    border-radius: 50%;
    color: var(--c-white);
    font-size: 2rem;
    transition: var(--transition-normal);
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(32,124,132,.18);
}
.card:hover .icon-circle { transform: scale(1.04); }
.icon-circle--sm { width: 60px; height: 60px; font-size: 1.75rem; margin-bottom: 18px; }
.icon-circle--gradient { --icon-bg: var(--c-blue); }


/* ----- 7. IMAGE MODAL ----- */

.modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; }
.modal.is-active { opacity: 1; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.9); cursor: pointer; }
.modal__content { position: relative; max-width: 90%; max-height: 90vh; z-index: 10001; animation: modalZoom .3s ease; }
@keyframes modalZoom { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal__content img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.modal__close {
    position: absolute; top: -50px; right: 0;
    background: var(--c-white); border: none;
    width: 40px; height: 40px; border-radius: 50%;
    font-size: 28px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition-normal);
    color: var(--c-gray-800); font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.modal__close:hover { transform: rotate(90deg) scale(1.1); background: var(--c-red); color: var(--c-white); }


/* ============================================
   COMPONENT: HEADER
   ============================================ */

.header {
    position: fixed; top: 0; left: 0; width: 100%;
    background-color: var(--c-white);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    transition: var(--transition-normal);
}
.header.is-scrolled { box-shadow: var(--shadow-md); }

.header__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
    max-width: var(--container-max); margin: 0 auto;
}

.header__logo { display: flex; align-items: center; transition: var(--transition-fast); }
.header__logo img { height: 45px; width: auto; }
.header__logo:hover { opacity: .8; }

.header__nav { display: flex; align-items: center; gap: 32px; }
.header__menu { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }

.header__link {
    font-family: var(--font-body);
    font-size: .9375rem; font-weight: 500; color: var(--c-gray-700);
    transition: var(--transition-fast);
    position: relative; padding: 8px 0;
}
.header__link::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 2px; background-color: var(--c-green);
    transition: var(--transition-fast);
}
.header__link:hover { color: var(--c-green); }
.header__link:hover::after,
.header__link.is-active::after { width: 100%; }
.header__link.is-active { color: var(--c-green); }

.header__cta { display: flex; }
.header__cta .btn { padding: 10px 24px; font-size: .875rem; }

.header__toggle {
    display: none; flex-direction: column; gap: 5px;
    cursor: pointer; padding: 8px; background: none; border: none;
}
.header__toggle span { width: 26px; height: 3px; background-color: var(--c-blue); border-radius: 2px; transition: var(--transition-fast); }
.header__toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(6px,6px); }
.header__toggle.is-active span:nth-child(2) { opacity: 0; }
.header__toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(6px,-6px); }


/* ============================================
   COMPONENT: HERO BANNER
   ============================================ */

.hero {
    min-height: 130vh;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    background: url('https://www.identiduca.org/wp-content/uploads/2025/11/Identiduca-hero-banner.jpg') center center / cover no-repeat;
    background-attachment: fixed;
    padding: 120px 20px 20px;
    overflow: hidden;
}

.hero__parallax { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; transition: transform .5s ease-out; }
/* Settles into place instead of bouncing past it — the overshoot read as playful UI. */
.hero__parallax img { width: 85vw; max-width: 1400px; height: auto; opacity: 0; animation: globeEntrance 1.4s var(--ease-out) .3s forwards; }
@keyframes globeEntrance {
    0%   { opacity: 0; transform: translateY(-40px) scale(.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hero__inner { position: relative; z-index: 2; text-align: center; max-width: 1100px; margin: 0 auto; }

/*
 * Solid brand colour instead of frosted glass. The blurred translucent pill
 * was the most "product launch" thing on the page, and it read grey against
 * the photo — this one is legible and belongs to the brand.
 */
.hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 20px;
    background-color: var(--c-blue);
    border-radius: var(--radius-full);
    font-size: .875rem; font-weight: 500; letter-spacing: .02em;
    color: var(--c-white); margin-bottom: 24px;
    box-shadow: var(--shadow-md);
    opacity: 0; animation: fadeInBadge 1s ease-out 1s forwards;
}
.hero__badge i { font-size: 1rem; color: var(--c-beige); }

.hero__headline-wrap { position: relative; display: inline-block; margin-bottom: 50px; }
.hero__headline {
    font-family: var(--font-headline);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 600; color: var(--c-white); line-height: 1.1;
    text-shadow: 0 4px 20px rgba(0,0,0,.5);
    animation: heroFadeInUp .8s ease-out .2s backwards;
    position: relative; z-index: 2; margin: 0;
}
.hero__headline-line { display: block; }

.hero__underline { position: absolute; left: -4%; bottom: -6px; width: 108%; height: 30px; overflow: visible; pointer-events: none; z-index: 1; }
.hero__underline-path {
    stroke: var(--c-red); stroke-width: 8; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 2500; stroke-dashoffset: 2500;
    animation: drawUnderline 1.8s ease-out 1.2s forwards;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
@keyframes drawUnderline { to { stroke-dashoffset: 0; } }

.hero__subheadline {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem); color: rgba(255,255,255,.95);
    line-height: 1.7; margin-bottom: 50px;
    max-width: 850px; margin-left: auto; margin-right: auto;
    text-wrap: pretty;
    text-shadow: 0 2px 10px rgba(0,0,0,.4);
    animation: heroFadeInUp .8s ease-out .5s backwards;
}

.hero__cta { display: flex; align-items: center; justify-content: center; margin-bottom: 120px; animation: heroFadeInUp .8s ease-out .8s backwards; }
.hero__cta .btn { min-width: 280px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.3); }

/* Gap is zero: the rule between the figures does the separating now. */
.hero__authority { display: flex; justify-content: center; align-items: flex-start; gap: 0; flex-wrap: wrap; row-gap: 2rem; animation: heroFadeInUp .8s ease-out 1.1s backwards; margin-top: auto; }

/*
 * These three figures were frosted-glass boxes: the clearest "tech landing"
 * signal on the site, and grey mush over the photograph. The box is gone. What
 * is left is what mattered — the number, set in the display serif, with a thin
 * rule between each one. Editorial instead of dashboard, and far more legible.
 */
.authority-card {
    text-align: center;
    padding-inline: clamp(1.5rem, 4vw, 2.75rem);
    background: none;
    border: 0;
    border-inline-start: 1px solid rgba(255,255,255,.28);
    border-radius: 0;
    box-shadow: none;
    min-inline-size: 0;
}
.authority-card:first-child { border-inline-start: 0; }

.authority-card__icon {
    display: block; margin: 0 auto 10px;
    font-size: 1.125rem; color: var(--c-beige);
    background: none; border: 0; width: auto; height: auto;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.authority-card__number {
    font-family: var(--font-headline);
    font-size: clamp(1.75rem, 3.5vw, 2.375rem); font-weight: 700;
    color: var(--c-white); line-height: 1; margin-bottom: 6px; display: block;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.authority-card__label {
    font-size: .9375rem; font-weight: 400; letter-spacing: .04em;
    color: rgba(255,255,255,.92); line-height: 1.4; margin: 0;
    text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

/* Stacked, the rule has to lie down too — otherwise it hangs beside each item. */
@media (max-width: 768px) {
    .hero__authority { flex-direction: column; align-items: center; row-gap: 0; }
    .authority-card {
        border-inline-start: 0;
        border-block-start: 1px solid rgba(255,255,255,.22);
        padding-block: 1.25rem;
        inline-size: min(18rem, 100%);
    }
    .authority-card:first-child { border-block-start: 0; padding-block-start: 0; }
}

@keyframes heroFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInBadge  { from { opacity: 0; } to { opacity: 1; } }


/* ============================================
   COMPONENT: INTRO
   ============================================ */

.intro { padding: var(--section-py) 0; background-color: var(--c-beige); }
.intro__header { text-align: center; max-width: 900px; margin: 0 auto 60px; }
.intro__title { font-size: clamp(1.75rem, 4vw, 2.75rem); color: var(--c-blue); margin-bottom: 20px; line-height: 1.2; }
.intro__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.intro-card__title { font-size: 1.375rem; font-weight: 700; color: var(--c-blue); margin-bottom: 16px; line-height: 1.3; }
.intro-card__text { font-size: 1rem; color: #666; line-height: 1.8; margin: 0; }


/* ============================================
   COMPONENT: SERVICES (Formaciones)
   ============================================ */

.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 40px; }

.service-card { text-align: left; display: flex; flex-direction: column; height: 100%; }
.service-card__icon-wrap { text-align: center; margin-bottom: 20px; }
.service-card__icon { width: 80px; height: 80px; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-normal); }
.service-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.card:hover .service-card__icon { transform: scale(1.3) rotate(2deg); }

.service-card__category { font-family: var(--font-body); font-size: .8125rem; font-weight: 800; color: var(--c-green); margin-bottom: 4px; letter-spacing: .08em; }
.service-card__title { font-size: 1.1rem; color: var(--c-blue); margin-bottom: 14px; font-weight: 600; }
.service-card__target { font-size: .8125rem; color: var(--c-gray-600); margin-bottom: 18px; font-weight: 600; letter-spacing: .03em; }
.service-card__learn-title { font-family: var(--font-headline); font-size: 1rem; font-weight: 600; color: var(--c-blue); margin-bottom: 10px; }
.service-card__list { list-style: none; margin-bottom: 20px; flex-grow: 1; }
.service-card__list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; font-size: .875rem; line-height: 1.6; color: var(--c-gray-600); }
.service-card__list li i { color: var(--c-green); font-size: .8125rem; margin-top: 3px; flex-shrink: 0; }

.service-card__modality { text-align: center; margin-bottom: 16px; }
.service-card__modality-tag { font-size: .8125rem; color: var(--c-blue); padding: 10px; background-color: rgba(32,124,132,.1); border-radius: var(--radius-md); font-weight: 500; display: inline-block; }
.service-card__modality-tag i { margin-right: 6px; color: var(--c-green); }

.service-card__download { text-align: center; }
.service-card__download-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background-color: var(--c-green); color: var(--c-white);
    padding: 12px 24px; border-radius: var(--radius-md);
    font-size: .875rem; font-weight: 600; transition: var(--transition-normal);
    border: none; cursor: pointer;
}
.service-card__download-btn:hover { background-color: var(--c-green-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(32,124,132,.3); color: var(--c-white); }

.services__bottom-cta { text-align: center; margin-top: 20px; }
.services__bottom-cta .btn { background-color: var(--c-red); border-color: var(--c-red); }
.services__bottom-cta .btn:hover { background-color: var(--c-red-dark); border-color: var(--c-red-dark); }


/* ============================================
   COMPONENT: ABOUT
   ============================================ */

/* ============================================
   TESTIMONIOS

   Deliberately not cards: a boxed 3×N grid is what every template does, and a
   testimonial reads better as a column of text than as a tile. What separates
   them is air and the oversized quote mark, set in the display serif so the
   section belongs to the same voice as the headings.
   ============================================ */

.testimonials {
    /* The light green vanished against the beige; the brand green held back
       to a third reads as a mark without competing with the text. */
    --quote-mark: color-mix(in srgb, var(--c-green) 32%, transparent);

    background-color: var(--c-beige);
    padding-block: clamp(3.5rem, 7vw, 5rem);
}

/* ---- Carousel: native scroll + snap, arrows drive scrollTo ----
   Built on the browser's own scrolling rather than transforms, so it still
   works with JS off (drag or swipe), keyboard scrolling comes free, and there
   is no state to get out of sync with what is on screen. */

.carousel {
    --slide-max: 46rem;
    position: relative;
}

.carousel__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* No visible scrollbar: the arrows are the affordance. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    min-inline-size: 0;
}

.carousel__btn {
    inline-size: 2.75rem;                /* 44px: comfortable touch target */
    block-size: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-gray-300);
    border-radius: 50%;
    background-color: var(--c-white);
    color: var(--c-blue);
    font-size: 1rem;
    transition: var(--transition-fast);
}
.carousel__btn:hover {
    background-color: var(--c-green);
    border-color: var(--c-green);
    color: var(--c-white);
}

/*
 * Flanking the card from ~880px up, where the gutter beside the 46rem slide is
 * wide enough to hold them. Narrower than that they would sit on the text, so
 * they drop back into the flow underneath.
 */
.carousel__btn--prev,
.carousel__btn--next {
    margin-block-start: 1.75rem;
    margin-inline: .375rem;
}

.carousel { display: flex; flex-wrap: wrap; justify-content: center; }
.carousel__track { flex: 1 0 100%; order: -1; }

@media (min-width: 55rem) {
    .carousel { display: block; }
    .carousel__track { flex: initial; order: initial; }

    .carousel__btn--prev,
    .carousel__btn--next {
        position: absolute;
        inset-block-start: 50%;
        transform: translateY(-50%);
        margin: 0;
        box-shadow: var(--shadow-md);
    }
    /*
     * Anchored to the card, not to the container: on a wide screen the gutter
     * is far wider than the slide, and arrows pinned to the outer edge stop
     * reading as controls for the card in the middle.
     */
    .carousel__btn--prev,
    .carousel__btn--next {
        --arrow-offset: max(0px, calc(50% - var(--slide-max) / 2 - 4rem));
    }
    .carousel__btn--prev { inset-inline-start: var(--arrow-offset); }
    .carousel__btn--next { inset-inline-end: var(--arrow-offset); }
}

@media (prefers-reduced-motion: reduce) {
    .carousel__track { scroll-behavior: auto; }
}

.testimonial {
    inline-size: 100%;
    max-inline-size: var(--slide-max);
    min-inline-size: 0;
    padding: clamp(1.75rem, 4vw, 2.5rem);
}
/* A quote is not a link — it should not lift or change colour under the pointer. */
.testimonial:hover { transform: none; --card-border: var(--c-gray-200); box-shadow: var(--shadow-card); }

/*
 * The mark leads and the topic sits beside it, sharing one line. The glyph is
 * generated rather than written into the markup: it is ornament, and a screen
 * reader announcing a stray quotation mark before every card helps nobody.
 */
.testimonial__header {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-block-end: 1rem;
}

.testimonial__header::before {
    content: '\201C';
    font-family: var(--font-headline);
    font-size: clamp(6rem, 12vw, 9rem);
    line-height: 1;
    color: var(--quote-mark);
    /*
     * Optical centring, not box centring. The glyph hangs near the top of its
     * em box, so flex would line up two boxes whose ink sits at different
     * heights. The negative margin drops the empty space below the glyph, and
     * the nudge — measured against the rendered label, in em so it survives the
     * clamp — brings the two inks onto the same centre line.
     */
    margin-block-end: -.58em;
    transform: translateY(-.104em);
    flex: 0 0 auto;
}

.testimonial__topic {
    font-family: var(--font-body);
    font-size: .8125rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-green-dark);
    margin: 0;
    text-wrap: balance;
}

.testimonial__quote { margin: 0; }

.testimonial__quote p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.85;
    color: var(--c-gray-700);
    margin: 0;
    text-wrap: pretty;
}

/* Una cita editada desde el escritorio puede traer más de un párrafo. */
.testimonial__quote p + p { margin-block-start: 0.75rem; }

.about { padding: 40px 0; }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about__image { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); height: 550px; }
.about__image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-slow); }
.about__image:hover img { transform: scale(1.05); }
.about__content { padding: 20px 0; }
.about__title { font-size: clamp(1.5rem, 3.5vw, 2.25rem); color: var(--c-blue); margin-bottom: 24px; line-height: 1.25; }
.about__text { font-size: .9375rem; line-height: 1.9; color: var(--c-gray-700); margin-bottom: 16px; }
.about__text:last-of-type { margin-bottom: 28px; }
.about__cta { margin-top: 32px; margin-bottom: 20px; }


/* ============================================
   COMPONENT: AUDIENCE
   ============================================ */

.audience { margin-bottom: 60px; }
.audience__header { text-align: center; max-width: 800px; margin: 0 auto 50px; }
.audience__header h2 { color: var(--c-white); margin-bottom: 16px; }
.audience__header p { font-size: 1.0625rem; color: rgba(255,255,255,.9); margin: 0; }
.audience__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.audience-card { text-align: center; padding: 40px 28px; }
.audience-card h3 { font-size: 1.0625rem; color: var(--c-blue); margin-bottom: 10px; font-weight: 600; }
.audience-card p  { font-size: .875rem; color: var(--c-gray-600); line-height: 1.7; margin: 0; }


/* ============================================
   COMPONENT: STEPS ACCORDION
   ============================================ */

.steps { padding-top: 40px; border-top: 2px solid rgba(255,255,255,.2); }

.steps__title-wrap { position: relative; text-align: center; margin-bottom: 40px; padding: 20px 200px; min-height: 100px; }
.steps__title { font-size: clamp(1.75rem, 4vw, 2.25rem); color: var(--c-white); position: relative; display: inline-block; z-index: 2; margin: 0; line-height: 1.3; }
.steps__title-line { display: inline; }

.steps__footprints { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.steps__footprint { position: absolute; font-size: 1.5rem; color: rgba(32,124,132,.6); opacity: 0; }
.steps__footprints.is-animated .steps__footprint { animation: fadeInFootprint .6s ease-out forwards; }
.steps__footprint--l1 { left: 15%; top: 20%; transform: rotate(15deg); animation-delay: 1.5s; }
.steps__footprint--l2 { left: 22%; top: 44%; transform: rotate(10deg); animation-delay: 1.8s; }
.steps__footprint--l3 { left: 28%; top: 60%; transform: rotate(0deg); animation-delay: 2.1s; }
.steps__footprint--l4 { left: 35%; top: 50%; transform: rotate(-10deg); animation-delay: 2.4s; }
.steps__footprint--r1 { right: 15%; top: 30%; transform: rotate(10deg); animation-delay: 2.7s; }
.steps__footprint--r2 { right: 21.5%; top: 16%; transform: rotate(0deg); animation-delay: 3.3s; }
.steps__footprint--r3 { right: 28%; top: 20%; transform: rotate(-10deg); animation-delay: 3s; }
.steps__footprint--r4 { right: 35%; top: 35%; transform: rotate(-15deg); animation-delay: 2.7s; }
@keyframes fadeInFootprint { 0% { opacity: 0; } 100% { opacity: 1; } }

.steps__container {
    max-width: 900px; margin: 0 auto;
    background-color: var(--c-beige); border-radius: var(--radius-card);
    padding: 40px; box-shadow: var(--shadow-card);
    height: 440px; overflow: hidden; display: flex; flex-direction: column;
}

.step { border-bottom: 1px solid rgba(30,62,87,.1); overflow: hidden; }
.step:last-child { border-bottom: none; }

/* Step header is now a <button> for accessibility */
.step__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 0; cursor: pointer; user-select: none;
    width: 100%; background: none; border: none; text-align: left;
    transition: var(--transition-warm);
}
.step__header:focus-visible { outline: 3px solid var(--c-green); outline-offset: 2px; border-radius: 4px; }

.step__header-content { display: flex; align-items: center; gap: 16px; flex: 1; }

.step__number {
    flex-shrink: 0; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(32,124,132,.1); color: var(--c-green);
    font-size: 1.125rem; font-weight: 700; border-radius: 50%;
    transition: var(--transition-warm);
}
.step.is-active .step__number { background: var(--c-green); color: var(--c-white); }

.step__name { font-family: var(--font-headline); font-size: 1.125rem; font-weight: 600; color: var(--c-blue); margin: 0; line-height: 1.4; }

.step__toggle {
    flex-shrink: 0; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(32,124,132,.1); border-radius: 50%;
    color: var(--c-green); font-size: 1rem; font-weight: 700;
    transition: transform .4s ease;
}
.step.is-active .step__toggle { transform: rotate(180deg); background: var(--c-green); color: var(--c-white); }

.step__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.step.is-active .step__body { grid-template-rows: 1fr; }
.step__body-inner { overflow: hidden; }

.step__content { padding: 0 0 24px 56px; }
.step__content-box {
    padding: 20px; background: rgba(32,124,132,.06);
    border-radius: var(--radius-md); border-left: 3px solid var(--c-green);
}
.step.is-active .step__content-box { background: rgba(32,124,132,.1); }  /* beige tint when open */
.step__content-box p { font-size: .9375rem; color: var(--c-gray-600); line-height: 1.8; margin: 0; }


/* ============================================
   COMPONENT: FAQ ACCORDION
   ============================================ */

.faq { background-color: var(--c-beige); padding: 60px 0 50px; }
.faq .section__header { margin-bottom: 40px; }
.faq__wrapper { max-width: 900px; margin: 0 auto; }

.faq-item {
    background-color: var(--c-white);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px; margin-bottom: 14px;
    overflow: hidden; transition: var(--transition-warm);
}
.faq-item:hover { border-color: var(--c-green); box-shadow: var(--shadow-md); }
.faq-item.is-active { border-color: var(--c-green); box-shadow: var(--shadow-lg); }

/* FAQ question is now a <button> for a11y */
.faq-item__question {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 22px 24px; cursor: pointer;
    background-color: var(--c-white); transition: background-color .4s ease;
    user-select: none; width: 100%; border: none; text-align: left;
}
.faq-item__question:focus-visible { outline: 3px solid var(--c-green); outline-offset: -3px; }
.faq-item__question:hover { background-color: var(--c-beige-dark); }
.faq-item.is-active .faq-item__question { background-color: var(--c-beige); }  /* warm beige when open */

.faq-item__question h3 {
    font-family: var(--font-headline);
    font-size: 1.0625rem; font-weight: 600; color: var(--c-blue);
    margin: 0; flex: 1; line-height: 1.5; transition: color .3s ease;
}
.faq-item.is-active .faq-item__question h3 { color: var(--c-green); }

.faq-item__icon {
    flex-shrink: 0; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background-color: rgba(32,124,132,.1); border-radius: 50%;
    color: var(--c-green); font-size: .875rem;
    transition: var(--transition-warm);
}
.faq-item.is-active .faq-item__icon { background-color: var(--c-green); color: var(--c-white); transform: rotate(180deg); }

.faq-item__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.faq-item.is-active .faq-item__answer { grid-template-rows: 1fr; }
.faq-item__answer-inner { overflow: hidden; }
.faq-item__answer-content { padding: 24px; background-color: var(--c-beige); }  /* beige bg when open */
.faq-item__answer-content p { font-size: .9375rem; line-height: 1.8; color: var(--c-gray-600); margin: 0; }

.faq__footer { text-align: center; margin-top: 32px; font-size: 1rem; color: var(--c-gray-600); }
.faq__footer a { color: var(--c-green-dark); font-weight: 600; }
.faq__footer a:hover { color: var(--c-blue); text-decoration: underline; }


/* ============================================
   COMPONENT: CONTACT FORM
   ============================================ */

.contact { position: relative; overflow: hidden; }
/* The white radial glow that used to sit here was decoration with no job. */

.contact__form-wrap {
    max-width: 700px; margin: 0 auto;
    background-color: var(--c-white); padding: 50px 40px;
    border-radius: var(--radius-xl); box-shadow: var(--shadow-2xl);
    position: relative; z-index: 1;
}

/* CF7 Overrides */
.wpcf7 .form-group { margin-bottom: 24px; }

/*
 * Follow-up question, revealed by main.js once its trigger answer is picked.
 * It ships visible so the form still works without JS; the script is what
 * hides it. The subtle inset rule ties the answer to the question above it.
 */
.form-conditional[hidden] { display: none; }
.form-conditional {
    border-inline-start: 2px solid var(--c-green-light);
    padding-inline-start: 1rem;
    margin-block-end: 1.5rem;
}
.form-conditional > label { margin-block-end: 0; }
.wpcf7 .form-label { display: block; font-size: .9375rem; font-weight: 600; color: var(--c-blue); margin-bottom: 8px; }
.wpcf7 .form-label .required { color: var(--c-red); margin-left: 2px; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%; padding: 14px 16px; font-size: 1rem;
    border: 2px solid var(--c-gray-200); border-radius: var(--radius-md);
    background-color: var(--c-white); color: var(--c-gray-800);
    transition: var(--transition-fast); font-family: var(--font-body);
    line-height: 1.8;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
    outline: none; border-color: var(--c-green); box-shadow: 0 0 0 4px rgba(32,124,132,.1);
}
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: var(--c-gray-400); }
.wpcf7 textarea { resize: vertical; min-height: 120px; }
.wpcf7 select {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234b5563' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}

.wpcf7 .wpcf7-acceptance { margin: 28px 0; }
.wpcf7 .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 12px; font-size: .875rem; color: var(--c-gray-600); line-height: 1.7; cursor: pointer; }
.wpcf7 .wpcf7-acceptance input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0 0; cursor: pointer; accent-color: var(--c-green); flex-shrink: 0; }
.wpcf7 .wpcf7-acceptance a { color: var(--c-green-dark); text-decoration: underline; font-weight: 600; }
.wpcf7 .wpcf7-acceptance a:hover { color: var(--c-blue); }

.wpcf7 input[type="submit"] {
    width: 100%; padding: 16px; font-size: 1.125rem;
    font-weight: 600; letter-spacing: .02em;
    background-color: var(--c-red); color: var(--c-white);
    border: 2px solid var(--c-red); border-radius: var(--radius-md);
    cursor: pointer; transition: var(--transition-normal); font-family: var(--font-body);
}
.wpcf7 input[type="submit"]:hover { background-color: var(--c-red-dark); border-color: var(--c-red-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.wpcf7 .wpcf7-not-valid-tip { font-size: .8125rem; color: var(--c-red); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.wpcf7 .wpcf7-not-valid { border-color: var(--c-red) !important; }
.wpcf7 .wpcf7-response-output { margin: 20px 0 0; padding: 24px; border-radius: var(--radius-lg); font-size: 1rem; text-align: center; }
.wpcf7 .wpcf7-validation-errors { border: 2px solid var(--c-red); background-color: rgba(231,77,61,.1); color: var(--c-red); }
.wpcf7 .wpcf7-mail-sent-ok { border: 2px solid var(--c-success); background-color: rgba(16,185,129,.1); color: var(--c-success); font-weight: 600; }
.wpcf7 .wpcf7-mail-sent-ok::before { content: '✓ '; font-size: 1.5rem; display: block; margin-bottom: 8px; }


/* ============================================
   COMPONENT: FOOTER WAVE + FOOTER
   ============================================ */

/*
 * The wave sits ON TOP of the previous section instead of after it: the SVG is
 * transparent above the curve, so leaving it in the flow painted a white band
 * between the section and the footer. Pulling it up by its own height lets the
 * section's gradient show through the transparent part.
 */
.footer-wave {
    --footer-wave-height: 4.5rem;
    position: relative;
    z-index: 1;
    margin-block-start: calc(var(--footer-wave-height) * -1);
    margin-bottom: -2px;
    line-height: 0;
    pointer-events: none;   /* it is decoration; never steal a click */
}
.footer-wave svg { display: block; width: 100%; height: var(--footer-wave-height); }

.footer {
    background-color: var(--c-footer-bg); color: #ccc;
    padding: 60px 0 30px;
}

.footer__grid {
    display: grid; grid-template-columns: 1.5fr 1fr 2fr;
    gap: 60px; margin-bottom: 40px;
    max-width: var(--container-max); margin-left: auto; margin-right: auto;
    padding: 0 20px;
}

.footer__col-title { font-family: var(--font-headline); font-size: 1.125rem; font-weight: 600; color: var(--c-white); margin-bottom: 20px; }

.footer__logo { margin-bottom: 24px; }
.footer__logo img { height: 100px; width: auto; }
.footer__description { font-size: .9375rem; color: #ccc; line-height: 1.7; margin-bottom: 24px; }

.footer__social { display: flex; gap: 16px; }
.footer__social-link {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background-color: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%; color: var(--c-white); font-size: 1.125rem;
    transition: var(--transition-normal);
}
.footer__social-link:hover { background-color: var(--c-green); border-color: var(--c-green); transform: translateY(-3px); }

.footer__links { list-style: none; padding: 0; margin: 0 0 36px; }
.footer__links li { margin-bottom: 10px; }
.footer__links a { font-size: .9375rem; color: #ccc; transition: var(--transition-normal); display: inline-block; }
.footer__links a:hover { color: var(--c-green-light); transform: translateX(2px); }

.footer__contact-info { margin-top: 36px; }
.footer__contact-item { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .9375rem; color: #ccc; transition: var(--transition-normal); }
.footer__contact-item i { color: var(--c-green); font-size: 1rem; flex-shrink: 0; }
.footer__contact-item:hover i { color: var(--c-red); transform: scale(1.1); }
.footer__contact-item a { color: #ccc; transition: var(--transition-normal); }
.footer__contact-item a:hover { color: var(--c-green); }

.footer__map { display: flex; justify-content: center; align-items: flex-start; }
.footer__map img { height: 350px; border-radius: var(--radius-card); width: auto; transition: transform .3s ease, box-shadow .3s ease; cursor: pointer; }
.footer__map img:hover { transform: scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,.3); }

.footer__bottom {
    padding: 30px 20px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    text-align: center;
    max-width: var(--container-max); margin: 0 auto;
}
.footer__bottom p { font-size: .875rem; margin: 0; color: #ccc; }


/* ============================================
   PAGE: QUIENES SOMOS
   ============================================ */

.team-hero { padding: 120px 0 80px; }
.team-hero__inner { max-width: 900px; margin: 0 auto; padding: 0 20px; text-align: center; }
.team-hero__title { font-size: clamp(2rem, 5vw, 2.75rem); color: var(--c-white); margin-bottom: 40px; font-weight: 700; line-height: 1.2; }
.team-hero__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
/* Same call as the hero figures: a photo frame, not a pane of frosted glass. */
.team-hero__card { background-color: var(--c-beige); border: 0; border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-md); transition: var(--transition-normal); }
.team-hero__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* Beige panel, so the text must be dark — it inherited white from the section. */
.team-hero__card p { font-family: var(--font-headline); font-size: 1rem; color: var(--c-blue); margin: 0; font-weight: 500; line-height: 1.5; }
.team-hero__text { text-align: left; }
.team-hero__text p { font-size: 1.0625rem; color: rgba(255,255,255,.9); line-height: 1.9; margin-bottom: 24px; }
.team-hero__text p:last-child { margin-bottom: 0; }
.team-hero__text strong { color: var(--c-white); font-weight: 600; }

/* Members */
.members { background-color: var(--c-beige); padding: 40px 0; }
.members__inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.members__title { text-align: center; margin-bottom: 50px; }
.members__showcase { display: grid; grid-template-columns: 400px 1fr; gap: 50px; align-items: start; }
.members__photo-area { display: flex; flex-direction: column; align-items: center; }
.members__photo-main { width: 400px; height: 360px; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 30px rgba(30,20,10,.14); margin-bottom: 16px; background-color: var(--c-beige); }
.members__photo-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }

.members__thumbs { display: flex; gap: 14px; justify-content: center; }
.members__thumb {
    width: 70px; height: 70px; border-radius: 12px; overflow: hidden;
    cursor: pointer; border: 2px solid transparent; transition: var(--transition-normal);
    opacity: .6; background-color: #d0d0d0; padding: 0;
}
.members__thumb:hover { opacity: .9; transform: translateY(-2px); }
.members__thumb.is-active { border-color: var(--c-green); opacity: 1; box-shadow: 0 4px 12px rgba(32,124,132,.3); }
.members__thumb img { width: 100%; height: 100%; object-fit: cover; }

.members__info { padding-top: 20px; }
.members__name { font-size: 2rem; color: var(--c-blue); margin-bottom: 8px; font-weight: 700; opacity: 0; transform: translateY(10px); animation: fadeInUp .5s ease forwards; }
.members__role { font-family: var(--font-body); font-size: 1.0625rem; color: var(--c-green); margin-bottom: 60px; font-weight: 600; opacity: 0; transform: translateY(10px); animation: fadeInUp .5s ease .1s forwards; }
.members__bio { font-size: 1.1rem; color: var(--c-gray-600); line-height: 1.9; opacity: 0; transform: translateY(10px); animation: fadeInUp .5s ease .2s forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* Accompany */
.accompany { background-color: var(--c-beige); padding: 20px 0; }
.accompany__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px 40px; }
.accompany__title { text-align: center; margin-bottom: 50px; }
.accompany__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.accompany-card h3 { font-size: 1.25rem; color: var(--c-blue); margin-bottom: 14px; font-weight: 700; text-align: center; }
.accompany-card > p { font-size: 1rem; color: var(--c-gray-600); line-height: 1.8; margin-bottom: 12px; text-align: center; }
.accompany-card__list { list-style: none; padding: 0; margin: 0 0 28px; text-align: left; flex-grow: 1; }
.accompany-card__list li { font-size: .9375rem; color: var(--c-gray-600); line-height: 1.7; padding-left: 28px; position: relative; margin-top: 12px; }
.accompany-card__list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .75rem; color: var(--c-green); position: absolute; left: 0; top: 3px; }

/* CTA Final */
.cta-final { padding: 20px 0; }
.cta-final__inner { max-width: 700px; margin: 0 auto; padding: 0 20px; text-align: center; }
.cta-final__title { font-size: clamp(2rem, 5vw, 2.5rem); color: var(--c-white); margin-bottom: 20px; }
.cta-final__text { font-size: 1.125rem; color: rgba(255,255,255,.9); line-height: 1.9; margin-bottom: 36px; }
.cta-final__btn {
    display: inline-block; background-color: var(--c-red); color: var(--c-white);
    padding: 18px 42px; font-size: 1.0625rem; font-weight: 600;
    border-radius: var(--radius-md); transition: var(--transition-normal);
    box-shadow: 0 4px 20px rgba(231,77,61,.4); margin-bottom: 30px;
}
.cta-final__btn:hover { background-color: var(--c-red-dark); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(231,77,61,.5); }


/* ============================================
   PAGE: PRIVACY POLICY
   ============================================ */

.privacy { background-color: var(--c-beige); padding: 100px 0 80px; min-height: 100vh; }
.privacy__inner { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.privacy__title { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 12px; }
.privacy__date { font-family: var(--font-body); font-size: .9375rem; color: var(--c-gray-500); margin-bottom: 32px; font-style: italic; }
.privacy__intro { font-size: 1.0625rem; color: var(--c-gray-700); line-height: 1.9; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(30,62,87,.15); }
.privacy__block { margin-bottom: 36px; }
.privacy__block h2 { font-size: 1.25rem; color: var(--c-blue); margin-bottom: 16px; font-weight: 600; line-height: 1.4; }
.privacy__block p { font-family: var(--font-body); font-size: 1rem; color: var(--c-gray-600); line-height: 1.9; margin-bottom: 12px; }
.privacy__block ul { list-style: none; padding: 0; margin: 16px 0; }
.privacy__block ul li { font-family: var(--font-body); font-size: 1rem; color: var(--c-gray-600); line-height: 1.9; padding-left: 24px; position: relative; margin-bottom: 8px; }
.privacy__block ul li::before { content: "•"; color: var(--c-green); font-weight: bold; position: absolute; left: 8px; }
.privacy__block a { color: var(--c-green-dark); font-weight: 500; transition: color .3s ease; }
.privacy__block a:hover { color: var(--c-green-dark); text-decoration: underline; }
.privacy__note { font-size: .9375rem; color: var(--c-gray-500); font-style: italic; margin-top: 8px; }
.privacy__back { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(30,62,87,.15); text-align: center; }
.privacy__back-btn {
    display: inline-block; background-color: var(--c-red); color: var(--c-white);
    padding: 16px 36px; font-size: 1rem; font-weight: 600;
    border-radius: var(--radius-md); transition: var(--transition-normal);
    box-shadow: 0 4px 15px rgba(231,77,61,.3);
}
.privacy__back-btn:hover { background-color: var(--c-red-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(231,77,61,.4); }


/* ============================================
   PAGE: GENERIC / 404 / FALLBACK
   Serves page.php, 404.php and index.php. Variants only swap the variables
   declared on the block, never rewrite its rules.
   ============================================ */

.page-basic {
    --page-bg:   var(--c-beige);
    --page-ink:  var(--c-gray-600);
    --page-max:  50rem;

    background-color: var(--page-bg);
    padding-block: clamp(6rem, 10vw, 7.5rem) clamp(3rem, 6vw, 5rem);
    min-block-size: 60vh;
}

.page-basic__inner { max-inline-size: var(--page-max); margin-inline: auto; padding-inline: 1.25rem; }

.page-basic__header { margin-block-end: 2rem; }
.page-basic__title { font-size: clamp(2rem, 5vw, 2.75rem); color: var(--c-blue); margin-block-end: .75rem; }
.page-basic__intro {
    font-family: var(--font-body); font-size: 1.0625rem;
    color: var(--c-gray-700); line-height: 1.9; margin: 0;
}

.page-basic__thumbnail { margin-block: 2rem; }
.page-basic__thumbnail img { inline-size: 100%; block-size: auto; display: block; border-radius: var(--radius-md); }

/* ---- Editor output: the theme has no control over this markup ---- */
.page-basic__content { font-family: var(--font-body); font-size: 1rem; color: var(--page-ink); line-height: 1.9; }
.page-basic__content > * + * { margin-block-start: 1rem; }
.page-basic__content h2 { font-family: var(--font-headline); font-size: 1.375rem; color: var(--c-blue); margin-block-start: 2.5rem; font-weight: 600; line-height: 1.4; }
.page-basic__content h3 { font-family: var(--font-headline); font-size: 1.125rem; color: var(--c-blue); margin-block-start: 2rem; font-weight: 600; }
.page-basic__content ul, .page-basic__content ol { padding-inline-start: 0; margin-block: 1rem; list-style: none; }
.page-basic__content li { position: relative; padding-inline-start: 1.5rem; margin-block-end: .5rem; line-height: 1.9; }
.page-basic__content ul li::before { content: "•"; color: var(--c-green); font-weight: bold; position: absolute; inset-inline-start: .5rem; }
.page-basic__content ol { counter-reset: page-basic-item; }
.page-basic__content ol li::before { counter-increment: page-basic-item; content: counter(page-basic-item) "."; color: var(--c-green); font-weight: 600; position: absolute; inset-inline-start: .25rem; }
.page-basic__content a { color: var(--c-green-dark); font-weight: 500; transition: var(--transition-fast); }
.page-basic__content a:hover { color: var(--c-green-dark); text-decoration: underline; }
.page-basic__content img { max-inline-size: 100%; block-size: auto; border-radius: var(--radius-md); }
.page-basic__content blockquote {
    margin-inline: 0; padding-inline-start: 1.25rem;
    border-inline-start: 3px solid var(--c-green);
    font-style: italic; color: var(--c-gray-700);
}
.page-basic__content table { inline-size: 100%; border-collapse: collapse; }
.page-basic__content th, .page-basic__content td { padding: .75rem; border-block-end: 1px solid var(--c-gray-200); text-align: start; }
/* A wide table must scroll inside itself, never push the page sideways. */
.page-basic__content .wp-block-table { overflow-x: auto; }

.page-basic__pagination { margin-block-start: 2rem; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; font-family: var(--font-body); }

/* ---- Listing (search results, archives) ---- */
.page-basic__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
.page-basic__list-item { background-color: var(--c-white); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.page-basic__list-item h2 { font-size: 1.25rem; margin-block-end: .5rem; }
.page-basic__list-item h2 a { color: var(--c-blue); transition: var(--transition-fast); }
.page-basic__list-item h2 a:hover { color: var(--c-green); }
.page-basic__list-item p { font-family: var(--font-body); color: var(--c-gray-600); line-height: 1.8; margin: 0; }

.page-basic .nav-links { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-block-start: 2.5rem; font-family: var(--font-body); }
.page-basic .nav-links .page-numbers { padding: .5rem .875rem; border-radius: var(--radius-sm); color: var(--c-blue); background-color: var(--c-white); }
.page-basic .nav-links .page-numbers.current { background-color: var(--c-green); color: var(--c-white); }

.page-basic__back { margin-block-start: 3rem; padding-block-start: 2.5rem; border-block-start: 1px solid rgba(30,62,87,.15); text-align: center; }

/* ---- 404 variant ---- */
.page-basic--error { text-align: center; }
.page-basic--error .page-basic__intro { margin-inline: auto; max-inline-size: 34rem; }
.page-basic__code {
    font-family: var(--font-headline); font-weight: 700; line-height: 1;
    font-size: clamp(4rem, 14vw, 8rem); color: var(--c-green);
    opacity: .22; margin: 0 0 -.5rem;
}
.page-basic__links ul { list-style: none; padding: 0; margin-block: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: center; }
.page-basic__links a { font-family: var(--font-body); color: var(--c-green-dark); font-weight: 600; transition: var(--transition-fast); }
.page-basic__links a:hover { color: var(--c-green-dark); text-decoration: underline; }


/* ============================================
   PAGE: SINGLE WORKSHOP
   ============================================ */

.workshop-hero { padding: 120px 0 60px; }
.workshop-hero__inner { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: center; max-width: var(--container-max); margin: 0 auto; }
.workshop-hero__image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); }
.workshop-hero__img { width: 100%; height: auto; display: block; }
.workshop-hero__title { font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--c-white); margin-bottom: 20px; }
.workshop-hero__target { color: rgba(255,255,255,.85); font-size: 1rem; margin-bottom: 20px; }
.workshop-hero__target i { margin-right: 8px; }
.workshop-hero__modality { margin-bottom: 28px; }
.workshop-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }

.workshop-content { padding: var(--section-py) 0; }
.workshop-content__inner { max-width: 800px; margin: 0 auto; }
.workshop-content__inner h2,
.workshop-content__inner h3 { font-family: var(--font-headline); color: var(--c-blue); margin-bottom: 16px; margin-top: 32px; }
.workshop-content__inner p { line-height: 1.9; color: var(--c-gray-700); margin-bottom: 20px; }
.workshop-content__inner ul { padding-left: 24px; margin-bottom: 20px; }
.workshop-content__inner ul li { line-height: 1.8; color: var(--c-gray-700); margin-bottom: 8px; }

.workshop-nav { background-color: var(--c-beige); padding: 40px 0; }
.workshop-nav__inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.workshop-nav__link { display: inline-flex; align-items: center; gap: 8px; color: var(--c-blue); font-weight: 600; font-size: .9375rem; transition: var(--transition-fast); padding: 10px 20px; border-radius: var(--radius-md); border: 2px solid var(--c-gray-200); }
.workshop-nav__link:hover { color: var(--c-green); border-color: var(--c-green); background-color: var(--c-green-light); }
.workshop-nav__link--all { background-color: var(--c-blue); color: var(--c-white); border-color: var(--c-blue); }
.workshop-nav__link--all:hover { background-color: var(--c-green); border-color: var(--c-green); color: var(--c-white); }

/* Archive workshops */
.archive-hero { padding: 100px 0 60px; }
.archive-workshops { padding: var(--section-py) 0; }
.archive-workshops__empty { text-align: center; font-size: 1.125rem; color: var(--c-gray-500); margin-bottom: 32px; }
.archive-workshops__cta { text-align: center; }

/* Pagination */
.wp-pagenavi,
.navigation.pagination { text-align: center; margin-top: 60px; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 600; color: var(--c-blue); border: 2px solid var(--c-gray-200); margin: 0 4px; transition: var(--transition-fast); }
.page-numbers.current,
.page-numbers:hover { background-color: var(--c-green); color: var(--c-white); border-color: var(--c-green); }
.page-numbers.prev, .page-numbers.next { width: auto; padding: 0 20px; border-radius: var(--radius-full); }


/* ============================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================ */

@media (max-width: 1024px) {
    .section { padding: var(--section-py-tablet) 0; }
    .section__header { margin-bottom: 40px; }

    .header__nav { gap: 24px; }
    .header__menu { gap: 24px; }
    .header__link { font-size: .875rem; }

    .hero { min-height: 110vh; padding: 100px 20px 120px; }
    .hero__parallax img { width: 95vw; }
    .hero__cta { margin-bottom: 100px; }
    .hero__authority { gap: 60px; }
    .authority-card { padding: 20px 22px; min-width: 200px; }
    .hero__underline { bottom: 3px; height: 26px; }

    .intro { padding: var(--section-py-tablet) 0; }
    .intro__grid { grid-template-columns: 1fr; gap: 24px; max-width: 600px; margin: 0 auto; }
    .card { padding: 36px; }

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

    .about { padding: var(--section-py-tablet) 0; }
    .about__grid { gap: 40px; }
    .about__image { height: 480px; }

    .audience__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .steps__title-wrap { padding: 20px 180px; }
    .steps__container { padding: 36px; height: auto; }

    .faq { padding: 50px 0 40px; }

    .contact__form-wrap { padding: 40px 36px; }

    .footer__grid { gap: 40px; }
    .footer__map img { height: 300px; }

    .team-hero { padding: 100px 0 60px; }
    .team-hero__cards { gap: 12px; }

    .members__showcase { grid-template-columns: 1fr; gap: 0; text-align: center; }
    .members__photo-area { order: 1; }
    .members__info { order: 2; }
    .members__photo-main { width: 400px; height: 400px; }

    .accompany__grid { gap: 20px; }

    .workshop-hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .workshop-hero { padding: 100px 0 40px; }
}


/* ============================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================ */

@media (max-width: 768px) {
    body { padding-top: 60px; }

    .section { padding: var(--section-py-mobile) 0; }
    .container { padding: 0 16px; }
    .section__header { margin-bottom: 32px; }

    .hero { min-height: 100vh; background-attachment: scroll; padding: 90px 16px 80px; }
    .hero__parallax img { width: 180vw !important; max-width: none !important; }
    .hero__cta { width: 100%; margin-bottom: 60px; }
    .hero__cta .btn { width: 100%; min-width: auto; max-width: 360px; }
    .hero__authority { flex-direction: column; gap: 18px; max-width: 320px; margin: 0 auto; }
    .authority-card { padding: 18px 22px; min-width: auto; width: 100%; }

    .btn { padding: 12px 24px; font-size: .9375rem; }
    .btn--lg { padding: 14px 28px; font-size: 1rem; }
    .btn--sm { padding: 8px 20px; font-size: .8125rem; }
    .card { padding: 32px 24px; }

    /* Header mobile */
    .header__toggle { display: flex; }
    .header__nav {
        position: fixed; top: 0; right: -100%; width: 100%; max-width: 320px;
        height: 100vh; background-color: var(--c-white);
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 80px 32px 32px; box-shadow: var(--shadow-2xl);
        transition: var(--transition-normal); overflow-y: auto;
    }
    .header__nav.is-active { right: 0; }
    .header__menu { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 32px; }
    .header__link { padding: 16px 0; border-bottom: 1px solid var(--c-gray-200); font-size: 1rem; }
    .header__link::after { display: none; }
    .header__cta { width: 100%; }
    .header__cta .btn { width: 100%; }
    .header__logo img { height: 40px; }

    /* Intro */
    .intro { padding: var(--section-py-mobile) 0; }
    .icon-circle { width: 70px; height: 70px; font-size: 1.75rem; }
    .icon-circle--sm { width: 55px; height: 55px; font-size: 1.5rem; }

    /* Services */
    .services__grid { grid-template-columns: 1fr; gap: 20px; }
    .service-card.card { padding: 36px 28px; }

    /* About */
    .about { padding: var(--section-py-mobile) 0; }
    .about__grid { grid-template-columns: 1fr; gap: 36px; }
    .about__image { order: -1; height: 380px; }
    .about__cta .btn { width: 100%; max-width: 100%; white-space: normal; line-height: 1.3; }

    /* Audience */
    .audience__grid { grid-template-columns: 1fr; gap: 16px; max-width: 500px; margin: 0 auto; }

    /* Steps */
    .steps { padding-top: 50px; }
    .steps__title-wrap { padding: 20px 100px; margin-bottom: 32px; }
    .steps__container { padding: 28px 24px; }
    .step__name { font-size: 1rem; }

    /* FAQ */
    .faq { padding: 40px 0 36px; }
    .faq-item__question { padding: 18px 20px; gap: 16px; }
    .faq-item__question h3 { font-size: 1rem; }
    .faq-item__answer-content { padding: 0 20px 20px; }

    /* Contact */
    .contact__form-wrap { padding: 36px 28px; }

    /* Footer */
    .footer { padding: 50px 0 24px; }
    .footer__grid { grid-template-columns: 1fr; gap: 36px; }
    .footer__logo img { height: 75px; }
    .footer__map img { height: 250px; max-width: 100%; }

    /* Team Hero */
    .team-hero { padding: 80px 0 50px; }
    .team-hero__cards { grid-template-columns: 1fr; gap: 12px; }
    .team-hero__text p { font-size: 1rem; }

    /* Members */
    .members { padding: 50px 0; }
    .members__photo-main { width: 260px; height: 260px; }
    .members__name { font-size: 1.5rem; }
    .members__bio { font-size: 1rem; text-align: left; }

    /* Accompany */
    .accompany__grid { grid-template-columns: 1fr; gap: 20px; max-width: 500px; margin: 0 auto; }

    /* CTA Final */
    .cta-final__btn { padding: 16px 36px; font-size: 1rem; }

    /* Privacy */
    .privacy { padding: 80px 0 60px; }
    .privacy__back-btn { padding: 14px 28px; font-size: .9375rem; }

    /* Workshop */
    .workshop-hero { padding: 80px 0 40px; }
    .workshop-hero__cta { flex-direction: column; }
    .workshop-nav__inner { justify-content: center; }
}


/* ============================================
   RESPONSIVE — SMALL MOBILE (≤480px)
   ============================================ */

@media (max-width: 480px) {
    .hero { min-height: 95vh; padding: 80px 16px 70px; }
    .hero__parallax img { width: 220vw !important; }
    .hero__cta { margin-bottom: 50px; }
    .hero__authority { max-width: 280px; gap: 16px; }
    .btn { width: 100%; }
    .contact__form-wrap { padding: 28px 20px; }
}


/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .hero__parallax img { opacity: 1; transform: none; }
    .hero__underline-path { stroke-dashoffset: 0; }
    html { scroll-behavior: auto; }
}