@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/effects.css");
@import url("tokens/base.css");

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-8)}

.section{padding:var(--section-y) 0}
.section--tight-top{padding-top:88px}
.section--dark{background:var(--surface-dark)}
.section--subtle{background:var(--surface-subtle)}
.section--page{background:var(--surface-page)}

img{max-width:100%}

/* ==========================================================================
   Navbar
   ========================================================================== */

/* Sticky header with a semi-transparent deep-navy fill plus a glass blur, so
   the light-coloured links stay legible over any section once the page
   scrolls. */
.navbar{position:sticky;top:0;z-index:40;
  background:rgba(9,23,42,.9);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
  border-bottom:1px solid var(--border-on-dark)}
/* On the Inicio hero the header floats over the image (fixed) and is fully
   transparent on load — no fill, no blur, no border — so the hero shows
   through. Once the page scrolls, JS adds .navbar--scrolled and the deep-navy
   glass fill fades in (so the links stay legible over the light sections). */
.navbar--overlay{position:fixed;left:0;right:0;
  background-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),backdrop-filter var(--dur-base) var(--ease-standard)}
.navbar--overlay.navbar--scrolled{
  background-color:rgba(9,23,42,.9);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
  border-bottom-color:var(--border-on-dark)}

.navbar__inner{display:flex;align-items:center;gap:var(--space-10);height:112px}

.navbar__logo{height:84px;width:auto;display:block}

.navbar__links{display:flex;gap:var(--space-8);margin-left:auto}
.navbar__links a{font:var(--type-button);font-size:var(--fs-body-sm);text-decoration:none;color:rgba(255,255,255,.78);transition:color var(--dur-base) var(--ease-standard)}
.navbar__links a:hover{color:var(--elipsa-green-400);text-decoration:none}
.navbar__links a.is-active{color:var(--elipsa-green-400)}

.navbar__toggle{display:none;margin-left:auto;background:none;border:1px solid var(--border-on-dark);border-radius:var(--radius-sm);color:var(--white);width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:var(--type-button);letter-spacing:var(--ls-button);border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;
  padding:12px 22px;font-size:var(--fs-body-sm);
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.btn:active{transform:scale(var(--press-scale))}
.btn:hover{text-decoration:none}
.btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}

/* Size modifiers — .btn alone is already medium-sized (matches the original
   design system's default). */
.btn--sm{padding:8px 16px;font-size:var(--fs-caption)}
.btn--md{padding:12px 22px;font-size:var(--fs-body-sm)}
.btn--lg{padding:16px 30px;font-size:var(--fs-body)}
.btn--full{width:100%}

