/* SEYP — hoja de estilo de la web. Fuente única: este fichero.
   Se inyecta dentro de cada página, así que también manda sobre la cabecera y
   el pie que trae el gestor de la web (los ocultamos y ponemos los nuestros).
   Todo cuelga de #seyp para no pisar nada de la aplicación de gestión. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&display=swap');

#seyp{
  --tinta:#111A28; --tinta2:#1D2A3D; --grafito:#33415A;
  --papel:#FFFFFF; --papel2:#F7F5F0; --papel3:#EFEBE2;
  --linea:#E0DBD0; --linea2:#CFC8B8;
  --texto:#1A2536; --suave:#5A6577; --tenue:#8A93A2;
  --laton:#9A6B22; --laton2:#C08A33; --laton-suave:#F4EBDA;
  --verde:#1F6E4E; --rojo:#B4402C;
  --r:10px; --r2:18px;
  --sans:'Inter',ui-sans-serif,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  font-family:var(--sans); color:var(--texto); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* la web se sirve con el marco del gestor: lo apagamos y ponemos el nuestro */
body:has(#seyp) #wrapwrap > header,
body:has(#seyp) #wrapwrap > footer,
body:has(#seyp) .o_footer_copyright{display:none!important}
body:has(#seyp), body:has(#seyp) #wrapwrap{background:var(--papel)}

#seyp *{box-sizing:border-box}
#seyp a{color:var(--laton); text-decoration:none}
#seyp a:hover{color:var(--laton2)}
#seyp h1,#seyp h2,#seyp h3,#seyp h4{margin:0; font-family:var(--serif); font-weight:700;
  letter-spacing:-.015em; line-height:1.14; color:var(--tinta)}
#seyp p{margin:0}
#seyp ul{margin:0; padding:0; list-style:none}
#seyp .sy-ancho{max-width:1140px; margin:0 auto; padding:0 24px}
#seyp .sy-estrecho{max-width:820px; margin:0 auto; padding:0 24px}
#seyp section{padding:84px 0; position:relative}
#seyp .sy-crema{background:var(--papel2)}
#seyp .sy-oscuro{background:var(--tinta); color:#DDE4EE}
#seyp .sy-oscuro h1,#seyp .sy-oscuro h2,#seyp .sy-oscuro h3{color:#fff}

/* ---------- rótulos y textos ---------- */
#seyp .sy-et{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--laton)}
#seyp .sy-oscuro .sy-et{color:var(--laton2)}
#seyp .sy-lead{font-size:19px; color:var(--suave); line-height:1.62; max-width:64ch}
#seyp .sy-oscuro .sy-lead{color:#A9B5C6}
#seyp .sy-nota{font-size:13.5px; color:var(--tenue); line-height:1.6}
#seyp h2.sy-t{font-size:clamp(27px,3.2vw,40px)}
#seyp h3.sy-t3{font-size:20px}

/* ---------- cabecera ---------- */
#seyp .sy-nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea)}
#seyp .sy-nav-in{max-width:1140px; margin:0 auto; padding:15px 24px; display:flex;
  align-items:center; gap:26px}
#seyp .sy-logo{display:flex; align-items:center; gap:11px; color:var(--tinta)}
#seyp .sy-logo svg{display:block}
#seyp .sy-logo b{font-family:var(--serif); font-weight:700; font-size:23px; letter-spacing:.01em;
  line-height:1; display:block}
#seyp .sy-logo span{display:block; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tenue); font-weight:600; margin-top:3px}
#seyp .sy-links{display:flex; gap:24px; margin-left:auto; align-items:center}
#seyp .sy-links a{color:var(--grafito); font-size:14.5px; font-weight:500}
#seyp .sy-links a:hover{color:var(--tinta)}
#seyp .sy-nav .sy-btn{margin-left:auto}
#seyp .sy-links + .sy-btn{margin-left:0}
/* desplegable de Servicios (solo pasando el ratón o con teclado; sin programa) */
#seyp .sy-desp{position:relative}
#seyp .sy-desp-t{display:inline-flex; align-items:center; gap:5px; cursor:default}
#seyp .sy-desp-t svg{width:11px; height:11px; opacity:.6}
#seyp .sy-desp-m{display:none; position:absolute; top:calc(100% + 10px); left:-14px; min-width:290px;
  background:var(--papel); border:1px solid var(--linea); border-radius:14px; padding:8px;
  box-shadow:0 14px 34px rgba(17,26,40,.13); z-index:60}
