/* Administración Laura Serrano: hoja única.
   Cada medida sale de bin/medir.py sobre el WordPress, no de mirarlo. */

/* ---------- tipografías, autoalojadas ---------- */
@font-face{font-family:"Roboto Slab";src:url(/fonts/robotoslab-500.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald";src:url(/fonts/oswald-500.woff2) format("woff2");
  font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-500.woff2) format("woff2");
  font-weight:200 1000;font-style:normal;font-display:swap}

:root{
  --azul:#0c71c3;
  --azul-claro:#2ea3f2;
  --tinta:#333;
  --texto:#666;
  --beige:#e2d4c0;
  --arena:#dca57d;
  --pie:#222;
  --cabecera:136px;          /* 30 de la barra superior + 106 del encabezado */
  --slab:"Roboto Slab",Georgia,"Times New Roman",serif;
  --titular:"Oswald","Helvetica Neue",Arial,sans-serif;
  --cuerpo:"Nunito","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--texto);
  font:500 14px/1.7 var(--slab);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;border:0}
a{color:var(--azul-claro);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:500;color:var(--tinta)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:8px;top:8px;z-index:100000;background:#fff;color:var(--azul);
  padding:12px 20px;font:600 14px/1 var(--slab);
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar:focus{width:auto;height:auto;overflow:visible;clip:auto}

/* ---------- rejilla ---------- */
.contenedor{width:80%;max-width:1600px;margin:0 auto}
.ancha{width:89%;max-width:1780px;margin:0 auto}
.casi{width:96%;max-width:1920px;margin:0 auto}
.completa{width:100%}
.filas{display:flex;flex-wrap:wrap;gap:0 5.5%}
.filas>*{flex:1 1 0}

/* ---------- barra superior ---------- */
.barra{
  position:fixed;inset:0 0 auto;z-index:100;height:30px;
  background:rgba(12,113,195,.34);color:#fff;
  font:600 12px/12px var(--slab);
}
.barra .contenedor{display:flex;align-items:center;height:100%;gap:16px}
.barra a{color:#fff;overflow-wrap:anywhere}
.barra span{display:inline-flex;align-items:center;gap:6px}
.barra a{display:inline-block;padding:6px 0;margin:-6px 0}
.barra svg{width:12px;height:12px;fill:currentColor;flex:none}

/* ---------- encabezado ---------- */
.encabezado{
  position:fixed;inset:30px 0 auto;z-index:99;height:106px;
  background:rgba(255,255,255,.53);
  transition:background .3s ease;
}
.interior .barra{background:var(--azul)}
.interior .encabezado{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.portada .barra.posada{background:var(--azul)}
.portada .encabezado.posada{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.portada .encabezado.posada .menu a,.portada .encabezado.posada .abrir{color:var(--tinta)}
.encabezado .contenedor{display:flex;align-items:center;justify-content:space-between;height:100%}
.marca{display:block;padding:3px 0}
.marca img{display:block;width:137px;height:auto}

.menu{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.menu li{margin-right:22px}
.menu li:last-child{margin-right:0}
.menu a{
  display:block;padding:21px 0;margin:-21px 0;color:var(--tinta);
  font:600 18px/1 var(--slab);text-decoration:none;
}
.interior .menu a{color:var(--tinta)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--azul);text-decoration:none}

.abrir{
  display:none;border:0;background:none;padding:8px;margin-right:-8px;
  color:var(--tinta);cursor:pointer;
}
.interior .abrir{color:var(--tinta)}
.abrir svg{display:block;width:24px;height:24px;fill:currentColor}

/* ---------- portada: hero ---------- */
.hero{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - 122px);
  background:#333 url(/img/hero.jpg) center/cover fixed no-repeat;
  text-align:center;color:#fff;
}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.595)}
.hero .contenedor{position:relative;max-width:800px;padding:10px}
.hero h1{font:500 51px/51px var(--slab);color:#fff;margin:0;padding:0 0 10px}
.hero .sub{display:block;font:500 35px/42px var(--slab);color:#fff}
.hero .lema{margin:50px 0 0;padding:0 0 10px;font:500 22px/22px var(--slab);color:#fff}
.bajar{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  color:#fff;line-height:0;padding:10px;
}
.bajar svg{width:44px;height:51px;fill:currentColor}
.bajar:hover{opacity:.75}

/* ---------- secciones ---------- */
.seccion{padding:57px 0}
.seccion.apretada{padding:17px 0 15px}
.seccion.detalle{padding:57.6px 0 0}
.detalle .filas{padding:28.8px 0}
.bloque{padding:40px 0}
.bloque.boton-solo{padding:28.8px 0}

.rotulo{
  font:500 40px/60px var(--titular);letter-spacing:1px;text-transform:uppercase;
  color:var(--tinta);margin:0;padding:0 0 10px;
}
.rotulo.grande{font-size:42px;line-height:63px;letter-spacing:2px}
.rotulo.claro{color:#fff}
.centrado{text-align:center}
.prosa{font:500 18px/32.4px var(--cuerpo);color:var(--texto)}
.prosa p{margin:0;padding:0 0 1em}
.prosa p:last-child{padding-bottom:0}

/* tres columnas destacadas */
.tarjetas{padding:0}
.tarjetas .contenedor{background:rgba(30,30,30,.14);padding:60px 0}
.tarjetas .filas{gap:0 5.5%;align-items:flex-start;min-height:159px}
.tarjetas h3{
  font:500 20px/34px var(--titular);letter-spacing:1px;text-transform:uppercase;
  color:var(--tinta);margin:0;padding:0 0 10px;
}
.tarjetas .prosa{margin:0;color:#5b5b5b}

/* botón */
.boton{
  display:inline-block;border:10px solid var(--azul);background:var(--azul);
  color:#fff;padding:4.5px 15px;
  font:500 15px/25.5px var(--titular);letter-spacing:3px;text-transform:uppercase;
  transition:background .2s ease,border-color .2s ease;
}
.boton:hover{background:#0a5fa4;border-color:#0a5fa4;color:#fff;text-decoration:none}
.centrado .boton{margin:0 auto}

/* nosotros: texto + foto a media pantalla */
.partida{display:flex;flex-wrap:wrap;min-height:798px}
.partida>*{flex:1 1 50%;min-width:0}
.partida .texto{padding:100px 10%}
.partida .foto{background:#ccc url(/img/nosotros.jpg) center/cover no-repeat}

/* servicios */
.servicios{
  background:var(--beige) url(/img/servicios.jpg) center/cover fixed no-repeat;
  padding:18.7px 0 144px;
}
.servicios .ancha{padding:28.8px 0}
.servicios .caja{background:rgba(255,255,255,.44);padding:5px}
.servicios .boton{margin-top:35px}
.servicios .prosa{color:#000;padding:0}
.servicios .hueco{display:block}

/* gestión integral: la tipografía base de la plantilla */
.detalle h3{font:500 22px/22px var(--slab);color:var(--tinta);margin:0;padding:0 0 10px}
.detalle p{margin:0;padding:0 0 1em}
.detalle p:last-child{padding-bottom:0}
.detalle strong{font-weight:700}
.detalle img{display:block;width:100%}

/* formulario */
.formulario{padding:27px 0 19px}
.formulario .casi{padding:28.8px 0}
.formulario .filas{gap:0 5.5%;align-items:flex-start}
.formulario .mapa{flex:0 0 36.7%}
.formulario .campos{flex:0 0 57.8%}
.formulario .mapa img{display:block;width:100%;height:auto}
@media (max-width:980px){
  /* El plano es alto porque en escritorio ocupa una columna estrecha: apilado
     se recorta para que no se coma la pantalla. */
  .formulario .mapa img{height:480px;object-fit:cover;object-position:center}
}

.campo{margin:0 0 3%;}
.campo input,.campo textarea{
  width:100%;background:#eee;border:0;color:#4e4e4e;
  font:500 14px/1.7 var(--slab);padding:16px;
}
.campo textarea{min-height:150px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#4e4e4e;opacity:1}
.dos{display:flex;gap:0 3%}
.dos>*{flex:1 1 0}
.consiento{font:500 14px/1.7 var(--slab);color:var(--texto);margin:14px 0 0}
.consiento .titulo{display:block;font-weight:600;margin:0 0 4px}
.consiento label{display:flex;align-items:center;gap:8px;min-height:24px}
.consiento input{width:24px;height:24px;margin:0;flex:none}
.consiento a{color:var(--texto);font-weight:700;text-decoration:underline;
  display:inline-block;padding:4px 0;margin:-4px 0}
.enviar{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:18px 0 0}
.enviar button{
  background:none;border:2px solid var(--azul);border-radius:3px;
  color:var(--azul);padding:6px 20px;cursor:pointer;
  font:500 20px/34px var(--slab);
}
.enviar button:hover{background:var(--azul);color:#fff}
.enviar button:disabled{opacity:.6;cursor:progress}
.aviso-datos{font:500 12px/23.8px var(--slab);color:var(--texto);margin:24px 0 0}
.aviso-datos strong{font-weight:700}
.aviso-datos a{color:var(--texto);text-decoration:underline;
  display:inline-block;padding:5px 0;margin:-5px 0}
.recado{margin:0 0 18px;padding:14px 18px;font:500 14px/1.6 var(--slab);border-left:4px solid}
.recado.bien{background:#eef7ee;border-color:#3d8b3d;color:#245224}
.recado.mal{background:#fdeeee;border-color:#b23b3b;color:#7a2626}

/* contacto en dos mitades */
.mitades{display:flex;flex-wrap:wrap;
  background:#000 url(/img/contacto.jpg) center/cover fixed no-repeat;}
.mitades>*{flex:1 1 50%;min-width:0;padding:100px 10% 128px}
.mitades .izq{background:rgba(0,0,0,.6)}
.mitades .der{background:#000}
.mitades h2{font:500 40px/60px var(--titular);letter-spacing:2px;text-transform:uppercase;
  color:#fff;margin:0 0 17.3px;padding:0 0 10px}
.mitades h3{font:500 16px/24px var(--titular);letter-spacing:1px;text-transform:uppercase;
  color:var(--arena);margin:25.9px 0 0;padding:0 0 10px}
.mitades h3:first-of-type{margin-top:0}
.mitades p{font:500 16px/24px var(--cuerpo);color:#fff;margin:0}
/* Enlaces de una línea justa: en pantalla táctil la zona pulsable ha de llegar
   a 24 px, y el `p` que los contiene ya tiene esa altura de línea, así que la
   caja no se mueve. */
.mitades a{color:#fff;overflow-wrap:anywhere;
  display:inline-block;line-height:24px;vertical-align:top}
.mitades .boton{margin-top:107px}

/* ---------- pie ---------- */
.pie{background:var(--pie)}
.pie-nav{background:rgba(255,255,255,.05)}
.pie-nav ul{display:flex;flex-wrap:wrap;gap:0 22px;list-style:none;margin:0;padding:15px 0;
  height:54px;align-items:center}
.pie-nav a{color:#bbb;font:600 14px/23.8px var(--slab);
  display:inline-block;padding:6px 0;margin:-6px 0}
.pie-nav a:hover{color:#fff}
.pie-bajo{background:rgba(0,0,0,.32);color:#9a9a9a;
  font:500 14px/23.8px var(--slab)}
.pie-bajo .contenedor{padding:15px 0;min-height:54px;display:flex;align-items:center}
.pie-bajo a{color:#cfcfcf;font-weight:700;display:inline-block;padding:4px 0;margin:-4px 0}

/* ---------- páginas de texto ---------- */
.interior main{padding-top:calc(var(--cabecera) + 60px);padding-bottom:80px}
.legal{max-width:900px}
.legal h1{font:500 40px/1.25 var(--titular);letter-spacing:1px;text-transform:uppercase;
  color:var(--tinta);margin:0 0 8px}
.legal .fecha{font:500 14px/1.7 var(--slab);color:#6b6b6b;margin:0 0 34px}
.legal h2{font:500 22px/1.35 var(--titular);letter-spacing:1px;text-transform:uppercase;
  color:var(--tinta);margin:38px 0 12px}
.legal h3{font:600 17px/1.4 var(--slab);color:var(--tinta);margin:26px 0 8px}
.legal p,.legal li{font:500 16px/1.75 var(--cuerpo);color:var(--texto)}
.legal ul{margin:0 0 18px;padding-left:22px}
.legal li{margin:0 0 8px}
.legal table{width:100%;border-collapse:collapse;margin:0 0 22px;
  font:500 15px/1.6 var(--cuerpo)}
.legal caption{text-align:left;font:600 15px/1.6 var(--slab);color:var(--tinta);
  padding:0 0 8px}
.legal th,.legal td{border:1px solid #ddd;padding:10px 12px;text-align:left;
  vertical-align:top;color:var(--texto)}
.legal th{background:#f4f4f4;color:var(--tinta);font-weight:600}
.legal .envoltorio{overflow-x:auto;margin:0 0 22px}
.legal .envoltorio table{margin:0}
.legal a{color:var(--azul);text-decoration:underline;overflow-wrap:anywhere;
  display:inline-block;padding:2px 0;margin:-2px 0}

/* ---------- contacto ---------- */
.cabecera-pagina{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:420px;text-align:center;color:#fff;
  background:#333 url(/img/contacto.jpg) center/cover no-repeat;
  padding:calc(var(--cabecera) + 40px) 0 60px;
}
.cabecera-pagina::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
.cabecera-pagina .contenedor{position:relative}
.cabecera-pagina h1{font:500 51px/1.15 var(--titular);letter-spacing:2px;
  text-transform:uppercase;color:#fff;margin:0 0 18px}
.cabecera-pagina p{font:500 18px/32.4px var(--cuerpo);color:#fff;max-width:700px;
  margin:0 auto}
.datos{list-style:none;margin:0;padding:0}
.datos li{display:flex;gap:14px;margin:0 0 26px;font:500 16px/24px var(--cuerpo);
  color:var(--texto)}
.datos svg{width:22px;height:22px;fill:var(--azul);flex:none;margin-top:1px}
.datos strong{display:block;font:500 16px/24px var(--titular);letter-spacing:1px;
  text-transform:uppercase;color:var(--tinta);margin:0 0 2px}
.datos a{color:var(--texto);overflow-wrap:anywhere;
  display:inline-block;padding:3px 0;margin:-3px 0}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .barra,.portada .barra{position:static;height:auto;padding:9px 0;
    background:var(--azul)}
  .barra .contenedor{flex-wrap:wrap;gap:6px 16px;justify-content:center;text-align:center}
  .encabezado{position:sticky;inset:auto;top:0;height:80px}
  .marca img{width:68px}
  .abrir{display:block}
  .menu{
    display:none;position:absolute;left:0;right:0;top:80px;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-top:3px solid var(--azul);
    box-shadow:0 6px 18px rgba(0,0,0,.18);padding:6px 0;
  }
  .menu.abierto{display:flex}
  .menu li{margin:0}
  .menu a,.interior .menu a{
    color:var(--tinta);padding:13px 22px;margin:0;font-size:16px;
    border-bottom:1px solid #eee;
  }
  .menu li:last-child a{border-bottom:0}
  .hero{min-height:calc(100vh - 60px);padding:60px 0;
    background-attachment:scroll}
  .hero .contenedor{width:64%;max-width:none}
  .filas{display:block}
  .tarjetas .filas>*+*{margin-top:30px}
  .partida{display:block;min-height:0}
  .partida .texto{padding:100px 10%}
  .partida .foto{display:none}
  .servicios{background-attachment:scroll;padding:40px 0 60px}
  .servicios .hueco{display:none}
  .detalle .filas>*+*{margin-top:30px}
  .formulario .filas>*+*{margin-top:30px}
  .mitades{display:block;background-attachment:scroll}
  .mitades>*{padding:100px 10% 128px}
  .interior main{padding-top:60px}
  .cabecera-pagina{padding:70px 0 60px;min-height:0}
  .cabecera-pagina h1{font-size:34px}
}
@media (max-width:360px){
  /* Por debajo de 360 px no hay sitio para el correo entero en una línea, así
     que ahí sí se parte la palabra. Y «SERRANO» a 51 px tampoco cabe: el
     original no llegaba a contemplar estos anchos. */
  body{overflow-wrap:break-word}
  .hero h1,.hero .sub,.rotulo,.mitades h2{overflow-wrap:normal}
  .hero .contenedor{width:84%}
  .hero h1{font-size:38px;line-height:40px}
  .hero .sub{font-size:26px;line-height:32px}
}
@media (max-width:600px){
  .legal .apilable,.legal .apilable tbody,.legal .apilable tr,
  .legal .apilable th,.legal .apilable td{display:block;width:100%}
  .legal .apilable tr{border:1px solid #ddd;margin:0 0 10px}
  .legal .apilable th,.legal .apilable td{border:0;padding:8px 12px}
  .legal .apilable th{padding-bottom:0;background:none}
  .legal .apilable td{padding-top:2px}
  /* El original no encoge sus titulares en mano: mantiene 51, 40 y 42 px, y
     el bloque del hero se estrecha al 59 % del ancho. Se replica igual. */
  .hero .contenedor{width:68%}
  .legal h1{font-size:28px}
  .dos{display:block}
  .dos>*+*{margin-top:3%}
  .enviar{justify-content:stretch}
  .enviar button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}