/* ==========================================================================
   KRAVITTAL — components.css
   Piezas reutilizables en todas las páginas: cabecera, navegación, pie,
   botones, formulario y tarjetas. Todo lo que aquí aparece tiene su
   equivalente en ELEMENTOR-MAPPING.md.
   ========================================================================== */

/* --- 1. Cabecera --------------------------------------------------------- */
/*  Figma: 1920×87 · logo en x=162 · menú de 16 px en versal · botón de
    contacto de 186×47 pegado al borde derecho del contenedor.              */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--kv-bg-01);
  border-top: 1px solid var(--kv-champagne-arena);
  transition: box-shadow var(--kv-dur) var(--kv-ease),
              background   var(--kv-dur) var(--kv-ease);
}

.header.is-stuck { box-shadow: 0 1px 0 rgba(33, 51, 59, .12); }

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
  min-height: var(--kv-header-h);
}

.header__logo {
  flex: 0 0 auto;
  width: clamp(130px, 8.9vw, 171px);
  transition: opacity .35s var(--kv-ease);
}

.header__logo:hover { opacity: .7; }
.header__logo svg,
.header__logo img { width: 100%; height: auto; }

.header__nav { flex: 1 1 auto; }

.header__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 1.875vw, 36px);
}

.header__link {
  font-size: var(--kv-fs-base);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--kv-azul-petroleo);
  position: relative;
  padding-block: 0.5rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color .35s var(--kv-ease);
}

.header__link:hover,
.header__link:focus-visible { color: var(--kv-champagne-arena); }

/* Subrayado que crece desde la izquierda — sustituye a un hover de color */
.header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.25rem;
  height: 1px;
  background: var(--kv-champagne-arena);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--kv-ease-out);
}

.header__link:hover::after,
.header__link:focus-visible::after,
.header__link[aria-current="page"]::after { transform: scaleX(1); }

.header__link[aria-current="page"] { color: var(--kv-champagne-oscuro); }

.header__social {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 0 0 auto;
}

/* Los SVG van en línea y heredan el color, así se recolorean en el pie */
.header__social a {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--kv-champagne-arena);
  transition: opacity .25s ease;
}

.header__social a:hover { opacity: .65; }
.header__social svg { width: 100%; height: 100%; }

/* Botón hamburguesa — sólo visible por debajo de 1200 px */
.header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  position: relative;
}

.header__toggle span,
.header__toggle span::before,
.header__toggle span::after {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 1px;
  background: var(--kv-azul-petroleo);
  transform: translateX(-50%);
  transition: transform var(--kv-dur) var(--kv-ease),
              opacity   var(--kv-dur) var(--kv-ease);
}

.header__toggle span { top: 50%; }
.header__toggle span::before { content: ""; left: 0; transform: translateY(-7px); }
.header__toggle span::after  { content: ""; left: 0; transform: translateY(7px); }

.header__toggle[aria-expanded="true"] span { background: transparent; }
.header__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.header__toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg); }


/* --- 2. Botones ---------------------------------------------------------- */
/*  Figma: caja de 186×47, borde de 1 px champagne. La variante sólida
    (ENVIAR) rellena con champagne y pone el texto en blanco a 20 px.       */

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-width: 186px;
  min-height: 47px;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--kv-champagne-arena);
  background: transparent;
  color: var(--kv-azul-petroleo);
  font-size: var(--kv-fs-base);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  transition: color .35s var(--kv-ease), border-color .35s var(--kv-ease);
}

/* El relleno entra barriendo desde la izquierda en lugar de encenderse de
   golpe. Va en un ::before bajo el texto (z-index -1 + isolation). */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--button-fill, var(--kv-champagne-arena));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--kv-ease-out);
}

.button:hover::before,
.button:focus-visible::before { transform: scaleX(1); }

.button:hover,
.button:focus-visible { color: var(--kv-white); }

.button--primary {
  --button-fill: var(--kv-champagne-oscuro);
  min-width: 186px;
  justify-content: space-between;
  padding-inline: 1.75rem;
  background: var(--kv-champagne-arena);
  color: var(--kv-white);
  font-size: var(--kv-fs-lg);
}

.button--primary:hover,
.button--primary:focus-visible { border-color: var(--kv-champagne-oscuro); }

.button svg {
  flex: none;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  transition: transform .45s var(--kv-ease-out);
}

/* La flecha sale hacia arriba y a la derecha */
.button--primary:hover svg,
.button--primary:focus-visible svg { transform: translate(3px, -3px); }

