/*
 * E-Iure — página Services (maqueta «Services — 3»). Se carga después de home.css e inner.css.
 */

.eh .mhero{padding:92px 0 80px}
.eh .draft{display:inline-block;font-size:11px;font-weight:600;color:#8a6d1f;background:#f7edcf;border:1px solid #e4cf8f;border-radius:6px;padding:2px 8px;margin-left:6px}

/* POR QUÉ LA RED */
.eh .value{padding:84px 0}
.eh .value .g{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.eh .value h2{font-size:clamp(28px,3.6vw,44px);margin:10px 0 16px}
.eh .value p{font-size:17px;color:#4a4a44;margin-bottom:14px}
.eh .value .points{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px}
.eh .value .points li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.eh .value .points i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--green);color:var(--ink);font-style:normal;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:2px}

/* Frase con foto de fondo + velo verde (mismo velo que el banner de las convenciones) */
.eh .quote{position:relative;border-radius:22px;overflow:hidden;min-height:380px;display:flex;align-items:flex-end;padding:34px;background:linear-gradient(150deg,#3F7A2E,#7AC956);isolation:isolate}
.eh .quote .qimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.eh .quote::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(31,51,21,.45),rgba(20,40,20,.8))}
.eh .quote.noimg::before{display:none}
.eh .quote blockquote{color:#fff;font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);line-height:1.35;text-shadow:0 2px 18px rgba(0,0,0,.3)}

/* ÁREAS: tarjetas con foto, velo oscuro y texto en blanco (tratamiento uniforme) */
.eh .areas{background:var(--sand);padding:84px 0}
.eh .areas .head{text-align:center;margin-bottom:44px}
.eh .areas h2{font-size:clamp(26px,3.4vw,40px);margin-top:10px}
.eh .agrid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.eh .acard{position:relative;min-height:300px;border-radius:16px;overflow:hidden;display:flex;align-items:flex-end;background:linear-gradient(160deg,#2f7d4a,#0f2e1e);isolation:isolate;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.eh .acard .aimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.8) contrast(1.05);transition:transform .6s ease}
.eh .acard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,18,14,.25) 0%,rgba(12,18,14,.45) 40%,rgba(10,16,12,.88) 100%)}
.eh .acard.noimg::before{background:radial-gradient(70% 60% at 30% 20%,rgba(122,201,86,.25),transparent 60%)}
.eh .acard:hover .aimg{transform:scale(1.05)}
/* Si el nº de áreas deja hueco en la última fila (4n+3 tarjetas), la primera ocupa dos columnas */
.eh .acard:first-child:nth-last-child(4n+3){grid-column:span 2}
.eh .acard .atext{padding:22px;color:#fff}
.eh .acard h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.15;color:#fff;margin-bottom:8px}
.eh .acard h3::after{content:"";display:block;width:28px;height:2px;background:var(--green);margin-top:10px}
.eh .acard p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.88)}
.eh .anote{text-align:center;color:#8a8478;font-size:13px;margin-top:22px}

/* CIERRE */
.eh .cta{background:var(--ink);color:#fff;text-align:center;padding:84px 0}
.eh .cta h2{color:#fff;font-size:clamp(26px,3.4vw,40px);max-width:22ch;margin:0 auto 10px}
.eh .cta p{color:rgba(255,255,255,.8);max-width:50ch;margin:0 auto 24px}

@media(max-width:1024px){.eh .agrid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.eh .value .g{grid-template-columns:1fr}.eh .quote{min-height:300px}}
@media(max-width:560px){.eh .agrid{grid-template-columns:1fr}.eh .acard{min-height:240px}.eh .acard:first-child:nth-last-child(4n+3){grid-column:auto}}
/* ---------------------------------------------------------------------------
   SERVICES EN MÓVIL
   Se recortan huecos y se recolocan las tarjetas SIN quitar contenido: siguen
   las 11 áreas con su título y su texto, la frase con foto y el cierre. Va
   después del bloque de 560 px de arriba, así que lo completa y lo afina.
   El escritorio y los cortes de 1024 y 900 px no se tocan.
   --------------------------------------------------------------------------- */
@media(max-width:560px){
  /* ----- Hero verde ----- */
  .eh .services-page .mhero{padding:52px 0 38px}
  .eh .services-page .mhero h1{font-size:38px}
  .eh .services-page .mhero p{font-size:15.5px;line-height:1.55;margin-top:12px}

  /* ----- Por qué la red ----- */
  .eh .value{padding:42px 0}
  .eh .value .g{gap:20px}
  .eh .value h2{font-size:24px;margin:7px 0 10px}
  .eh .value p{font-size:14.5px;line-height:1.6;margin-bottom:10px}
  .eh .value .points{margin-top:14px;gap:9px}
  .eh .value .points li{font-size:13.5px;line-height:1.45;gap:10px}
  .eh .value .points i{width:20px;height:20px;font-size:11px;margin-top:1px}
  /* La frase con foto medía 300 px de alto fijo y se comía media pantalla.
     Con proporción apaisada se adapta al ancho y ocupa bastante menos. */
  .eh .quote{min-height:0;aspect-ratio:16 / 10;padding:18px;border-radius:16px}
  .eh .quote blockquote{font-size:18px;line-height:1.3}

  /* ----- Áreas de derecho -----
     Medido con las 11 tarjetas: a una columna compacta la rejilla ocupa
     1750 px y a dos columnas cuadradas 1094 px. Además de ser más corta, la
     rejilla llena el ancho y se parece a las fichas de convenciones y
     miembros, así que el móvil queda más coherente. */
  .eh .areas{padding:42px 0}
  .eh .areas .head{margin-bottom:20px}
  .eh .areas h2{font-size:24px;margin-top:7px}
  .eh .agrid{grid-template-columns:1fr 1fr;gap:10px}
  .eh .acard{min-height:0;aspect-ratio:1 / 1;border-radius:14px}
  /* Si el número de áreas es impar, la última ocuparía media fila con un hueco
     al lado: se estira a todo el ancho y la rejilla queda rematada. */
  .eh .acard:nth-child(odd):last-child{grid-column:1 / -1;aspect-ratio:2.2 / 1}
  /* El texto iba pegado al borde de abajo (hueco cero), y como cada área tiene
     distinta cantidad de texto, los títulos caían a alturas muy distintas en
     cada pareja de la rejilla: hasta 32 px de desfase entre la tarjeta de la
     izquierda y la de la derecha. Aquí el bloque se centra en la tarjeta, así
     que el hueco queda igual arriba y abajo y los títulos se alinean a la vista.
     Centrado también en horizontal, con la rayita verde centrada bajo el título. */
  .eh .acard{align-items:center}
  .eh .acard .atext{flex:1;width:100%;padding:14px;text-align:center}
  .eh .acard h3{font-size:15px;line-height:1.1;margin-bottom:5px;
    text-shadow:0 1px 10px rgba(0,0,0,.45)}
  .eh .acard h3::after{width:18px;margin:6px auto 0}
  .eh .acard p{font-size:11px;line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.4)}
  /* Al quedar el texto a media altura, el velo se reparte más parejo: el
     degradado original era casi transparente justo ahí y el blanco se perdía
     sobre las fotos claras. La sombra de arriba remata los casos peores. */
  .eh .acard::before{background:linear-gradient(180deg,rgba(10,16,12,.50) 0%,rgba(10,16,12,.70) 50%,rgba(8,14,10,.82) 100%)}
  .eh .anote{font-size:12px;margin-top:14px}

  /* ----- Cierre de contacto ----- */
  .eh .cta{padding:42px 0}
  .eh .cta h2{font-size:23px}
  .eh .cta p{font-size:14.5px;line-height:1.55;margin-bottom:18px}
  .eh .cta .btn{padding:12px 24px;font-size:14px}
}

@media(prefers-reduced-motion:reduce){.eh .acard .aimg{transition:none}}