.btn--primary{background:var(--elipsa-green-600);color:var(--ink-950);box-shadow:var(--shadow-accent)}
.btn--primary:hover{background:var(--elipsa-green-500)}
.btn--brand{background:var(--elipsa-blue-700);color:var(--white);box-shadow:var(--shadow-brand)}
.btn--brand:hover{background:var(--elipsa-blue-600)}
.btn--secondary{background:var(--white);color:var(--ink-900);border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.btn--secondary:hover{background:var(--ink-50);border-color:var(--border-strong)}
.btn--outline{background:transparent;color:var(--elipsa-blue-800);border-color:var(--elipsa-blue-700)}
.btn--outline:hover{background:var(--elipsa-blue-100)}
.btn--ghost{background:transparent;color:var(--text-body)}
.btn--ghost:hover{background:var(--ink-100)}
.btn--onDark{background:rgba(255,255,255,.10);color:var(--white);border-color:var(--border-on-dark);backdrop-filter:blur(var(--blur-glass))}
.btn--onDark:hover{background:rgba(255,255,255,.18)}

.btn svg{flex:none}

/* ==========================================================================
   Badge
   ========================================================================== */

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-pill);font:var(--type-eyebrow);font-size:var(--fs-caption);letter-spacing:.01em}
.badge--uppercase{letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.badge--accent{background:var(--elipsa-green-100);color:var(--elipsa-green-800)}
.badge--onDark{background:rgba(255,255,255,.10);color:var(--white)}
a .badge{cursor:pointer}

/* ==========================================================================
   Card
   ========================================================================== */

.card{border-radius:var(--radius-card);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.card--plain{background:var(--surface-card);border:1px solid var(--border-subtle);color:var(--text-body);box-shadow:var(--shadow-sm)}
.card--subtle{background:var(--surface-card-subtle);border:1px solid var(--border-subtle);color:var(--text-body)}
.card--dark{background:var(--surface-dark-raised);border:1px solid var(--border-on-dark);color:var(--text-on-dark-muted);box-shadow:none}
.card--gradient{background:var(--gradient-blue);border:1px solid transparent;color:var(--white)}

.card--pad-none{padding:0}
.card--pad-md{padding:var(--space-6)}
.card--pad-lg{padding:var(--space-8)}

.card--interactive{cursor:pointer}
.card--interactive:hover{transform:translateY(var(--hover-lift));box-shadow:var(--shadow-lg)}

/* ==========================================================================
   Icon / FeatureIcon
   ========================================================================== */

.icon{display:block;flex:none}

.feature-icon{width:52px;height:52px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.feature-icon--accent{background:var(--elipsa-green-100);color:var(--elipsa-green-800)}
.feature-icon--brand{background:var(--elipsa-blue-100);color:var(--elipsa-blue-800)}
.feature-icon--onDark{background:rgba(255,255,255,.08);color:var(--elipsa-green-400);border:1px solid var(--border-on-dark)}
/* Wrapper span just centers the injected <svg>; the glyph size comes from the
   svg's own width/height (set by icons.js from data-icon-size). */
.feature-icon > .icon{display:flex;align-items:center;justify-content:center}
.feature-icon svg{width:auto;height:auto;flex:none}

/* ==========================================================================
   GradientText
   ========================================================================== */

.gradient-text{background-image:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline}

/* ==========================================================================
   SectionHeading
   ========================================================================== */

.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);text-align:left}
.section-heading--center{align-items:center;justify-content:center;flex-direction:column;text-align:center}
.section-heading__copy{max-width:620px;display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.section-heading--center .section-heading__copy{align-items:center}
.section-heading__title{margin:0;font-size:var(--fs-display-md);line-height:var(--lh-snug);letter-spacing:var(--ls-display);color:var(--text-strong)}
.section-heading--dark .section-heading__title{color:var(--white)}
.section-heading__desc{margin:0;font:var(--type-body);font-size:var(--fs-body-lg);color:var(--text-muted)}
.section-heading--dark .section-heading__desc{color:var(--text-on-dark-muted)}

/* ==========================================================================
   Input
   ========================================================================== */

.field{display:flex;flex-direction:column;gap:6px}
.field__label{font:var(--type-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)}
.field__control{display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-control);transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.field__control:focus-within{border-color:var(--border-focus);box-shadow:var(--ring-focus)}
.field--error .field__control{border-color:var(--status-danger)}
.field__control .icon{color:var(--text-faint)}
.field__control input,.field__control textarea{flex:1;border:none;outline:none;background:transparent;font:var(--type-body-sm);color:var(--text-strong);padding:12px 0;font-family:var(--font-body)}
.field textarea{padding:12px 14px;border:1px solid var(--border-default);border-radius:var(--radius-control);resize:vertical;font:var(--type-body-sm);color:var(--text-strong);font-family:var(--font-body)}
.field textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--ring-focus)}
.field__hint{font:var(--type-body-sm);font-size:var(--fs-caption);color:var(--text-muted)}
.field--error .field__hint{color:var(--status-danger)}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;gap:var(--space-3);align-items:flex-start;min-width:300px;max-width:420px;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-4);
  transform:translateY(12px);opacity:0;pointer-events:none;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out)}