.button--wide { min-width: 320px; min-height: 61px; }

/* Sobre fondo oscuro */
.button--claro { color: var(--kv-arena-suave); }


/* --- 3. Formulario ------------------------------------------------------- */
/*  Figma: dos columnas de 304 px con 20 px de canal; alto de campo 40 px;
    área de mensaje de 627×123; botón alineado a la derecha.                */

.form { max-width: 628px; }

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 23px;
}

.form__field { display: flex; flex-direction: column; }
.form__field--full { grid-column: 1 / -1; }

.form__label {
  font-size: var(--kv-fs-base);
  line-height: 1.25;
  padding-bottom: 0.5rem;
}

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid var(--kv-champagne-arena);
  border-radius: 0;
  font-size: var(--kv-fs-base);
  color: var(--kv-azul-petroleo);
  transition: border-color .35s var(--kv-ease),
              background-color .35s var(--kv-ease);
}

.form__input:hover,
.form__textarea:hover,
.form__select:hover { border-color: var(--kv-champagne-oscuro); }

.form__textarea { min-height: 123px; resize: vertical; }

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: 2px solid var(--kv-champagne-oscuro);
  outline-offset: 1px;
  border-color: var(--kv-champagne-oscuro);
  background: rgba(255, 255, 255, .45);
}

/* La etiqueta acompaña al campo enfocado */
.form__label { transition: color .3s var(--kv-ease); }
.form__field:focus-within .form__label { color: var(--kv-champagne-oscuro); }

.form__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 52px;
}


/* --- 4. Tarjeta de miembro del equipo ------------------------------------ */
/*  Figma: retrato de 463×579 con una tarjeta blanca de 425×146 montada
    sobre su base. Las tres columnas van escalonadas en vertical.           */

.member { position: relative; }

.member__photo {
  aspect-ratio: 463 / 579;
  overflow: hidden;
}

.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--kv-ease-out);
}

.member:hover .member__photo img { transform: scale(1.05); }

.member__card {
  position: relative;
  margin-top: -92px;               /* solape exacto del diseño              */
  margin-left: 0;
  width: 91.8%;                    /* 425 / 463                             */
  min-height: 146px;
  padding: 1rem clamp(1rem, 1.3vw, 25px);
  background: var(--kv-white);
  transition: transform .6s var(--kv-ease-out);
}

.member:hover .member__card { transform: translateY(-7px); }

.member__name {
  font-size: var(--kv-fs-h3);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--kv-azul-petroleo);
  transition: color .4s var(--kv-ease);
}

.member:hover .member__name { color: var(--kv-champagne-arena); }

.member__role {
  font-size: var(--kv-fs-h4);
  line-height: 1.2;
  color: var(--kv-champagne-arena);
  padding-top: 0.5rem;
}

.member__extra {
  font-size: var(--kv-fs-base);
  line-height: 1.25;
  padding-top: 0.5rem;
}


/* --- 5. Banda de llamada a la acción ------------------------------------- */
/*  Se repite en Celebrities, Creadores, Ejecutivos y Noticias.
    Figma: banda de 1920×337 en Background 02 con una caja de 1591×307 en
    Background 03 que la desborda por abajo.                                */

.cta {
  position: relative;
  /* Separación con el bloque anterior: 195 px en el diseño. Vive aquí, con
     el componente, y no en la hoja de una página: Noticias no carga
     interior.css y se quedaba pegada a la paginación. */
  margin-top: clamp(3rem, 10.16vw, 195px);
  padding-block: 49px clamp(3rem, 7.8vw, 150px);
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 337px;
  background: var(--kv-bg-02);
}

.cta__inner { position: relative; }

.cta__title { text-align: center; }

.cta__box {
  margin-top: clamp(1.5rem, 2.55vw, 49px);
  min-height: 307px;
  padding: clamp(2rem, 4.32vw, 83px) clamp(1.25rem, 3vw, 58px) clamp(2rem, 3.4vw, 65px);
  background: var(--kv-bg-03);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 2.55vw, 49px);
  text-align: center;
}

.cta__text { max-width: 653px; }


/* --- 5b. Cabecera de página interior ------------------------------------- */
/*  Franja de imagen a sangre de 1920×470 y titular centrado debajo.        */

.banner-top {
  position: relative;
  overflow: hidden;
  min-height: min(470px, 24.48vw);
  background: var(--kv-bg-03);
}

