/* ===== FUNDAMENTOS DE AYNIMATION =====
   Paleta, tipografías y escalas compartidas por todos los Blade públicos. */
:root {
   --green: #00be53;
   --pink: #f00faf;
   --cream: #fffbf3;
   --navy: #000938;
   --lime: #d2fc00;
   --blush: #fac4e0;
   --white: #fff;
   --ink: var(--navy);
   --muted: #41475e;
   --font-display: 'Bloby Crash', 'Arial Black', 'Host Grotesk', sans-serif;
   --font-body: 'Host Grotesk', sans-serif;
   /* ESCALA TIPOGRÁFICA GLOBAL: edita estos valores para cambiar todo el sitio. */
   --type-hero: 90px;
   --type-hero-home: 112px;
   --type-section: 40px;
   --type-eyebrow: 16px;
   --type-body: 16px;
   --type-button: 16px;
   --type-supporting: 16px;
   font-family: var(--font-body);
   color: var(--navy);
   background: var(--white);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
}

/* Normalización mínima: afecta toda la interfaz pública. */
* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   min-width: 320px;
   margin: 0;
   font-family: var(--font-body);
}

/* ===== CURSOR DECORATIVO =====
   El puntero usa v9.svg como máscara para poder recolorearlo. Cada sección declara
   data-cursor-tone: rosa muestra azul, verde muestra rosa y blanco/crema muestra verde. */
.site-cursor {
   --cursor-color: var(--green);
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10000;
   width: 46px;
   height: 46px;
   pointer-events: none;
   opacity: 0;
   background: var(--cursor-color);
   mask: url('../img/animaton/v9.svg') center / contain no-repeat;
   -webkit-mask: url('../img/animaton/v9.svg') center / contain no-repeat;
   transition: opacity .15s ease;
   will-change: transform;
}

.site-cursor.is-visible {
   opacity: 1;
}

.site-cursor--lime { --cursor-color: var(--lime); }
.site-cursor--navy { --cursor-color: var(--navy); }
.site-cursor--pink { --cursor-color: var(--pink); }
.site-cursor--green { --cursor-color: var(--green); }

/* En pantallas táctiles se conserva el comportamiento nativo del dispositivo. */
@media (pointer: fine) {
   html.has-custom-cursor,
   html.has-custom-cursor * {
      cursor: none !important;
   }
}

a {
   color: inherit;
   text-decoration: none;
}

p {
   line-height: 1.55;
}

