/* ===========================
 * Acordeon EPM – Estilos
 * =========================== */

@font-face {
  font-family: 'EPM Rounded';
  src: url('https://michatoya.devbluedevs.com/wp-content/uploads/2025/09/EPM-Rounded-BT-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EPM Sans Regular';
  src: url('https://michatoya.devbluedevs.com/wp-content/uploads/2025/09/EPM-Sans-BT-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


.aepm-title {
  font-family: 'EPM Rounded', sans-serif;
}

.aepm-short,
.aepm-long {
  font-family: 'EPM Sans Regular', sans-serif;
}


/* Ocultar en teléfono */
@media (max-width:767px){
  .aepm-accordion{ display:none; }
}

/* Dimensiones base (ajusta si quieres) */
:root{
  --aepm-card-w: 380px;      /* 260–320px */
  --aepm-card-min-h: 460px;
  --aepm-green: #9bc93c;
}

/* Contenedor */
.aepm-accordion{
  display:flex; flex-wrap:wrap; gap:28px; justify-content:center;
}

/* Modo "uno abierto": centrado y más ancho el activo */
.aepm-accordion.one-open{ justify-content:center; }
.aepm-accordion.one-open .aepm-card.is-open{
  width:560px; max-width:92vw; flex-basis:560px;
}
/* Si quieres ocultar las demás cuando hay uno abierto, descomenta: */
/*
.aepm-accordion.one-open .aepm-card:not(.is-open){ display:none; }
*/

/* Tarjeta */
.aepm-card{
  flex:0 1 var(--aepm-card-w);
  max-width:var(--aepm-card-w);
  min-height:var(--aepm-card-min-h);
  background:#fff;
  border-radius:18px;
  border-top-left-radius:42px;     /* curva fuerte sup-izq */
  border-top-right-radius:0;       /* cuadrada */
  border-bottom-left-radius:0;     /* cuadrada */
  border-bottom-right-radius:42px; /* curva fuerte inf-der */
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  transition:all .4s ease;
}
.aepm-accordion:not(.one-open) .aepm-card:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}
.aepm-accordion.one-open .aepm-card.is-open{
  transform:translateZ(0) scale(1.01);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}

/* Cabecera */
.aepm-header{
  position:relative; z-index:2;
  background:#fff;
  padding:22px 18px 30px;    /* espacio arriba del recorte */
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  /* base con ligera panza */
  border-bottom-left-radius: 100% 40px;
  border-bottom-right-radius: 100% 40px;
}
.aepm-icon{
  width:104px; height:104px; object-fit:contain;
  border-radius:50%; border:2px solid #D8E9DA; padding:12px;
}
.aepm-title {
  font-family: 'EPM Rounded', sans-serif;
  margin: 0 0 6px;
  color: #3681bf;
  font-weight: 600; /* semi-bold */
  line-height: 1.2;
  font-size: 40px; /* móvil */
}

@media (min-width: 768px) {
  .aepm-title { font-size: 45px; } /* tablet */
}

@media (min-width: 1024px) {
  .aepm-title { font-size: 50px; } /* desktop */
}


/* Cuerpo verde */
.aepm-body{
  position:relative; z-index:1;
  background:var(--aepm-green); color:#124;
  padding:35px 18px 80px;    /* alto para botón */
  border-radius:0;
  border-bottom-left-radius:0;      /* cuadrada */
  border-bottom-right-radius:42px;  /* curva coincide con tarjeta */
  margin-top:-25px;                 /* solapa bajo la cabecera */
  flex:1;
}

/* >>> Curva en U MÁS MARCADA entre blanco y verde <<< */
.aepm-body::before{
  content:"";
  position:absolute; left:0; right:0;
  top:-64px;                 /* más arriba = U más profunda */
  height:96px;               /* más alto = U más grande */
  background:var(--aepm-green);
  /* elipses grandes para U pronunciada */
  border-top-left-radius: 140% 120px;
  border-top-right-radius: 140% 120px;
  z-index:-1;
}

/* Texto corto (sin clamp) */
.aepm-short,
.aepm-long {
  font-family: 'EPM Sans Regular', sans-serif;
  color: #fff;
  line-height: 1.6;
  font-size: 16px; /* móvil */
}

@media (min-width: 768px) {
  .aepm-short,
  .aepm-long { font-size: 20px !important; } /* tablet */
}

@media (min-width: 1024px) {
  .aepm-short,
  .aepm-long { font-size: 20px !important; } /* desktop */
}



/* Texto largo (al expandir) */
.aepm-long{
  margin-top:12px; color:#fff; font-size:16px; line-height:1.7;
}

/* Botón – dentro del verde, grande y sin hover rosado */
.aepm-toggle{
  position:absolute; left:18px; bottom:18px;
  width:52px; height:52px; padding:0;
  border:none; background:transparent; cursor:pointer; z-index:3;
  outline:none !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent; appearance:none;
}
.aepm-toggle:hover,
.aepm-toggle:focus,
.aepm-toggle:active{
  background:transparent !important; outline:none !important; box-shadow:none !important; filter:none !important;
}
.aepm-arrow{ width:100%; height:100%; transition:transform .3s cubic-bezier(.25,.1,.25,1); }
.aepm-arrow circle{ fill:#FFD43B; transition:fill .2s ease; }
.aepm-toggle:hover .aepm-arrow circle{ fill:#fce176; }
.aepm-arrow path{
  stroke: var(--aepm-green); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; fill:none;
}

/* Estados */
.aepm-card.is-open .aepm-short{ opacity:0; height:0; overflow:hidden; display:none; }
.aepm-card.is-open .aepm-long[hidden]{ display:block; }
.aepm-card.is-open .aepm-arrow{ transform:rotate(180deg); }