.toast.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
.toast__icon{color:var(--status-success);margin-top:1px}
.toast__title{font:var(--type-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)}
.toast__message{font:var(--type-body-sm);font-size:var(--fs-caption);color:var(--text-muted);margin-top:2px}
.toast__close{border:none;background:none;cursor:pointer;color:var(--text-faint);padding:0;margin-left:auto}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer{background:var(--surface-dark);color:var(--text-on-dark-muted)}
.footer__grid{padding:var(--space-20) var(--space-8) var(--space-8);display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-12)}
.footer__brand{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.footer__brand p{font:var(--type-body-sm);max-width:300px;margin:0}
.footer__social{display:flex;gap:var(--space-3);margin-top:var(--space-2)}
.footer__social a{width:36px;height:36px;border-radius:50%;border:1px solid var(--border-on-dark);display:flex;align-items:center;justify-content:center;color:var(--white)}
.footer__col{display:flex;flex-direction:column;gap:var(--space-3)}
.footer__col-title{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--white)}
.footer__col a{font:var(--type-body-sm);color:var(--text-on-dark-muted);text-decoration:none}
.footer__legal{border-top:1px solid var(--border-on-dark)}
.footer__legal-inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-5) var(--space-8);font:var(--type-body-sm);font-size:var(--fs-caption)}

/* ==========================================================================
   Photo
   ========================================================================== */

.photo{position:relative;aspect-ratio:4 / 3;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-100)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85)}
.photo--flush{border-radius:0}
.photo--scrim::after{content:"";position:absolute;inset:0;background:var(--gradient-protect)}

/* ==========================================================================
   Hero (Inicio)
   ========================================================================== */

/* Full-screen hero: fills the viewport on load. dvh/svh keep it honest on
   mobile where the browser chrome eats into 100vh; padding-top clears the
   fixed header so the content stays centred in the space below it. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:112px}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,26,36,.94) 0%,rgba(11,26,36,.82) 48%,rgba(23,61,99,.62) 100%)}
.hero__glow{position:absolute;inset:0;background:radial-gradient(760px 380px at 82% 14%,rgba(95,201,236,.22),transparent 70%)}
.hero__inner{position:relative;padding:var(--space-10) 0;width:100%}
.hero__content{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start;max-width:720px}
.hero__title{margin:0;font-size:var(--fs-display-lg);line-height:var(--lh-tight);letter-spacing:var(--ls-display);color:var(--white)}
.hero__lede{margin:0;font:var(--type-body);font-size:var(--fs-body-lg);color:rgba(255,255,255,.82);max-width:560px}
.hero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-2)}

/* Servicios hero — same photo + dark-overlay treatment as the Inicio hero,
   ~50% taller than the plain heading band it replaced. */
.services-hero{position:relative;overflow:hidden;min-height:590px;display:flex;align-items:center;background:var(--surface-dark);padding:112px 0}
.services-hero > .container{position:relative;z-index:1;width:100%}

/* ==========================================================================
   Grids used across pages
   ========================================================================== */

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16)}
.grid-2--tight{gap:var(--space-12)}

.service-card{overflow:hidden;display:flex;flex-direction:column}
.service-card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.service-card__body h3{margin:0;font:var(--type-h3);font-size:var(--fs-h3)}
.service-card__body p{margin:0;font:var(--type-body-sm);color:var(--text-muted)}
.service-card__more{margin-top:auto;padding-top:var(--space-4);display:inline-flex;align-items:center;gap:6px;font:var(--type-button);color:var(--elipsa-blue-700)}
/* The whole card is a link: don't underline the title/subtitle on hover —
   keep the underline only on the "Ver más" affordance. */
.service-card:hover{text-decoration:none}
.service-card:hover .service-card__more{text-decoration:underline;text-underline-offset:3px}

.value-badges{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}

.value-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;padding:var(--space-8)}
.value-card h3{margin:0;font:var(--type-h3);font-size:var(--fs-h3)}
.value-card p{margin:0;font:var(--type-body-sm);color:var(--text-muted)}