/* ===== CABECERA Y NAVEGACIÓN =====
   Controla el logo, los enlaces y el indicador de página activa. */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100;
   background: transparent;
   transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled {
   background: var(--white);
   box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.site-header__inner {
   width: min(1240px, calc(100% - 64px));
   min-height: 100px;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
}

.brand {
   width: min(270px, 35vw);
   display: block;
   line-height: 0;
}

.brand--hidden-top {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
}

.site-header.is-scrolled .brand--hidden-top {
   opacity: 1;
   pointer-events: auto;
}

.brand img {
   width: 100%;
   height: auto;
   display: block;
   transition: filter 0.3s ease;
}

/* Volver el logo blanco cuando el header es transparente (fondo oscuro) */
.site-header:not(.is-scrolled) .brand img {
   filter: brightness(0) invert(1);
}

.site-nav {
   display: flex;
   align-items: center;
   gap: clamp(28px, 6vw, 94px);
}

.site-nav a {
   position: relative;
   color: var(--white);
   font-size: var(--type-supporting);
   font-weight: 600;
   transition: color 0.3s ease;
}

.site-header.is-scrolled .site-nav a {
   color: var(--navy);
}

.site-nav a::after {
   position: absolute;
   right: 0;
   bottom: -7px;
   left: 0;
   height: 2px;
   background: var(--pink);
   content: '';
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .2s ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
   transform: scaleX(1);
}

/* ===== COMPONENTES REUTILIZABLES =====
   Eyebrow, botones y utilidades usadas por las distintas páginas. */
.eyebrow {
   margin: 0 0 20px;
   color: var(--pink);
   font-size: var(--type-eyebrow);
   font-weight: 700;
   letter-spacing: .015em;
}

.button {
   min-width: 172px;
   min-height: 48px;
   padding: 13px 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 0;
   border-radius: 15px;
   color: var(--white);
   font-size: var(--type-button);
   font-weight: 600;
   text-align: center;
   transition: transform .2s ease, filter .2s ease;
}

.button:hover {
   filter: brightness(.94);
   transform: translateY(-2px);
}

.button--pink {
   background: var(--pink);
}

.button--green {
   background: var(--green);
   color: var(--navy);
}

.button--navy {
   background: var(--navy);
   color: var(--white);
}

.shape {
   position: absolute;
   pointer-events: none;
}

/* Contenedor base de la imagen con recorte fluido */
.blob-container {
  overflow: hidden;
  position: relative;
  display: block;
}

.blob-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Versión pegada al extremo derecho (curva a la izquierda, borde recto a la derecha) */
.blob-right {
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100,0 H20.7 C4.7,9 -2.3,9 0.7,31 C3.7,61 7.7,81 11.7,94 C13.7,99 18.7,100 22.7,100 H100 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100,0 H20.7 C4.7,9 -2.3,9 0.7,31 C3.7,61 7.7,81 11.7,94 C13.7,99 18.7,100 22.7,100 H100 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}

/* Versión pegada al extremo izquierdo (curva a la derecha, borde recto a la izquierda) */
.blob-left {
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H79.3 C95.3,9 102.3,9 99.3,31 C96.3,61 92.3,81 88.3,94 C86.3,99 81.3,100 77.3,100 H0 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H79.3 C95.3,9 102.3,9 99.3,31 C96.3,61 92.3,81 88.3,94 C86.3,99 81.3,100 77.3,100 H0 Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}

/* ===== ESTRUCTURAS COMPARTIDAS =====
   Bloques heredados de dos columnas y contenedores de imagen genéricos. */
.feature {
   min-height: 480px;
   padding: 72px max(64px, calc((100vw - 1240px) / 2));
   display: grid;
   grid-template-columns: 1fr 1.05fr;
   align-items: center;
   gap: clamp(55px, 8vw, 130px);
   overflow: hidden;
}

.feature--cream {
   background: var(--cream);
}

.feature--lime {
   grid-template-columns: 1fr 1fr;
   gap: clamp(60px, 9vw, 150px);
   background: var(--lime);
}

.feature--white {
   background: var(--white);
}

.feature__copy {
   max-width: 480px;
}

.feature__copy h2 {
   margin: 0 0 20px;
   color: var(--navy);
   font: 400 var(--type-section)/1.02 var(--font-display);
   letter-spacing: -.035em;
}

.feature__copy>p:not(.eyebrow) {
   margin: 0 0 25px;
   color: var(--muted);
   font-size: var(--type-body);
}

.feature--lime .feature__copy>p:not(.eyebrow) {
   color: var(--navy);
}

.feature__copy--right {
   justify-self: end;
}

.media-frame {
   position: relative;
   height: 330px;
   overflow: visible;
   background: #d9d9d9;
}

.visual-image {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
}

.feature--light {
   position: relative;
   min-height: 330px;
   background: #f2f2f2;
}

/* ===== VARIANTES Y ESTADOS ===== */
.eyebrow--outline {
   width: fit-content;
   padding: 8px 14px;
   border: 1px solid var(--pink);
   border-radius: 12px;
   color: var(--pink);
}

.button--outline-green {
   border: 1px solid var(--green);
   background: transparent;
   color: var(--green);
}

.selection-year {
   min-width: 145px;
   min-height: 34px;
   margin-bottom: 17px;
   padding: 6px 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--pink);
   border-radius: 12px;
   color: var(--pink);
   font-size: var(--type-supporting);
}

