/*
Theme Name: EnAlemania Puente Dual
Theme URI: https://en-alemania.com
Author: EnAlemania
Description: Theme propio de EnAlemania — implementa el diseño "Puente Dual" (paleta negro/rojo/dorado, tipografía Poppins + Nunito Sans) directamente en PHP, sin depender de Astra ni Spectra. SEO controlado por SureRank vía wp_head().
Version: 1.0
Requires PHP: 7.4
*/

:root{
  --white:#FFFFFF;
  --cream:#FAFAF8;
  --black:#000000;
  --dark:#231F20;
  --red:#BD1E2D;
  --red-dark:#8f1620;
  --gold:#FFDD17;
  --gold-dark:#e0bd00;
  --gray:#6b6864;
  --gray-light:#e7e5e0;
  --whatsapp:#25D366;
  --shadow: 0 12px 32px rgba(0,0,0,.08);
  --radius: 14px;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Nunito Sans', Arial, sans-serif;
  color:var(--dark);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Poppins', Arial, sans-serif;
  font-weight:700;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--black);
}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:820px;margin:0 auto;}

/* ---- franja tricolor (firma de marca) ---- */
.tricolor{display:flex;height:6px;width:100%;}
.tricolor span{flex:1;}
.tricolor span:nth-child(1){background:var(--black);}
.tricolor span:nth-child(2){background:var(--red);}
.tricolor span:nth-child(3){background:var(--gold);}

/* ---- kicker / badges ---- */
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--red);
  margin-bottom:14px;
}
.kicker::before{content:"";width:22px;height:3px;background:var(--gold);display:inline-block;border-radius:2px;}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--black);color:var(--white);
  font-size:.85rem;font-weight:600;
  padding:8px 16px;border-radius:999px;
}
.badge b{color:var(--gold);}
.badges-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.badges-row .badge{background:var(--cream);color:var(--dark);border:1px solid var(--gray-light);}
.badges-row .badge svg{flex:none;}

/* ---- botones ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;
  padding:15px 28px;border-radius:10px;cursor:pointer;border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--red);color:var(--white);}
.btn-primary:hover{background:var(--red-dark);box-shadow:0 10px 24px rgba(189,30,45,.28);}
.btn-gold{background:var(--gold);color:var(--black);}
.btn-gold:hover{box-shadow:0 10px 24px rgba(255,221,23,.35);}
.btn-outline{background:transparent;border-color:var(--black);color:var(--black);}
.btn-outline:hover{background:var(--black);color:var(--white);}
.btn-white{background:var(--white);color:var(--black);}
.btn-white:hover{background:var(--gold);}
.btn-wa{background:var(--whatsapp);color:var(--white);}
.btn-wa:hover{background:#1ebc59;box-shadow:0 10px 24px rgba(37,211,102,.3);}
.btn-block{width:100%;}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}

/* ---- navegación ---- */
header.site{
  position:sticky;top:0;z-index:50;background:var(--white);
  border-bottom:1px solid var(--gray-light);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;max-width:var(--maxw);margin:0 auto;}
.nav .logo img{height:66px;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;color:var(--dark);padding:6px 0;border-bottom:2px solid transparent;}
.nav-links a:hover, .nav-links a.active{color:var(--red);border-color:var(--gold);}
.nav-cta{display:flex;align-items:center;gap:12px;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--black);margin:5px 0;border-radius:2px;}

@media (max-width: 900px){
  .nav-links{
    position:fixed;top:var(--header-offset,113px);left:0;right:0;background:var(--white);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:10px 24px 20px;border-bottom:1px solid var(--gray-light);
    transform:translateY(-130%);transition:transform .25s ease;box-shadow:var(--shadow);
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links a{width:100%;padding:12px 0;border-bottom:1px solid var(--gray-light);}
  .nav-toggle{display:block;}
  .nav-cta .btn span.long{display:none;}
}

/* ---- hero ---- */
.hero{
  position:relative;padding:90px 0 100px;overflow:hidden;background:var(--white);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem);}
.hero .lead{font-size:1.15rem;color:var(--dark);font-weight:600;margin-bottom:14px;}
.hero .body{font-size:1.05rem;color:#4b4844;max-width:520px;}
.hero-photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-photo .tag{
  position:absolute;bottom:18px;left:18px;background:var(--white);
  padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.85rem;
  display:flex;align-items:center;gap:10px;
}
.hero-photo .tag .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);}
.hero-decor{position:absolute;top:-140px;right:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,221,23,.28), rgba(189,30,45,.08) 60%, transparent 70%);
  z-index:0;pointer-events:none;}