.cta-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:var(--space-12);border-radius:var(--radius-xl)}
.cta-card h2{margin:0;font-size:var(--fs-h1);color:var(--white);letter-spacing:var(--ls-display)}
.cta-card p{margin:10px 0 0;font:var(--type-body);font-size:var(--fs-body-lg);color:rgba(255,255,255,.85);max-width:560px}

.mission-card{padding:var(--space-10)}
.mission-card h2{margin:var(--space-5) 0 var(--space-4);font:var(--type-h1);color:var(--white)}
.mission-card p{margin:0;font:var(--type-body);color:var(--text-on-dark-muted)}

/* Servicios page blocks */
.service-block{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}
.service-block__copy h2{margin:var(--space-5) 0 var(--space-4);font-size:var(--fs-display-md);letter-spacing:var(--ls-display)}
.service-block__copy p{font:var(--type-body);font-size:var(--fs-body-lg);color:var(--text-muted);max-width:540px;margin:0}
.service-block__copy .btn{margin-top:var(--space-8)}
.service-block--flip .service-block__copy{order:2}
.service-block--flip .service-block__media{order:1}
.service-tags{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-8)}

/* Contacto page */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-16)}
.contact-points{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-10)}
.contact-points a{display:flex;gap:var(--space-4);align-items:center;text-decoration:none}
.contact-points a .label{display:block;font:var(--type-body-sm);font-size:var(--fs-caption);color:var(--text-muted)}
.contact-points a .value{font:var(--type-body);font-weight:var(--fw-semibold);color:var(--text-strong)}
.contact-social{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.contact-social a{display:inline-flex;text-decoration:none}
.contact-social a:hover .feature-icon{background:var(--elipsa-blue-200)}
.hours-card{margin-top:var(--space-8);padding:var(--space-6)}
.hours-card__head{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-3)}
.hours-card__head span{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.hours-row{display:flex;justify-content:space-between;font:var(--type-body-sm);color:var(--text-body);padding:4px 0}
.hours-row span:last-child{font-family:var(--font-mono)}

.contact-form-card{padding:var(--space-10)}
.contact-form-card h2{margin:0 0 var(--space-6);font:var(--type-h2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.form-row + .field{margin-top:var(--space-5)}
.field + .field{margin-top:var(--space-5)}
/* Inside the row the grid gap handles spacing — the sibling margin above would
   otherwise push the 2nd field down and misalign the hint texts. */
.form-row > .field{margin-top:0}
.contact-form-card .btn{margin-top:var(--space-8)}
.form-status{margin:var(--space-4) 0 0;font:var(--type-body-sm);font-size:var(--fs-caption);color:var(--status-danger);text-align:center}

.map-card{overflow:hidden;display:flex;align-items:stretch}
.map-card__info{padding:var(--space-10);min-width:320px;display:flex;flex-direction:column;gap:var(--space-3);justify-content:center}
.map-card__info h3{margin:8px 0 0;font:var(--type-h3)}
.map-card__info p{margin:0;font:var(--type-body-sm);color:var(--text-muted)}
.map-card iframe{border:0;flex:1;min-height:320px}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2,.service-block,.contact-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .service-block--flip .service-block__copy,.service-block--flip .service-block__media{order:initial}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .cta-card{flex-direction:column;align-items:flex-start;text-align:left}
  .map-card{flex-direction:column}
}

@media (max-width: 720px){
  .container{padding:0 var(--space-5)}
  .navbar__inner{height:76px}
  .navbar__links{display:none;position:absolute;top:76px;left:0;right:0;background:var(--surface-dark);flex-direction:column;gap:0;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border-on-dark)}
  .navbar__links.is-open{display:flex}
  .navbar__links a{padding:var(--space-3) 0}
  .navbar__toggle{display:flex}
  .grid-4{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;padding:var(--space-12) var(--space-5) var(--space-6)}
  .hero{padding-top:88px}
  .hero__title{font-size:var(--fs-display-md)}
  .hero__actions{flex-wrap:wrap}
  .services-hero{min-height:460px;padding:96px 0}
  .form-row{grid-template-columns:1fr}
  .map-card__info{min-width:0}
}