.banner-top img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-head {
  padding-block: clamp(2.5rem, 4.69vw, 90px) clamp(2rem, 3.28vw, 63px);
  text-align: center;
}


/* --- 6. Pie -------------------------------------------------------------- */
/*  Figma: banda de 1920×706 en azul petróleo, logo centrado de 461×125,
    iconos sociales, filete de 1596 px y línea legal a dos columnas.        */

.footer {
  background: var(--kv-azul-petroleo);
  color: var(--kv-white);
  padding-block: clamp(4rem, 11.2vw, 215px) clamp(2.5rem, 3.2vw, 62px);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__logo {
  display: block;
  width: min(461px, 80%);
}

/* En Figma el bloque del pie mide 461×125: la marca ocupa el 69 % superior
   y el claim se apoya en el 15 % inferior. */
.footer__claim {
  display: block;
  width: 92.85%;                     /* 428,03 / 461                        */
  margin: 0 auto;
  padding-top: 5.2%;
}

.footer__social {
  display: flex;
  gap: 1.3125rem;
  padding-top: clamp(2.5rem, 8.2vw, 158px);
}

.footer__social a {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--kv-arena-suave);
  transition: opacity .25s ease;
}

.footer__social a:hover { opacity: .65; }
.footer__social svg { width: 100%; height: 100%; }

.footer__rule {
  width: 100%;
  height: 1px;
  margin-top: clamp(2rem, 5.5vw, 106px);
  background: rgba(255, 255, 255, .35);
  border: 0;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--kv-space-2xs);
  width: 100%;
  padding-top: 0.5rem;
  font-family: var(--kv-font-alt);
  font-weight: var(--kv-peso-regular);
  font-size: var(--kv-fs-sm);
}

.footer__legal a { transition: color var(--kv-dur) var(--kv-ease); }
.footer__legal a:hover { color: var(--kv-arena-suave); text-decoration: underline; }


/* --- 8. Marco de esquinas ------------------------------------------------ */
/*  Cuatro escuadras alrededor de un icono. Los iconos exportados de Figma
    ya llevan el marco dibujado; esto es para los iconos de trazo que no lo
    traen, como los del acordeón de «Nuestro método».                       */

.frame {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--frame-size, 53px);
  height: var(--frame-size, 53px);
  color: var(--frame-color, var(--kv-champagne-arena));
}

.frame::before,
.frame::after,
.frame__corners::before,
.frame__corners::after {
  content: "";
  position: absolute;
  width: var(--frame-corner, 14px);
  height: var(--frame-corner, 14px);
  border: 1px solid currentColor;
  transition: inset var(--kv-dur) var(--kv-ease-out);
}

.frame::before { top: var(--frame-inset, 0); left:  var(--frame-inset, 0); border-right: 0; border-bottom: 0; }
.frame::after  { top: var(--frame-inset, 0); right: var(--frame-inset, 0); border-left:  0; border-bottom: 0; }

.frame__corners { position: absolute; inset: 0; }
.frame__corners::before { bottom: var(--frame-inset, 0); left:  var(--frame-inset, 0); border-right: 0; border-top: 0; }
.frame__corners::after  { bottom: var(--frame-inset, 0); right: var(--frame-inset, 0); border-left:  0; border-top: 0; }

.frame__icon { width: var(--frame-icon, 33px); height: var(--frame-icon, 33px); }
.frame__icon svg { width: 100%; height: 100%; stroke: currentColor; }


/* --- 9. Acordeón --------------------------------------------------------- */
/*  La altura se anima con grid-template-rows (0fr -> 1fr), que no necesita
    medir el contenido con JavaScript. El atributo hidden se quita antes de
    abrir y se repone al cerrar, para que lo plegado quede fuera del árbol
    de accesibilidad.                                                       */

.accordion { display: grid; gap: clamp(0.625rem, 0.573vw, 11px); }

.accordion__item { display: grid; }

.accordion__header {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.146vw, 22px);
  width: 100%;
  min-height: 78px;
  padding: 0.75rem clamp(1rem, 1.719vw, 33px) 0.75rem clamp(1rem, 2.5vw, 48px);
  background: var(--kv-champagne-arena);
  color: var(--kv-arena-suave);
  font-size: var(--kv-fs-h3);
  line-height: 1.15;
  text-transform: uppercase;
  text-align: left;
  transition: background-color var(--kv-dur) var(--kv-ease);
}