/* ---- page hero (páginas internas) ---- */
.page-hero{padding:64px 0 56px;background:var(--dark);color:var(--white);position:relative;overflow:hidden;}
.page-hero .container{position:relative;z-index:1;}
.page-hero h1{color:var(--white);font-size:clamp(2rem,4vw,2.7rem);}
.page-hero .kicker{color:var(--gold);}
.page-hero .kicker::before{background:var(--red);}
.page-hero p.lead{color:#d8d5cf;max-width:640px;font-size:1.05rem;}
.page-hero-photo{
  position:absolute;inset:0;opacity:.16;background-size:cover;background-position:center;
}

/* ---- secciones genéricas ---- */
section{padding:80px 0;}
section.tight{padding:56px 0;}
.section-head{max-width:680px;margin:0 0 46px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.bg-cream{background:var(--cream);}
.bg-dark{background:var(--dark);color:var(--white);}
.bg-dark h2, .bg-dark h3{color:var(--white);}
.bg-dark .kicker{color:var(--gold);}
.bg-dark .kicker::before{background:var(--red);}

/* ---- grid de servicios ---- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.service-card{
  background:var(--white);border:1px solid var(--gray-light);border-radius:var(--radius);
  padding:30px 26px;transition:transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent;}
.service-card .num{
  font-family:'Poppins',sans-serif;font-weight:800;font-size:1.6rem;color:var(--gray-light);
  -webkit-text-stroke:1.5px var(--dark);
  color:transparent;margin-bottom:10px;display:block;
}
.service-card h3{font-size:1.15rem;margin-bottom:8px;}
.service-card p{color:#5a5751;font-size:.95rem;margin:0;}
.service-card.accent-red .num{-webkit-text-stroke-color:var(--red);}
.service-card.accent-gold .num{-webkit-text-stroke-color:var(--gold-dark);}

/* ---- timeline (reemplaza portafolio) ---- */
.timeline{display:flex;flex-direction:column;gap:0;position:relative;}
.timeline::before{
  content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--black),var(--red),var(--gold));
}
.timeline-item{display:flex;gap:22px;padding:0 0 34px;position:relative;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-num{
  flex:none;width:48px;height:48px;border-radius:50%;background:var(--white);
  border:2px solid var(--dark);display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-weight:800;color:var(--dark);position:relative;z-index:1;
}
.timeline-item:nth-child(1) .timeline-num{border-color:var(--black);}
.timeline-item:nth-child(2) .timeline-num{border-color:var(--red);color:var(--red);}
.timeline-item:nth-child(3) .timeline-num{border-color:var(--gold-dark);color:var(--gold-dark);}
.timeline-item:nth-child(4) .timeline-num{border-color:var(--red);color:var(--red);}
.timeline-item:nth-child(5) .timeline-num{border-color:var(--black);}
.timeline-item:nth-child(6) .timeline-num{border-color:var(--gold-dark);color:var(--gold-dark);}
.timeline-body h3{font-size:1.08rem;margin-bottom:4px;}
.timeline-body p{color:#5a5751;margin:0;font-size:.96rem;}

/* ---- banda de confianza ---- */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:10px;}
.trust-item{padding:8px 0;}
.trust-item .ic{
  width:52px;height:52px;border-radius:12px;background:var(--gold);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.trust-item h3{font-size:1.1rem;color:var(--white);}
.trust-item p{color:#c9c6c0;font-size:.95rem;margin:0;}

/* ---- fundador ---- */
.founder{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;}
.founder-visual{
  background:linear-gradient(160deg, var(--dark), #050505);
  border-radius:22px;padding:48px 34px;color:var(--white);position:relative;overflow:hidden;
  min-height:280px;display:flex;flex-direction:column;justify-content:center;
}
.founder-visual::after{
  content:"";position:absolute;bottom:-60px;right:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,221,23,.25), transparent 70%);
}
.founder-initial{
  width:78px;height:78px;border-radius:50%;background:var(--gold);color:var(--black);
  display:flex;align-items:center;justify-content:center;font-family:'Poppins';font-weight:800;font-size:1.9rem;
  margin-bottom:22px;
}
.founder-visual .role{color:#d8d5cf;font-size:.95rem;}
.founder-visual .name{font-family:'Poppins';font-weight:700;font-size:1.3rem;color:var(--white);margin-bottom:2px;}

/* ---- CTA final ---- */
.cta-final{
  position:relative;border-radius:26px;overflow:hidden;padding:64px 48px;
  background:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.86)), center/cover no-repeat;
  color:var(--white);text-align:center;
}
.cta-final h2{color:var(--white);font-size:clamp(1.8rem,3.6vw,2.5rem);}
.cta-final p{color:#e6e4de;font-size:1.08rem;max-width:560px;margin:0 auto 8px;}
.cta-final .cta-row{justify-content:center;}

/* ---- footer ---- */
footer.site{background:var(--black);color:#cfcdc8;padding:56px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px;}
footer.site .logo img{height:30px;margin-bottom:14px;}
footer.site p{color:#a8a5a0;font-size:.92rem;}
footer.site h4{color:var(--white);font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
footer.site ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
footer.site a{color:#cfcdc8;font-size:.94rem;}
footer.site a:hover{color:var(--gold);}
.footer-bottom{
  border-top:1px solid #2a2a2a;padding-top:22px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:10px;font-size:.85rem;color:#7d7a75;
}

/* ---- whatsapp flotante ---- */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:60;
  width:60px;height:60px;border-radius:50%;background:var(--whatsapp);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform .15s ease;
}
.wa-float:hover{transform:scale(1.08);}

/* ---- formulario ---- */
.form-card{background:var(--white);border:1px solid var(--gray-light);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.form-group label{font-family:'Poppins';font-weight:600;font-size:.85rem;}
.form-group input, .form-group select, .form-group textarea{
  border:1.5px solid var(--gray-light);border-radius:8px;padding:12px 14px;font-family:'Nunito Sans';font-size:.98rem;
  background:var(--cream);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:2px solid var(--gold);border-color:var(--gold-dark);}
.form-note{font-size:.85rem;color:var(--gray);margin-top:14px;}

/* ---- pills de contacto ---- */
.contact-pill{
  display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:14px;background:var(--cream);
  border:1px solid var(--gray-light);margin-bottom:14px;
}
.contact-pill .ic{width:44px;height:44px;border-radius:10px;background:var(--black);color:var(--gold);
  display:flex;align-items:center;justify-content:center;flex:none;}
.contact-pill h4{margin:0 0 2px;font-size:.98rem;}
.contact-pill p{margin:0;color:var(--gray);font-size:.9rem;}

/* ---- utilidades ---- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.tag-photo{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);}
.tag-photo img{width:100%;height:100%;object-fit:cover;}
.stat-row{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap;}
.stat b{display:block;font-family:'Poppins';font-weight:800;font-size:1.8rem;color:var(--red);}
.stat span{font-size:.85rem;color:var(--gray);}
.pill-tabs{display:flex;gap:10px;margin-bottom:36px;flex-wrap:wrap;}
.pill-tab{
  padding:10px 20px;border-radius:999px;border:1.5px solid var(--dark);font-family:'Poppins';font-weight:600;
  font-size:.9rem;cursor:pointer;background:var(--white);
}
.pill-tab.active{background:var(--dark);color:var(--white);}
.divider-dot{width:6px;height:6px;border-radius:50%;background:var(--gold-dark);display:inline-block;margin:0 10px;}

/* ---- compatibilidad con formularios de plugins embebidos (SureForms) ---- */
.form-card .srfm-form-container{padding:0;box-shadow:none;border:none;}
.form-card .srfm-single-line-input, .form-card .srfm-input-label{font-family:'Nunito Sans', Arial, sans-serif;}
.form-card .srfm-button{background:var(--red) !important;border-color:var(--red) !important;font-family:'Poppins',sans-serif !important;}
.form-card .srfm-button:hover{background:var(--red-dark) !important;}

@media (max-width: 900px){
  .hero-grid, .two-col, .founder{grid-template-columns:1fr;}
  .hero{padding:50px 0 60px;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .trust-grid{grid-template-columns:1fr;gap:22px;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  .form-row{grid-template-columns:1fr;}
  section{padding:56px 0;}
}
@media (max-width: 600px){
  .services-grid{grid-template-columns:1fr;}
  .cta-final{padding:44px 24px;}
}


/* Compatibilidad con bloques Gutenberg: reemplaza estilos inline perdidos al convertir a bloques */
.body.narrow { max-width: 480px; }
.wp-block-group { }

.ea-serv-1 { margin-bottom: 60px; }

.ea-cont-1 { padding-bottom: 0; }
.ea-cont-2 { align-items: flex-start; }
.ea-cont-3 { margin-top: 22px; }

/* ============================================================
   SOLO EDITOR DE BLOQUES (Gutenberg). No afecta el sitio publico.
   Objetivo: que la pantalla de edicion se vea igual que la pagina real.
   ============================================================ */

/* 1. El editor deja las secciones a lo ancho del lienzo; el .container
      interno sigue centrando el contenido igual que en el sitio. */
/* Las secciones ocupan el ancho del lienzo (como en el sitio)... */
.editor-styles-wrapper .is-root-container > .wp-block {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* El editor impone un ancho de contenido propio (~840px) a cada bloque.
   Lo anulamos para que mande el CSS del tema, no el de Gutenberg. */
.editor-styles-wrapper .wp-block {
	max-width: none;
}

/* ...pero el .container manda adentro: mismo ancho maximo y centrado
   que en la pagina publicada, para que el editor no se vea estirado. */
.editor-styles-wrapper .wp-block.container,
.editor-styles-wrapper .container {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

/* 2. Gutenberg envuelve el contenido de cada Grupo en un div propio.
      Ese div rompe las rejillas (.two-col, .founder, .hero-grid, etc.)
      porque las deja con un solo hijo. display:contents lo hace
      transparente para el layout, sin quitarlo del editor. */
.editor-styles-wrapper .two-col > .wp-block-group__inner-container,
.editor-styles-wrapper .hero-grid > .wp-block-group__inner-container,
.editor-styles-wrapper .founder > .wp-block-group__inner-container,
.editor-styles-wrapper .services-grid > .wp-block-group__inner-container,
.editor-styles-wrapper .trust-grid > .wp-block-group__inner-container,
.editor-styles-wrapper .cta-row > .wp-block-group__inner-container,
.editor-styles-wrapper .badges-row > .wp-block-group__inner-container,
.editor-styles-wrapper .stat-row > .wp-block-group__inner-container {
	display: contents;
}

/* ============================================================
   RESPONSIVE — endurecimiento de rejillas
   Un hijo de grilla no puede encogerse por debajo de su contenido
   minimo salvo que se le ponga min-width:0. Sin esto, una palabra
   larga (tipico en aleman: 'Kooperationspartner') ensancha la
   columna y saca la pagina de cuadro en movil.
   ============================================================ */
.two-col > *,
.hero-grid > *,
.founder > *,
.services-grid > *,
.trust-grid > *,
.stat-row > *,
.cta-row > *,
.footer-grid > * {
	min-width: 0;
}

h1, h2, h3, h4, p, li, .badge {
	overflow-wrap: break-word;
}

/* La franja tricolor (bandera alemana) queda fija arriba junto con el
   header, no se va al hacer scroll. El header baja sus 6px de alto. */
.tricolor {
	position: sticky;
	top: 0;
	z-index: 51;
}
header.site { top: 6px; }

/* La barra de administrador de WordPress es fija y se monta encima del
   header sticky. Solo la ven los usuarios logueados; esto lo compensa. */
.admin-bar .tricolor { top: 32px; }
.admin-bar header.site { top: 38px; }
@media screen and (max-width: 782px) {
	.admin-bar .tricolor { top: 46px; }
	.admin-bar header.site { top: 52px; }
}

/* El menu desplegable de movil arranca justo debajo del header
   (6px de franja tricolor + alto del header). Con barra de admin, +46px. */
@media screen and (max-width: 782px) {
	.admin-bar .nav-links { top: var(--header-offset, 159px); }
}

/* ---- header compacto al bajar la pagina ----
   El JS le pone la clase .scrolled al header pasados 60px de scroll.
   Todo va con transicion para que el cambio sea suave, no un salto. */
header.site { transition: box-shadow .25s ease; }
.nav { transition: padding .25s ease; }
.nav .logo img { transition: height .25s ease; }
.nav-cta .btn { transition: padding .25s ease, font-size .25s ease; }

header.site.scrolled { box-shadow: 0 2px 14px rgba(0,0,0,.07); }
header.site.scrolled .nav { padding-top: 10px; padding-bottom: 10px; }
header.site.scrolled .logo img { height: 46px; }
header.site.scrolled .nav-cta .btn { padding: 11px 22px; }

@media (prefers-reduced-motion: reduce) {
	header.site, .nav, .nav .logo img, .nav-cta .btn { transition: none; }
}

/* Tope de tamano del logo en pantallas chicas: a 66px se solapaba con el
   boton de Consulta y el menu hamburguesa. */
@media (max-width: 900px) {
	.nav .logo img { height: 46px; }
	header.site.scrolled .logo img { height: 38px; }
}
@media (max-width: 480px) {
	.nav .logo img { height: 40px; }
	header.site.scrolled .logo img { height: 34px; }
}