#seyp .sy-desp-m:before{content:''; position:absolute; top:-12px; left:0; right:0; height:12px}
#seyp .sy-desp:hover .sy-desp-m,#seyp .sy-desp:focus-within .sy-desp-m{display:block}
#seyp .sy-desp-m a{display:block; padding:10px 12px; border-radius:9px; font-size:14.5px}
#seyp .sy-desp-m a:hover{background:var(--papel2); color:var(--tinta)}
#seyp .sy-desp-m a small{display:block; font-size:12.5px; color:var(--tenue); font-weight:400; margin-top:1px}
#seyp .sy-desp-m .sy-desp-n{padding:10px 12px 6px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--laton); font-weight:600}
/* botón de menú, solo en pantallas estrechas */
#seyp .sy-menu-btn{display:none; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid var(--linea2); border-radius:10px; background:var(--papel); cursor:pointer; padding:0}
#seyp .sy-menu-btn svg{width:20px; height:20px}
@media(max-width:940px){
  #seyp .sy-menu-btn{display:inline-flex}
  #seyp .sy-links{display:none; position:absolute; left:0; right:0; top:100%; background:var(--papel);
    border-bottom:1px solid var(--linea); flex-direction:column; align-items:stretch; gap:0;
    padding:6px 18px 16px; box-shadow:0 18px 34px rgba(17,26,40,.12)}
  #seyp .sy-nav.abierto .sy-links{display:flex}
  #seyp .sy-links > a,#seyp .sy-desp-t{display:block; padding:13px 4px; border-bottom:1px solid var(--linea);
    font-size:16px; color:var(--tinta)}
  #seyp .sy-desp-t svg{display:none}
  #seyp .sy-desp-m{display:block; position:static; min-width:0; border:0; box-shadow:none; padding:0 0 6px 14px;
    border-bottom:1px solid var(--linea); border-radius:0}
  #seyp .sy-desp-m .sy-desp-n{display:none}
  #seyp .sy-desp-m a{padding:10px 4px}
}

/* ---------- botones ---------- */
#seyp .sy-btn{display:inline-flex; align-items:center; gap:9px; background:var(--tinta);
  color:#fff!important; font-weight:600; font-size:15px; padding:12px 22px; border-radius:var(--r);
  border:0; cursor:pointer; transition:.15s; font-family:var(--sans); line-height:1.2}
#seyp .sy-btn:hover{background:var(--tinta2); transform:translateY(-1px)}
#seyp .sy-btn-2{background:transparent; color:var(--tinta)!important; border:1px solid var(--linea2)}
#seyp .sy-btn-2:hover{background:var(--papel2); border-color:var(--tinta)}
#seyp .sy-btn-c{background:var(--laton)}
#seyp .sy-btn-c:hover{background:var(--laton2)}
#seyp .sy-btn-g{width:100%; justify-content:center; padding:15px 22px; font-size:16px}

/* ---------- portada ---------- */
#seyp .sy-hero{padding:76px 0 68px; background:
  radial-gradient(900px 420px at 82% -8%, var(--laton-suave), transparent 62%), var(--papel)}
#seyp .sy-hero h1{font-size:clamp(34px,5.2vw,58px); letter-spacing:-.025em}
#seyp .sy-hero .sy-lead{margin-top:20px; font-size:20px}
#seyp .sy-acciones{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
#seyp .sy-hero-grid{display:grid; grid-template-columns:1.25fr .95fr; gap:52px; align-items:start}
@media(max-width:940px){#seyp .sy-hero-grid{grid-template-columns:1fr; gap:36px}}

/* ---------- tarjetas ---------- */
#seyp .sy-rejilla{display:grid; gap:22px}
#seyp .sy-r2{grid-template-columns:repeat(2,1fr)}
#seyp .sy-r3{grid-template-columns:repeat(3,1fr)}
#seyp .sy-r4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){#seyp .sy-r3,#seyp .sy-r4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){#seyp .sy-rejilla{grid-template-columns:1fr!important}}

#seyp .sy-tarjeta{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r2);
  padding:28px}
