@charset "UTF-8";
/* ==========================================================================
   over the line — versión estática
   Migrado desde la SPA Angular + Strapi. Los valores fluidos del original
   (media queries 320px → 1400px) se expresan aquí con clamp(), que da
   exactamente el mismo resultado:  clamp(min, min + Δ·(100vw − 320px)/1080, max)
   ========================================================================== */

/* ---------- Fuentes (alojadas en local, subconjunto latino) ----------------
   Se replican las mismas declaraciones que pedía la web original a Google
   Fonts (Montserrat 100/400/500/800 y EB Garamond 400/700, normal e itálica),
   de modo que el navegador elige el mismo grosor que antes. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100;font-display:swap;src:url(/assets/fonts/montserrat-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/montserrat-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/montserrat-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/montserrat-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:100;font-display:swap;src:url(/assets/fonts/montserrat-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/montserrat-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/montserrat-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:800;font-display:swap;src:url(/assets/fonts/montserrat-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ebgaramond-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ebgaramond-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/ebgaramond-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/ebgaramond-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Base ---------------------------------------------------------- */
:root{
  --fondo:#f2f0dd;
  --rojo:#c52d2d;
  --gris:#d5d5d5;
  --sans:Montserrat,"Helvetica Neue",Verdana,Helvetica,Arial,"sans-serif";
  --serif:"EB Garamond","Times New Roman",Times,FreeSerif,"serif";
}
html,body,div{border:0;margin:0;padding:0}
html,body{
  width:100%;height:100vh;
  background-color:var(--fondo);
  font-family:var(--sans);font-weight:400;font-size:1rem;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}