.selection-stats {
   margin-top: 25px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   text-align: center;
}

.selection-stats div {
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 3px;
}

.selection-stats strong {
   color: var(--navy);
   font-size: 30px;
   line-height: 1;
}

.selection-stats span {
   color: var(--navy);
   font-size: var(--type-supporting);
}

.selection-contact {
   min-height: 210px;
   padding: 35px max(64px, calc((100vw - 1240px) / 2));
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   gap: 35px;
   background: var(--cream);
}

.selection-contact>div {
   max-width: 640px;
}

.selection-contact h2 {
   margin: 0 0 10px;
   color: var(--navy);
   font-size: 30px;
   font-weight: 700;
}

.selection-contact p {
   margin: 0;
   color: var(--muted);
   font-size: var(--type-body);
}

.selection-contact .button {
   min-width: 190px;
}


/* ===== PLANTILLAS GENÉRICAS =====
   Se usan solo si una página no tiene un hero o sección personalizada en su propio Blade. */
.page-hero {
   min-height: 475px;
   padding: 92px 24px 100px;
   display: grid;
   place-items: center;
   text-align: center;
   background: var(--navy);
   color: var(--white);
}

.page-hero__content {
   width: min(780px, 100%);
}

.page-hero h1 {
   margin: 0;
   font: 400 var(--type-hero)/.95 var(--font-display);
   letter-spacing: -.055em;
}

.page-hero__description {
   max-width: 530px;
   margin: 24px auto 0;
   color: var(--white);
   font-size: var(--type-body);
   line-height: 1.7;
}

.page-placeholder {
   min-height: 280px;
   padding: 64px 24px 90px;
   background: var(--cream);
}

.page-placeholder__inner {
   width: min(920px, 100%);
   min-height: 130px;
   margin: auto;
   padding: 30px;
   border: 2px dashed #c5c5be;
   color: var(--muted);
   text-align: center;
   font-size: var(--type-body);
}

/* ===== PIE DE PÁGINA =====
   La forma de esquina se posiciona dentro de este contenedor con posición absoluta. */
.site-footer {
   position: relative;
   overflow: hidden;
   padding: 42px max(64px, calc((100vw - 1240px) / 2)) 0;
   background: var(--navy);
   color: var(--white);
}

.site-footer__grid {
   position: relative;
   z-index: 1;
   min-height: 190px;
   display: grid;
   grid-template-columns: 1fr 1.08fr 1fr;
}

.footer-brand,
.footer-column {
   padding: 0 48px;
   border-right: 1px solid rgb(255 255 255 / 45%);
}

.footer-brand {
   padding-left: 0;
}

.footer-column--social {
   border: 0;
}

.footer-brand__logo {
   width: 170px;
   max-width: 100%;
   display: block;
}

.footer-brand__logo img {
   width: 100%;
   height: auto;
   display: block;
}

.footer-brand p {
   max-width: 280px;
   margin: 16px 0;
   color: #d4d7e2;
   font-size: var(--type-body);
}

.footer-column h2 {
   margin: 0 0 16px;
   color: #d4d7e2;
   font-size: var(--type-eyebrow);
   font-weight: 600;
   text-transform: uppercase;
}

.footer-column p {
   margin: 10px 0;
   display: flex;
   align-items: center;
   gap: 14px;
   color: #d4d7e2;
   font-size: var(--type-body);
}

.social-links {
   display: flex;
   gap: 14px;
}

.social-links a {
   width: 37px;
   height: 37px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: #e5e7e8;
   color: var(--navy);
   font-size: 19px;
   font-weight: 700;
}

.social-links a img {
   max-width: 24px;
   max-height: 22px;
   display: block;
   object-fit: contain;
}

.site-footer__bottom {
   position: relative;
   z-index: 1;
   min-height: 50px;
   margin-top: 32px;
   display: grid;
   place-items: center;
   border-top: 1px solid rgb(255 255 255 / 55%);
   color: #d4d7e2;
   font-size: var(--type-supporting);
}