#seyp .sy-crema .sy-tarjeta{background:var(--papel)}
#seyp .sy-tarjeta h3{font-size:20px; margin-bottom:10px}
#seyp .sy-tarjeta p{color:var(--suave); font-size:15.5px}
#seyp .sy-tarjeta-l{display:block; transition:.15s}
#seyp .sy-tarjeta-l:hover{border-color:var(--laton2); transform:translateY(-2px)}
#seyp .sy-mas{display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-weight:600;
  font-size:14.5px; color:var(--laton)}

#seyp .sy-num{font-family:var(--serif); font-size:15px; font-weight:700; color:var(--laton);
  border:1px solid var(--linea2); border-radius:50%; width:36px; height:36px; display:flex;
  align-items:center; justify-content:center; margin-bottom:16px}

/* ---------- listas con tic ---------- */
#seyp .sy-lista li{display:flex; gap:11px; align-items:flex-start; padding:9px 0;
  border-bottom:1px solid var(--linea); font-size:15.5px; color:var(--texto)}
#seyp .sy-lista li:last-child{border-bottom:0}
#seyp .sy-lista svg{flex:none; margin-top:4px}
#seyp .sy-lista b{font-weight:600}
#seyp .sy-lista span{color:var(--suave)}

/* ---------- cifras / hechos ---------- */
#seyp .sy-hechos{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea);
  border:1px solid var(--linea); border-radius:var(--r2); overflow:hidden}
@media(max-width:820px){#seyp .sy-hechos{grid-template-columns:repeat(2,1fr)}}
#seyp .sy-hecho{background:var(--papel); padding:26px 22px}
#seyp .sy-crema .sy-hecho{background:var(--papel)}
#seyp .sy-hecho b{display:block; font-family:var(--serif); font-size:34px; font-weight:700;
  color:var(--tinta); line-height:1.1}
#seyp .sy-hecho span{display:block; margin-top:8px; font-size:14px; color:var(--suave)}

/* ---------- trayectoria ---------- */
#seyp .sy-linea{border-left:2px solid var(--linea); padding-left:26px; margin-left:6px}
#seyp .sy-hito{position:relative; padding-bottom:30px}
#seyp .sy-hito:last-child{padding-bottom:0}
#seyp .sy-hito:before{content:''; position:absolute; left:-33px; top:7px; width:11px; height:11px;
  border-radius:50%; background:var(--papel); border:2px solid var(--laton)}
#seyp .sy-hito .sy-anyo{font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--laton)}
#seyp .sy-hito h3{font-size:18.5px; margin:5px 0 3px}
#seyp .sy-hito .sy-donde{font-size:14px; color:var(--tenue); margin-bottom:8px}
#seyp .sy-hito p{color:var(--suave); font-size:15.5px}

/* ---------- aviso / marco destacado ---------- */
#seyp .sy-aviso{border:1px solid var(--linea2); border-left:3px solid var(--laton);
  background:var(--papel2); border-radius:var(--r); padding:20px 22px; font-size:15px;
  color:var(--texto)}
#seyp .sy-aviso b{font-weight:600}

/* ---------- preguntas ---------- */
#seyp .sy-q{border-top:1px solid var(--linea); padding:22px 0}
#seyp .sy-q:last-child{border-bottom:1px solid var(--linea)}
#seyp .sy-q h3{font-size:18px; margin-bottom:8px}
#seyp .sy-q p{color:var(--suave); font-size:15.5px}

/* ---------- formulario ---------- */
#seyp .sy-bloque{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r2);
  padding:30px}
#seyp .sy-campos{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){#seyp .sy-campos{grid-template-columns:1fr}}
#seyp .sy-campo{display:flex; flex-direction:column; gap:6px}
#seyp .sy-ancho2{grid-column:1/-1}
#seyp .sy-campo label{font-size:13.5px; font-weight:600; color:var(--grafito)}
#seyp .sy-campo input,#seyp .sy-campo select,#seyp .sy-campo textarea{
  font-family:var(--sans); font-size:15px; color:var(--texto); background:var(--papel);
  border:1px solid var(--linea2); border-radius:var(--r); padding:11px 13px; width:100%}
#seyp .sy-campo textarea{resize:vertical}
#seyp .sy-campo input:focus,#seyp .sy-campo select:focus,#seyp .sy-campo textarea:focus{
  outline:0; border-color:var(--laton); box-shadow:0 0 0 3px var(--laton-suave)}

