/* Página 404 de la web nueva (error404-vista.php). Mismo lenguaje que la ficha y las preguntas frecuentes: títulos negro + rosa, rosa #F60C76.
   La franja de ayuda (.fq-ayuda) viene de faq.css y la tarjeta .c2 de tarjeta-viaje.css. */
.e4{--brand:#F60C76;--brand-btn:#F60C76;--page-line:#E4E5EA}
.e4 em{font-style:normal;color:#F60C76}
.e4 h1,.e4 h2,.e4 p{margin:0}

/* Portada: foto a todo lo ancho, velo oscuro a la izquierda para leer el texto */
.e4-hero{position:relative;min-height:clamp(440px,62vh,620px);display:flex;align-items:center;color:#fff;background:#292A69 var(--e4-foto) center right/cover no-repeat}
.e4-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,16,40,.82) 0,rgba(14,16,40,.55) 45%,rgba(14,16,40,0) 78%)}
.e4-hero-in{position:relative;width:100%;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px);display:grid;gap:16px;justify-items:start}
.e4-hero-in>*{max-width:620px}
.e4-k{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 14px;backdrop-filter:blur(4px)}
.e4-k svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.e4-hero h1{font-size:clamp(36px,5.6vw,64px);line-height:1.04;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.e4-hero h1 em{color:#FF6FAE}
.e4-sub{font-size:clamp(17px,1.7vw,20px);line-height:1.5;color:rgba(255,255,255,.92)}

/* «¿Buscabas viajes a Egipto?» */
.e4-sug{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;width:min(560px,100%);margin-top:4px;padding:16px 20px;border-radius:18px;background:#fff;color:#16181D;text-decoration:none;box-shadow:0 14px 34px rgba(0,0,0,.22);transition:transform .15s}
.e4-sug span{font-size:18px;font-weight:700}
.e4-sug b{color:#F60C76}
.e4-sug small{grid-column:1;font-size:14px;color:#5E646E}
.e4-sug svg{grid-column:2;grid-row:1 / span 2;width:40px;height:40px;padding:9px;border-radius:50%;background:#F60C76;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.e4-sug:hover{transform:translateY(-2px)}

.e4-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.e4-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;background:#F60C76;color:#fff;font-weight:800;font-size:16px;text-decoration:none;transition:filter .15s,transform .15s}
.e4-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.e4-btn:hover{filter:brightness(.94);transform:translateY(-1px)}
.e4-btn-b{background:#fff;color:#16181D}
.e4-btn:focus-visible,.e4-sug:focus-visible,.e4-chips a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.e4-sec .e4-btn:focus-visible,.e4-chips a:focus-visible{outline-color:#F60C76}

/* Secciones */
.e4-sec{padding-top:clamp(40px,5vw,72px);display:grid;gap:10px}
.e4-sec:last-of-type{padding-bottom:clamp(40px,5vw,72px)}
.e4-sec h2{font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.e4-s{font-size:16px;color:#5E646E;margin-bottom:8px}
.e4-chips{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.e4-chips a{display:grid;gap:2px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #E4E5EA;color:#16181D;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.e4-chips b{font-size:17px;font-weight:800}
.e4-chips small{font-size:13px;color:#5E646E}
.e4-chips a:hover{border-color:#F60C76;box-shadow:0 10px 24px rgba(22,24,29,.08);transform:translateY(-2px)}
.e4 .c2-fila{margin-top:8px}
@media (min-width:1101px){ .e4 .c2-fila.e4-pocos{grid-template-columns:repeat(var(--e4-n),minmax(0,340px));justify-content:center} } /* 1-3 viajes del país: centrados, sin hueco a la derecha */
.e4 .c2-ver{margin-top:24px}

@media (max-width:1100px){ .e4-chips{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  .e4-hero{background-image:var(--e4-foto-m,var(--e4-foto));background-position:70% center;min-height:0}
  .e4-hero::before{background:linear-gradient(180deg,rgba(14,16,40,.55) 0,rgba(14,16,40,.85) 100%)}
  .e4-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .e4-chips a{padding:12px 14px}
  .e4-chips b{font-size:16px}
  .e4-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){ .e4-sug,.e4-btn,.e4-chips a{transition:none} .e4-sug:hover,.e4-btn:hover,.e4-chips a:hover{transform:none} }