/* ===================  Variables / base  =================== */
:root{
  --green:#7FBB83;
  --dark:#2A3A1C;
  --lime:#C2C057;
  --cream:#FFFBDC;
  --orange:#F28C28;

  --textColor:#222;        /* texto general */
  --cardTextColor:#1b1b1b; /* texto dentro de la tarjeta crema */
  --titleFg:#FFFBDC;       /* color de texto del título */
  --accent:#CFC34A;        /* rectángulo decorativo detrás de la tarjeta */
  --illustrationColor:#2A3A1C; /* color aplicado al SVG inline (loro) */

  --max:1200px;
  --title-overlap: clamp(28px, 7vw, 96px);
}

*{ box-sizing:border-box }
html,body{ margin:0 }
body{
  font-family:"Gotham Book", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--green);
  color:var(--textColor);
}
.container{ width:min(100%, var(--max)); margin-inline:auto; padding-inline:16px }

/* ===================  Carrusel  =================== */
.hero-arc{
  position: relative;
  width: 100%;
  padding: 0;
  background: #E5EFE1;
  overflow: hidden;
  height: clamp(360px, 56vw, 620px);
}
.arc-track{
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  z-index: 1;
}
.arc-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
  will-change: opacity;
  pointer-events: none;
  z-index: 1;
}
.arc-img.is-active{ opacity:1 }

/* Flechas */
.arc-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; display:grid; place-items:center;
  border:none; border-radius:50%;
  background:var(--orange); color:#fff; cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.18);
  z-index:3;
  pointer-events: auto;
}
.arc-nav svg{ width:22px; height:22px }
.arc-nav--prev{ left:clamp(10px,3vw,24px) }
.arc-nav--next{ right:clamp(10px,3vw,24px) }
.arc-nav:active{ transform:translateY(calc(-50% + 1px)) }

/* ===================  Main =================== */
.afro{ display:flex; flex-direction:column; align-items:center; }

/* ---------- Título ---------- */
.afro__titleWrap{
  width:min(100%, var(--max));
  margin:0 auto;
  padding-inline:16px;
  display:flex; justify-content:center;
  position:relative; z-index:3;

  transform: translateY(calc(-1 * var(--title-overlap)));
  margin-bottom: calc(-1 * var(--title-overlap));
}
.afro__title{
  margin-bottom: 20px;
  text-align:center; color:var(--titleFg); background:var(--dark);
  display:inline-block;

  width: clamp(620px, 82vw, 1400px);
  font-family:"Gotham Black","Gotham Ultra",system-ui,sans-serif;
  font-weight:900;
  font-size: clamp(28px, 5.2vw, 80px);
  line-height:1.06;
  padding: clamp(16px, 2.8vw, 28px) clamp(22px, 3.6vw, 40px);

  border-top-right-radius: clamp(24px, 7vw, 100px);
  border-bottom-left-radius: clamp(24px, 7vw, 100px);
}

/* ---------- Texto general ---------- */
.afro__copy{
  width:min(100%, 1040px);
  margin: clamp(10px, 2vw, 16px) auto 0;
  color:var(--textColor);
}
.afro__copy p{
  margin:0 0 12px 0;
  text-align:justify;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height:1.6;
}

/* ---------- Tarjeta clara ---------- */
.afro__highlight{
  width:100%;
  margin-top: clamp(16px, 3vw, 24px);
  position:relative;
  display:grid; place-items:center;
}
.afro__card{
  position:relative; z-index:1;
  background:var(--cream); color:var(--cardTextColor);
  width:min(100%, 980px);
  padding: clamp(18px,3vw,28px);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.afro__card p{
  margin:0;
  font-size: clamp(16px,1.8vw,18px);
  line-height:1.7;
  text-align:justify;
}

/* decorativo atrás (accent) */
.afro__cardShadow{
  position:absolute; z-index:0;
  top: clamp(18px,2.5vw,28px);
  left: 67%; transform:translateX(-65%);
  width: min(400px, 74%);
  height: clamp(100px, 28vw, 260px);
  background:var(--accent);
}

/* ---------- Ilustración (SVG inline) ---------- */
.afro__illustration{
  width:min(100%, var(--max));
  margin: clamp(22px, 5vw, 40px) auto 0;
  padding-inline:16px;
  text-align:center;
}

/* tamaño base del contenedor SVG */
.afro__svg{
  width:min(1000px, 90%);
  height:auto;
  display:block;
  margin-inline:auto;
  color: var(--illustrationColor);
}

/* Forzar color del SVG inline aunque traiga fill/stroke propios */
.afro__svg [fill]:not([fill="none"])         { fill: var(--illustrationColor) !important; }
.afro__svg [stroke]:not([stroke="none"])     { stroke: var(--illustrationColor) !important; }
.afro__svg [style*="fill:"]:not([fill="none"]){ fill: var(--illustrationColor) !important; }
.afro__svg [style*="stroke:"]:not([stroke="none"]){ stroke: var(--illustrationColor) !important; }
.afro__svg *{ vector-effect: non-scaling-stroke; }

/* ===================  Footer  =================== */
.afro-footer{
  background:var(--dark);
  padding:16px;
  display:grid;
  place-items:center;
  position:relative;
}
.afro-footer__flower{ width:min(90px, 24vw); height:auto; display:block }

/* Botón VOLVER */
.afro-cta{
  position:absolute; top:12px; right:24px;
  background:var(--orange); color:#fff;
  font-weight:900; letter-spacing:.5px; text-decoration:none;
  padding:10px 18px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease;
  z-index:5;
}
.afro-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.16);
}

/* Viñetas con flor */
.afro__copy ul, .afro__card ul, ul.lista-flor { list-style:none; margin:12px 0 0 0; padding:0; }
.afro__copy li, .afro__card li, ul.lista-flor li{
  position:relative; margin:0 0 8px 0; padding-left:28px; line-height:1.6;
  font-size:clamp(15px, 1.6vw, 18px); color:inherit;
}
.afro__copy li::before, .afro__card li::before, ul.lista-flor li::before{
  content:""; position:absolute; left:0; top:0.35em; width:18px; height:18px;
  background:url("/img/memorias/comResponsabilidad/Flor.SVG") no-repeat center;
  background-size:contain;
}

.body-apa{
  background-color: #FFFBDC 
}

.afro-footer--apa{
  margin-top: 70px;
}

.copy_APA{
  margin-bottom: 70px;
}

/* ===================  Responsive =================== */
@media (min-width:1920px){ .hero-arc{ height: clamp(420px, 40vw, 720px); } }
@media (min-width:1440px) and (max-width:1919px){ .hero-arc{ height: clamp(380px, 42vw, 680px); } }
@media (min-width:1200px) and (max-width:1439px){
  .hero-arc{ height: clamp(360px, 48vw, 620px); }
  .arc-track{ border-radius:16px; }
}
@media (max-width:1024px){
  .hero-arc{ height: clamp(320px, 58vw, 540px); }
  .arc-track{ border-radius:12px; }
}
@media (max-width:768px){ .hero-arc{ height: clamp(300px, 64vw, 520px); } }
@media (max-width:640px){
  .hero-arc{ height: clamp(280px, 70vw, 500px); }
  .arc-track{ border-radius:0; }

  .hero-title-svg {
    max-width: 100vw;   
    width: 100%;         
    height: auto;       
    margin: 0 auto 12px; 
    display: block;
  }

  .hero-illustration {
    max-width: 70vw;     
    margin: 0 auto;
  }
}
@media (max-width:360px){ .hero-arc{ height: clamp(260px, 78vw, 460px); } }