a,.link{font-weight:600;cursor:pointer;text-decoration:none;color:#000}
a:hover,.link:hover{color:var(--rojo)}

/* ---------- Estructura general ------------------------------------------- */
.app{width:100%;height:100%}
.app__menu{height:55px}
.app__outlet{
  width:100%;height:calc(100% - 55px);
  padding:clamp(30px, calc(30px + 50 * (100vw - 320px) / 1080), 80px);
}

/* ---------- Menú ---------------------------------------------------------- */
.nav{
  width:100%;display:flex;flex-flow:row;align-items:center;
  border-bottom:1px solid var(--rojo);
  padding:clamp(0px, calc(0px + 10 * (100vw - 320px) / 1080), 10px);
}
.nav__logo img{width:150px}
.nav__menu{
  width:100%;display:flex;flex-flow:row;list-style-type:none;
  justify-content:space-between;margin-left:20%;
}
/* La "X" va fuera del flujo (absoluta), como en el original; solo se muestra con el menú abierto */
.nav__cerrar{position:absolute;top:20px;right:20px;font-size:2rem;margin:0!important}
.nav__cerrar[hidden]{display:none}
.nav__mini{display:none;margin-left:auto;margin-right:10px}
@media (max-width:900px){
  .nav__menu{
    background-color:var(--fondo);opacity:.95;
    flex-flow:column;align-items:center;justify-content:center;
    margin:0;position:absolute;height:100%;left:0;top:-100%;
    transition:all .5s linear;z-index:10000;
  }
  .nav__menu li{margin-bottom:clamp(20px, calc(20px + 40 * (100vw - 320px) / 1080), 60px)}
  .nav__menu.abierto{top:0}
  .nav__mini{display:inline-block}
}

/* ---------- Bloques reutilizables ---------------------------------------- */
/* Título (Montserrat Black) */
.titulo{margin:0;font-size:inherit;font-weight:900;line-height:1}
/* Resumen (EB Garamond en rojo) */
.resumen{margin:0;font-family:var(--serif);font-weight:400;color:var(--rojo);line-height:1}
/* Texto enmarcado */
.marco{
  border:1px solid var(--rojo);border-radius:5px;background-color:#fff;opacity:.9;line-height:1.6;
  padding:clamp(30px, calc(30px + 50 * (100vw - 320px) / 1080), 80px);
  padding-left:clamp(50px, calc(50px + 50 * (100vw - 320px) / 1080), 100px);
  padding-right:clamp(50px, calc(50px + 50 * (100vw - 320px) / 1080), 100px);
}

/* ---------- Inicio -------------------------------------------------------- */
.p-inicio{height:100%;width:100%}
.p-inicio .contenido{height:100%;display:flex;flex-flow:column}
.p-inicio .titulo,
.p-inicio .resumen{margin-left:clamp(10px, calc(10px + 70 * (100vw - 320px) / 1080), 80px)}
.p-inicio .titulo{font-size:clamp(70px, calc(70px + 50 * (100vw - 320px) / 1080), 120px)}
.p-inicio .resumen{font-size:clamp(30px, calc(30px + 10 * (100vw - 320px) / 1080), 40px)}
.p-inicio .texto-bloque{
  max-width:650px;display:inline-block;margin:0 auto;
  margin-top:clamp(20px, calc(20px + 60 * (100vw - 320px) / 1080), 80px);
}

/* ---------- Listados con "Leer más" (Servicios y Clientes) --------------- */
.p-servicios,.p-clientes{height:100%;width:100%}
.p-servicios .contenido,.p-clientes .contenido{
  display:flex;flex-flow:column;
  padding-top:clamp(20px, calc(20px + 55 * (100vw - 320px) / 1080), 75px);
}
.p-servicios .bloque,.p-clientes .bloque{
  display:flex;flex-flow:column;
  padding-bottom:clamp(20px, calc(20px + 55 * (100vw - 320px) / 1080), 75px);
}
.p-servicios .encabezado,.p-clientes .encabezado{display:flex;width:100%}
.p-servicios .texto-bloque,.p-clientes .texto-bloque{
  display:inline-block;max-height:0;overflow:hidden;background:var(--gris);
  transition:max-height .5s ease-out;
}
.p-servicios .texto.abierto .texto-bloque,
.p-clientes  .texto.abierto .texto-bloque{max-height:800px;transition:max-height .5s ease-in}

/* Servicios: titular y resumen a dos columnas, alternando en los pares */
.p-servicios .contenido{justify-content:center}
.p-servicios .bloque{width:100%}
.p-servicios .encabezado{flex-flow:row}
.p-servicios .titulo{width:50%;font-size:clamp(20px, calc(20px + 55 * (100vw - 320px) / 1080), 75px)}
.p-servicios .resumen{width:50%;padding-left:1rem;font-size:clamp(16px, calc(16px + 14 * (100vw - 320px) / 1080), 30px)}
.p-servicios .mas{text-align:right;padding:1rem 0}
.p-servicios .texto.abierto .texto-bloque{overflow:auto}
.p-servicios .bloque:nth-child(even) .titulo{order:2}
.p-servicios .bloque:nth-child(even) .resumen{order:1;padding-left:0;padding-right:1rem}
.p-servicios .bloque:nth-child(even) .mas{text-align:left}

/* Clientes: columna central */
.p-clientes .contenido{align-items:center}
.p-clientes .bloque{width:50%}
.p-clientes .encabezado{flex-flow:column}
.p-clientes .titulo{width:100%;font-size:clamp(20px, calc(20px + 55 * (100vw - 320px) / 1080), 75px)}
.p-clientes .resumen{width:100%;padding-top:1rem;font-size:clamp(16px, calc(16px + 14 * (100vw - 320px) / 1080), 30px)}
.p-clientes .mas{text-align:left;padding:1rem 0}
@media (max-width:768px){.p-clientes .bloque{width:100%}}

/* ---------- Sobre mí ------------------------------------------------------ */
.p-sobre-mi{position:relative;width:100%}
.p-sobre-mi .contenido{
  position:relative;z-index:100;display:flex;flex-flow:row wrap;justify-content:center;
  padding-top:clamp(20px, calc(20px + 55 * (100vw - 320px) / 1080), 75px);
}
.p-sobre-mi .titulo{
  width:100%;text-align:center;
  font-size:clamp(40px, calc(40px + 50 * (100vw - 320px) / 1080), 90px);
  margin-bottom:clamp(30px, calc(30px + 30 * (100vw - 320px) / 1080), 60px);
}
.p-sobre-mi .bloque{
  width:calc(50% - 2rem);display:flex;flex-flow:column;margin:0 1rem;
  padding-bottom:clamp(20px, calc(20px + 55 * (100vw - 320px) / 1080), 75px);
}
.p-sobre-mi .resumen{font-size:clamp(16px, calc(16px + 14 * (100vw - 320px) / 1080), 30px)}
.p-sobre-mi .texto-bloque{
  width:100%;display:inline-block;
  margin-top:clamp(10px, calc(10px + 20 * (100vw - 320px) / 1080), 30px);
}
.p-sobre-mi .bloque:nth-child(2){width:100%}
.p-sobre-mi .bloque:nth-child(2) .texto-bloque{width:50%}
@media (max-width:768px){
  .p-sobre-mi .bloque{width:100%}
  .p-sobre-mi .bloque:nth-child(2) .texto-bloque{width:100%}
}

/* ---------- Contacto ------------------------------------------------------ */
.p-contacto{height:100%;width:100%}
.p-contacto .contenido{
  display:flex;flex-flow:column;align-items:center;
  padding-top:clamp(20px, calc(20px + 55 * (100vw - 320px) / 1080), 75px);
}
.p-contacto .bloque{
  width:50%;display:flex;flex-flow:column;
  padding-bottom:clamp(20px, calc(20px + 55 * (100vw - 320px) / 1080), 75px);
}
.p-contacto .encabezado{display:flex;flex-flow:column;width:100%}
.p-contacto .titulo{width:100%;font-size:clamp(20px, calc(20px + 35 * (100vw - 320px) / 1080), 55px)}
.p-contacto .resumen{width:100%;padding:1rem 0;font-size:clamp(16px, calc(16px + 14 * (100vw - 320px) / 1080), 30px)}
/* Igual que en el original: el contenedor mide 0 de alto y el marco se dibuja por encima */
.p-contacto .texto-bloque{display:inline-block;max-height:0;background:var(--gris);transition:max-height .5s ease-out}
@media (max-width:768px){.p-contacto .bloque{width:100%}}

/* ---------- Escritos ------------------------------------------------------ */
.p-escritos{height:100%;width:100%}
.p-escritos .contenido{
  display:flex;flex-flow:column;align-items:center;
  padding-top:clamp(20px, calc(20px + 55 * (100vw - 320px) / 1080), 75px);
}
.p-escritos .bloque{
  width:50%;display:flex;flex-flow:column;
  padding-bottom:clamp(20px, calc(20px + 55 * (100vw - 320px) / 1080), 75px);
}
.p-escritos .encabezado{display:flex;flex-flow:column;width:100%}
.p-escritos .titulo{width:100%;font-size:clamp(20px, calc(20px + 55 * (100vw - 320px) / 1080), 75px)}
.p-escritos .resumen{width:100%;padding-top:.5rem;font-size:clamp(16px, calc(16px + 14 * (100vw - 320px) / 1080), 30px)}
.p-escritos .ver{padding-top:.5rem;margin-left:auto;font-weight:500;font-size:1rem}
@media (max-width:768px){.p-escritos .bloque{width:100%}}