/* ==========================================================================
   Selección Oro Absoluto — Acerca de
   El hero ahora vive en site.css como componente compartido .split-hero
   (ver assets/css/site.css) para poder reutilizarlo en el resto de páginas
   internas con la misma calidad visual.
   ========================================================================== */


.split-hero {
  min-height: 75svh;
}

/* Fondo en un ::before propio (no directo en la sección) para poder
   animar su entrada sin afectar la opacidad del contenido. Reutiliza el
   mismo mecanismo de body.is-loading que ya usan .js-reveal/.js-reveal-header
   (ver site.js: finishPreloader quita is-loading al mismo tiempo que
   dispara "site:ready"), así que entra en fade sincronizado con el resto
   del hero sin necesidad de JS adicional. */
.split-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(../img/acerca-de-hero.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out);
}

body.is-loading .split-hero::before {
  opacity: 0;
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .split-hero::before { transition: none; }
}

/* En mobile el texto pasa a ocupar todo el ancho (centrado) e incluye el
   botón + "Descubre más", así que ya no queda espacio vacío a la derecha
   para el fondo bottom-right. El padding-bottom por sí solo no bastaba:
   .split-hero::before tenía inset:0 (ocupaba TODA la altura de la
   sección) y con background-size:contain sobre un ancho angosto la
   imagen se escala muy alta, invadiendo el botón/cue sin importar
   cuánto aire se reservara abajo. Se ancla a una franja fija pegada al
   fondo (mismo alto que el padding-bottom) para que nunca pueda subir
   hasta el contenido. */
@media (max-width: 900px) {
  .split-hero {
    padding-bottom: min(42vh, 250px);
  }

  .split-hero::before {
    top: auto;
    height: min(42vh, 380px);
    background-position: bottom center;
  }
}


/* ---- Complemento "¿Qué es...?" ---- */

.about-intro {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--c-grey-050);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  position: relative;
}

.about-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url(../img/premiacion-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out);
    width: 100%;
    height: 100%;
    top: 0;
    background-attachment: fixed;
}

.about-intro__card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.about-intro__card h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 1.2rem;
  color: var(--c-gold);
}

.about-intro__card p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-grey-text);
  margin: 0 0 1rem;
}

.about-intro__card p:last-child { margin-bottom: 0; }

/* ---- Visión / Misión ---- */

.vision-mission {
  padding: var(--space-section) 0;
}

.vm-card {
  height: 100%;
  padding: clamp(2rem, 3.5vw, 2.75rem);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.vm-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: transparent;
}

.vm-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-grey-100);
  color: var(--c-gold);
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}

.vm-card:hover .vm-card__icon {
  background: var(--c-gold);
  color: var(--c-white);
  transform: scale(1.1) rotate(-8deg);
}

.vm-card h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-bottom: 0.85rem;
}

.vm-card p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-grey-text);
  margin: 0;
}

/* ---- Nuestros principios ---- */

.principles {
  padding: var(--space-section) 0;
  background: var(--c-grey-050);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.principles__head {
  max-width: 60ch;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.principles__head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  margin-top: 0.5rem;
}

.principle-card {
  height: 100%;
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.1rem, 2vw, 1.5rem);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.principle-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: transparent;
}

.principle-card__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-grey-100);
  color: var(--c-gold);
  font-size: 1.2rem;
  transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}

.principle-card:hover .principle-card__icon {
  background: var(--c-gold);
  color: var(--c-white);
  transform: scale(1.1) rotate(-8deg);
}

.principle-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.principle-card p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--c-grey-text);
  margin: 0;
}

@media (max-width: 991.98px) {
  .principles__grid .col-lg { flex: 0 0 auto; }
}

/* ---- ¿Qué NO somos? ---- */

.not-us {
  padding: var(--space-section) 0;
}

.not-us__box {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
}

.not-us__head {
  max-width: 50ch;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  text-align: center;
}

.not-us__head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-top: 0.5rem;
}

.not-us__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}

.not-us__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.98rem;
}

.not-us__item i {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.85rem;
}

.not-us__item--no {
  background: var(--c-grey-050);
  color: var(--c-grey-text);
}

.not-us__item--no i {
  background: var(--c-grey-100);
  color: rgba(20, 18, 15, 0.45);
}

.not-us__item--yes {
  grid-column: 1 / -1;
  background: var(--c-grey-100);
  color: var(--c-black);
  font-weight: 600;
  border: 1px solid var(--c-gold-light);
}

.not-us__item--yes i {
  background: var(--c-gold);
  color: var(--c-white);
}

@media (max-width: 575.98px) {
  .not-us__list { grid-template-columns: 1fr; }
}