.shape--footer-corner {
   right: 0;
   bottom: 0;
   width: 118px;
   height: auto;
   display: block;
}

/* ===== AJUSTES RESPONSIVOS GLOBALES =====
   Adaptan cabecera, componentes reutilizables y footer; cada Blade mantiene los suyos. */
@media (max-width: 900px) {
   .site-header__inner {
      width: calc(100% - 40px);
      min-height: 84px;
   }

   .site-nav {
      gap: 24px;
   }

   .feature,
   .feature--lime {
      padding: 64px 40px;
      gap: 46px;
   }

   .site-footer {
      padding-right: 40px;
      padding-left: 40px;
   }

   .footer-brand,
   .footer-column {
      padding-right: 26px;
      padding-left: 26px;
   }

   .footer-brand {
      padding-left: 0;
   }

   .selection-contact {
      padding-right: 40px;
      padding-left: 40px;
   }
}

@media (max-width: 640px) {
   /* La misma escala se reduce aquí para móvil sin crear tamaños por página. */
   :root {
      --type-hero: clamp(52px, 14vw, 68px);
      --type-hero-home: clamp(56px, 15vw, 76px);
      --type-section: 40px;
      --type-eyebrow: 13px;
      --type-body: 14px;
      --type-button: 14px;
      --type-supporting: 14px;
   }

   .site-header__inner {
      width: calc(100% - 32px);
      padding: 18px 0;
      align-items: flex-start;
      flex-direction: column;
      gap: 18px;
   }

   .brand {
      width: 245px;
      max-width: 80vw;
   }

   .site-nav {
      width: 100%;
      gap: 23px;
      overflow-x: auto;
      padding: 0 0 4px;
   }

   .site-nav a {
      flex: 0 0 auto;
      font-size: 13px;
   }

   .feature,
   .feature--lime {
      padding: 58px 24px;
      grid-template-columns: 1fr;
      gap: 36px;
   }

   .feature__copy h2 {
      font-size: var(--type-section);
   }

   .feature__copy>p:not(.eyebrow) {
      font-size: var(--type-body);
   }

   .media-frame {
      height: 240px;
   }

   .feature--light {
      min-height: 230px;
   }

   .selection-stats {
      gap: 10px;
   }

   .selection-stats strong {
      font-size: 25px;
   }

   .selection-stats span {
      font-size: 11px;
   }

   .selection-contact {
      min-height: 225px;
      padding: 38px 24px;
      grid-template-columns: 1fr;
      gap: 20px;
      text-align: center;
   }

   .selection-contact h2 {
      font-size: 28px;
   }

   .selection-contact p {
      font-size: 13px;
   }

   .selection-contact .button {
      justify-self: center;
   }

   .page-hero {
      min-height: 380px;
      padding: 75px 24px;
   }

   .page-hero h1 {
      font-size: clamp(44px, 12vw, 68px);
   }

   .page-hero__description {
      font-size: 15px;
   }

   .page-placeholder {
      min-height: 220px;
      padding: 44px 20px 60px;
   }

   .site-footer {
      padding: 34px 24px 0;
   }

   .site-footer__grid {
      grid-template-columns: 1fr 1fr;
      gap: 30px 0;
   }

   .footer-brand {
      grid-column: 1 / -1;
      padding: 0 0 24px;
      border: 0;
      border-bottom: 1px solid rgb(255 255 255 / 35%);
   }

   .footer-column {
      padding: 0 18px 0 0;
      border: 0;
   }

   .footer-column--social {
      padding-right: 0;
   }

   .social-links {
      flex-wrap: wrap;
      gap: 9px;
   }

   .social-links a {
      width: 33px;
      height: 33px;
   }

   .site-footer__bottom {
      margin-top: 28px;
   }

   .shape--footer-corner {
      right: 0;
      bottom: 0;
      width: 88px;
      height: auto;
   }
}