/* ---------- pie ---------- */
#seyp .sy-pie{background:var(--tinta); color:#A9B5C6; padding:56px 0 30px; margin-top:0}
#seyp .sy-pie-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px}
@media(max-width:880px){#seyp .sy-pie-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){#seyp .sy-pie-grid{grid-template-columns:1fr}}
#seyp .sy-pie a{display:block; color:#A9B5C6; font-size:14.5px; padding:4px 0}
#seyp .sy-pie a:hover{color:#fff}
#seyp .sy-pie .sy-logo{color:#fff}
#seyp .sy-pie .sy-logo b{color:#fff}
#seyp .sy-pie .sy-logo span{color:#8494A9}
#seyp .sy-pie .sy-et{color:var(--laton2)}
#seyp .sy-legal{border-top:1px solid #2A3648; margin-top:34px; padding-top:20px; display:flex;
  gap:16px; flex-wrap:wrap; justify-content:space-between; font-size:13px; color:#7E8C9F}

/* ---------- texto legal ---------- */
#seyp .sy-legal-txt h3{font-size:18px; margin:26px 0 8px}
#seyp .sy-legal-txt p{color:var(--suave); font-size:15.5px; margin-bottom:10px}
#seyp .sy-legal-txt li{color:var(--suave); font-size:15.5px; padding:3px 0 3px 18px; position:relative}
#seyp .sy-legal-txt li:before{content:''; position:absolute; left:2px; top:13px; width:5px; height:5px;
  border-radius:50%; background:var(--linea2)}


/* ---------- mapa de servicios: el núcleo y los cinco caminos ---------- */
#seyp .sy-nucleo{background:var(--tinta); color:#DDE4EE; border-radius:var(--r2); padding:36px 40px;
  display:grid; grid-template-columns:1.25fr 1fr; gap:34px; align-items:center; text-decoration:none;
  transition:.15s}
#seyp .sy-nucleo:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(17,26,40,.22)}
#seyp .sy-nucleo h3{color:#fff; font-size:27px; margin-bottom:10px}
#seyp .sy-nucleo p{color:#A9B5C6; font-size:15.5px}
#seyp .sy-nucleo .sy-et,#seyp .sy-nucleo .sy-mas{color:var(--laton2)}
#seyp .sy-nucleo .sy-lista li{border-color:#2A3648; color:#DDE4EE; font-size:14.5px; padding:7px 0}
#seyp .sy-nucleo .sy-lista span{color:#A9B5C6}
@media(max-width:820px){#seyp .sy-nucleo{grid-template-columns:1fr; padding:26px; gap:20px}}
#seyp .sy-desde{text-align:center; margin:26px 0 22px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--laton); font-weight:600; position:relative}
#seyp .sy-desde:before{content:''; display:block; width:2px; height:26px; background:var(--linea2);
  margin:0 auto 10px}
#seyp .sy-mapa5{display:grid; grid-template-columns:repeat(6,1fr); gap:22px}
#seyp .sy-mapa5 > *{grid-column:span 2}
#seyp .sy-mapa5 > :nth-child(4){grid-column:2/4}
#seyp .sy-mapa5 > :nth-child(5){grid-column:4/6}
@media(max-width:940px){#seyp .sy-mapa5{grid-template-columns:1fr 1fr}
  #seyp .sy-mapa5 > *{grid-column:auto!important}}
@media(max-width:680px){#seyp .sy-mapa5{grid-template-columns:1fr}}
#seyp .sy-mapa5 .sy-tarjeta .sy-et{margin-bottom:10px}

/* ---------- aviso de origen (en cada servicio) ---------- */
#seyp .sy-origen{display:flex; gap:14px; align-items:center; flex-wrap:wrap; border:1px solid var(--linea2);
  border-radius:var(--r); background:var(--laton-suave); padding:14px 18px; font-size:14.5px; color:var(--texto)}
#seyp .sy-origen b{font-weight:600}
#seyp .sy-origen a{font-weight:600; white-space:nowrap}

/* ---------- retoques de móvil ---------- */
@media(max-width:520px){
  #seyp .sy-nav .sy-logo span{display:none}
  #seyp .sy-nav-in{padding:12px 18px; gap:12px}
  #seyp section{padding:56px 0}
  #seyp .sy-hero{padding:48px 0 44px}
  #seyp .sy-tarjeta,#seyp .sy-bloque{padding:22px}
  #seyp .sy-legal{flex-direction:column; gap:6px}
}