.accordion__header .frame {
  --frame-color: var(--kv-arena-suave);
}

.accordion__header:hover,
.accordion__header:focus-visible { background: var(--kv-champagne-oscuro); }

.accordion__header:hover .frame,
.accordion__header:focus-visible .frame { --frame-inset: -5px; }

.accordion__label { flex: 1 1 auto; }

.accordion__chevron {
  flex: none;
  width: 38px;
  height: 38px;
  transform: rotate(180deg);
  transition: transform var(--kv-dur) var(--kv-ease);
}

.accordion__chevron svg { width: 100%; height: 100%; stroke: currentColor; }

.accordion__header[aria-expanded="true"] .accordion__chevron { transform: rotate(0deg); }

.accordion__panel {
  padding: clamp(1rem, 1.198vw, 23px) clamp(1rem, 2.5vw, 48px) 0.5rem;
  font-size: var(--kv-fs-lg);
  line-height: 1.15;
}

.accordion__panel[hidden] { display: none; }

/* Con JavaScript activo la apertura se anima */
.kv-js .accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  padding-block: 0;
  opacity: 0;
  transition: grid-template-rows .55s var(--kv-ease-out),
              opacity           .45s var(--kv-ease),
              padding-block     .55s var(--kv-ease-out);
}

.kv-js .accordion__panel > * { overflow: hidden; }

.kv-js .accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-block: clamp(1rem, 1.198vw, 23px) 0.5rem;
}


/* --- 11. Bloque de contacto --------------------------------------------------------- */

.contacto__title { text-align: center; padding-bottom: var(--kv-space-lg); }

.contacto__grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 86px);
  align-items: start;
}

.contacto__media {
  aspect-ratio: 560 / 700;
  overflow: hidden;
}

.contacto__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--kv-ease-out);
}

.contacto__media:hover img { transform: scale(1.04); }

.contacto__body { padding-top: 1.125rem; max-width: 847px; }
.contacto__body p + p { padding-top: 1.25rem; }

.contacto__form { padding-top: var(--kv-space-md); }



/* --- 12. Responsive de los componentes ----------------------------------- */

@media (max-width: 1199px) {

  .contacto__grid { grid-template-columns: minmax(0, 1fr); }

  .header__toggle { display: block; margin-left: auto; }

  .header__nav {
    position: fixed;
    inset: var(--kv-header-h) 0 auto 0;
    max-height: calc(100dvh - var(--kv-header-h));
    overflow-y: auto;
    background: var(--kv-bg-01);
    border-top: 1px solid var(--kv-champagne-arena);
    transform: translateY(-101%);
    visibility: hidden;
    transition: transform var(--kv-dur) var(--kv-ease),
                visibility 0s linear var(--kv-dur);
  }

  .header__nav.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--kv-dur) var(--kv-ease), visibility 0s;
  }

  .header__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--kv-space-xs) var(--kv-gutter) var(--kv-space-sm);
  }

  .header__item { width: 100%; }

  .header__link {
    display: block;
    width: 100%;
    padding-block: 0.875rem;
    font-size: var(--kv-fs-lg);
    border-bottom: 1px solid rgba(173, 133, 102, .3);
  }

  .header__link::after { display: none; }

  .header__social { order: 1; }

  .member__card { width: 100%; margin-top: -64px; }
}

@media (max-width: 767px) {

  /* A 390 px no caben logo (171) + hamburguesa (44) + botón (186). Se
     reduce el botón en vez de esconderlo: es la llamada a la acción
     principal y debe seguir visible. */
  .header__logo img { width: 130px; }

  .header .button {
    min-width: 0;
    min-height: 38px;
    padding-inline: 0.875rem;
    font-size: var(--kv-fs-sm);
  }

  .header__inner { gap: 0.75rem; }

  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .form__actions { justify-content: stretch; padding-top: var(--kv-space-sm); }
  .form__actions .button { width: 100%; }

  .header__social { display: none; }      /* ya están en el pie             */

  .footer__legal { flex-direction: column; align-items: center; text-align: center; }

  .member__card { margin-top: -48px; padding: 1rem 1.125rem; }
}


@media (max-width: 767px) {
  .accordion__header {
    min-height: 0;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    font-size: var(--kv-fs-h4);
  }
  .accordion__header .frame { --frame-size: 40px; --frame-icon: 24px; --frame-corner: 11px; }
  .accordion__chevron { width: 28px; height: 28px; }
}