/* segoviaconelguiadelsombrero.com
   Réplica de la maqueta que servía el WordPress con Divi. Cada medida sale de
   haber medido el original con el navegador, propiedad computada a propiedad
   computada: no hay ni un número puesto a ojo.

   Rejilla de Divi: contenedor al 80% con tope de 1152, columnas separadas por
   un 5,5% del contenedor, secciones con un 4% de aire arriba y abajo y filas
   con un 2%. Por debajo de 981px esos porcentajes pasan a 50 y 30px fijos, las
   columnas de media y de un tercio se apilan y las de un cuarto quedan de dos
   en dos. Por debajo de 768px se apila todo. */

/* ---------------------------------------------------------------- tokens */
:root {
  --marron: #7e6849;          /* el color de la casa: titulares y botones */
  --marron-oscuro: #342107;   /* el velo del hero y el fondo del pie */
  --crema: #fcf9f6;
  --texto: #666;
  --tinta: #333;
  --tinta-suave: #3d3d3d;
  --negro: #000;
  --blanco: #fff;

  --contenedor: 1152px;
  --gutter: 5.5%;
  --alto-barra: 31px;
  --alto-cabecera: 94px;
  --alto-cabecera-fija: 54px;
  --alto-cabecera-movil: 80px;
}

/* ------------------------------------------------------------ cimientos */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  color: var(--marron);
  margin: 0;
  /* Divi le pone 10px por debajo a todo titular de módulo. Sin esto cada
     titular queda diez píxeles más arriba que en el original. */
  padding-bottom: 10px;
}

/* Todos los títulos de página van en mayúsculas, como en el original. */
h1 { font-size: 72px; line-height: 1.2; text-transform: uppercase; }
h2 { font-size: 52px; line-height: 1.2; }

/* Divi separa los párrafos con relleno, no con margen. El hueco resultante es
   el mismo, pero la caja del párrafo mide 1em más, que es justo lo que se
   compara cuando se cotejan las dos versiones. */
p { margin: 0; padding-bottom: 1em; }
p:last-child { padding-bottom: 0; }

strong { font-weight: 700; }
em { font-style: italic; }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--marron); outline-offset: 2px; }

.sprite-iconos { display: none; }

.icono {
  width: 1em; height: 1em;
  fill: currentColor;
  vertical-align: -0.12em;
}

/* -------------------------------------------------------------- rejilla */
.contenedor {
  width: 80%;
  max-width: var(--contenedor);
  margin: 0 auto;
}

.seccion { padding: 4% 0; }

/* La primera sección de cada página interior deja sitio a la barra y a la
   cabecera, que van fijas y por tanto no ocupan espacio en el flujo. */
.seccion-primera { padding-top: 182px; }
.seccion-tras-hero { padding-top: 33px; }

/* La fila es a la vez el contenedor y la caja con aire, como en Divi: el 2%
   de su relleno se mide contra el ancho de la sección -1440 en escritorio-,
   no contra el suyo propio. Separarlos en dos cajas daría 23px en vez de 29. */
.fila {
  width: 80%;
  max-width: var(--contenedor);
  margin: 0 auto;
  padding: 2% 0;
}

/* Las filas van pegadas: el aire entre módulos lo ponen ellas. */
.fila-estrecha { max-width: 700px; }

/* Divi deja 31,67px por debajo de cada módulo dentro de una columna. */
.modulo { margin-bottom: 31.67px; }
.modulo:last-child { margin-bottom: 0; }

/* Un párrafo que es módulo por sí solo era el último de su módulo en el
   original, así que no lleva el relleno que separa párrafos hermanos: el aire
   lo pone el margen del módulo. */
p.modulo { padding-bottom: 0; }

.columnas { display: flex; flex-wrap: wrap; }
.columnas > * { margin-right: var(--gutter); }
.columnas > *:last-child { margin-right: 0; }
.columnas-2 > * { width: 47.25%; }
.columnas-3 > * { width: 29.6667%; }
.columnas-4 > * { width: 20.875%; }

.centrado { text-align: center; }

/* Divi centra verticalmente el contenido de algunas columnas. */
.centrado-vertical { display: flex; flex-direction: column; justify-content: center; }

/* Las fotos que ocupan su columna entera: el fichero es mayor que el hueco
   para que se vea nítido, así que manda el ancho de la columna. */
.foto { width: 100%; }

/* Divi baja a 16px el texto de algunos módulos, y ese es justo el que encoge
   en pantallas pequeñas: 15px en tableta y 14px en móvil. El texto de 18px, en
   cambio, se queda igual en los tres tamaños. */
.texto-16, .hero p, .ficha-contacto p, .ficha-contacto a {
  font-size: 16px;
  line-height: 1.8;
}

/* -------------------------------------------------- barra superior y menú */
.barra-superior {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--alto-barra);
  background: var(--negro);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.barra-superior .contenedor {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 16px;
}

.barra-dato { display: inline-flex; align-items: center; gap: 3px; }
.barra-dato a { text-decoration: none; }
.barra-dato .icono { width: 14px; height: 14px; }

.cabecera {
  position: fixed;
  top: var(--alto-barra); left: 0; right: 0;
  z-index: 99;
  height: var(--alto-cabecera);
  background: rgba(179, 179, 179, 0.69);
  transition: height 0.4s ease-in-out, background-color 0.4s;
}

/* En cuanto se baja del hueco de la cabecera, el tema la encoge y la vuelve
   opaca. Es lo que hacía el WordPress y se nota al desplazarse, así que se
   conserva. */
.cabecera.encogida {
  height: var(--alto-cabecera-fija);
  background: var(--blanco);
}

.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.marca { margin: 0; padding: 0 0 0 5px; }
/* En bloque: como enlace en línea, la caja de la línea le añade dieciocho
   píxeles por debajo del logotipo y lo descentra en la cabecera. */
.marca a { display: block; }

/* El logotipo ocupa el 80% del alto de la cabecera, como en el original: 75px
   arriba del todo y 43 cuando la cabecera se encoge. El ancho lo pone su
   proporción. */
.marca img { height: 75px; width: auto; transition: height 0.4s ease-in-out; }
.cabecera.encogida .marca img { height: 43px; }

.navegacion ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navegacion li { padding-right: 22px; }
.navegacion li:last-child { padding-right: 0; }

.navegacion a {
  font-size: 16px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta-suave);
}

.navegacion a:hover { opacity: 0.7; }
.navegacion a.activo { color: var(--negro); }

.interruptor {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.interruptor > span:first-child,
.interruptor > span:first-child::before,
.interruptor > span:first-child::after {
  display: block;
  width: 24px; height: 2px;
  margin: 0 auto;
  background: var(--tinta);
  transition: transform 0.2s;
}

.interruptor > span:first-child::before { content: ''; transform: translateY(-7px); }
.interruptor > span:first-child::after { content: ''; transform: translateY(5px); }

.interruptor[aria-expanded="true"] > span:first-child { background: transparent; }
.interruptor[aria-expanded="true"] > span:first-child::before { transform: rotate(45deg); }
.interruptor[aria-expanded="true"] > span:first-child::after { transform: rotate(-45deg); }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 882px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(rgba(52, 33, 7, 0.59) 0%, rgba(52, 33, 7, 0.52) 99%),
    url('/assets/img/hero.jpg?v=f719bc74') center / cover no-repeat;
}

.hero h1 {
  font-size: 115.2px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 31.67px;
}

.hero p {
  color: var(--blanco);
  max-width: 600px;
}

/* La acuarela se apoya en la esquina inferior izquierda del hero, montada
   sobre la foto. En el original es una fila colocada a mano ahí. */
.hero-acuarela {
  position: absolute;
  left: 0; bottom: 0;
  width: 484px;
  max-width: 100%;
  pointer-events: none;
}

/* --------------------------------------------------------------- botones */
.boton {
  display: inline-block;
  padding: 12px 24px;
  border: 0;
  background: var(--blanco);
  color: var(--marron);
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover { opacity: 0.85; }

/* --------------------------------------------------- tarjetas de la portada */
.ruta-destacada { text-align: left; }

.ruta-destacada h3 {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  color: var(--tinta);
}

/* ------------------------------------------------------ tarjetas de rutas */
.tarjeta-ruta {
  /* La tarjeta mide lo que mide su contenido: en el original las dos de una
     misma fila no se igualan, y la sombra lo delata. */
  align-self: flex-start;
  padding: 22px 11px;
  box-shadow: rgba(0, 0, 0, 0.3) 6px 6px 18px 0;
}

/* La foto de la tarjeta no pasa de 550px, que es lo que medía la del blurb en
   el original: en tableta la columna da para más y la foto se queda centrada. */
.tarjeta-ruta .foto {
  max-width: 550px;
  margin: 0 auto 29px;
}

/* Los avisos en cursiva siguen al listado sin más aire que el de un párrafo.
   Sólo la primera ruta lleva una línea en blanco por medio: en el original es
   un párrafo vacío, y se conserva porque forma parte de lo que se ve. */
.tarjeta-ruta .notas-separadas { margin-top: 49px; }
.tarjeta-ruta .notas p:last-child { padding-bottom: 0; }

.tarjeta-ruta h2 {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 18px;
  /* 24px, que es lo que ocupa esta línea en el original, donde el título es
     un span dentro de un módulo y no un bloque. */
  line-height: 24px;
  font-weight: 700;
  color: var(--tinta);
  padding-bottom: 0;
  margin-bottom: 5px;
}

.tarjeta-ruta p { padding-bottom: 18px; }

/* ------------------------------------------------------------- contenido */
.crema { background: var(--crema); }

.ficha-contacto {
  background: var(--crema);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ficha-contacto h6 {
  font-size: 16px;
  line-height: 1.4;
  color: var(--marron);
}

.ficha-contacto h3 {
  font-size: 36px;
  line-height: 1.4;
  color: #2a2a2a;
}

.ficha-contacto p, .ficha-contacto a { color: #2a2a2a; }
.ficha-contacto a { text-decoration: none; }

.ficha-contacto .dato { margin-bottom: 40px; }

/* ------------------------------------------------------------ formulario */
/* Divi separa los campos con un 3% del ancho del formulario, no con una medida
   fija: por eso en el móvil el hueco baja de 17 a 9 píxeles. */
.formulario p { margin: 0 0 3%; padding-bottom: 0; }
.formulario p.medio { width: 48.5%; }

.formulario input,
.formulario textarea {
  width: 100%;
  padding: 12px 24px;
  border: 2px solid var(--marron);
  border-radius: 0;
  background: transparent;
  color: var(--marron);
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* En bloque: como caja en línea deja por debajo el hueco de la línea base y
   el párrafo que la envuelve mide nueve píxeles de más. */
.formulario textarea { display: block; height: 150px; resize: vertical; }

.formulario ::placeholder { color: var(--marron); opacity: 1; }

.formulario .titulo-campo {
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 9px;
}

.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--marron);
}

.consentimiento input {
  width: 21px; height: 21px;
  margin: 6px 0 0;
  flex: none;
  accent-color: var(--marron);
}

/* La trampa para robots: un campo que ninguna persona ve ni puede tabular, y
   que casi todos los rellenadores automáticos completan. */
.tarro {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.pie-formulario {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 1.6%;
}

.suma { display: inline-flex; align-items: center; gap: 6px; }
.suma input { width: 50px; padding: 16px; text-align: center; }

.formulario button {
  /* Tan alto como la casilla de la suma, que es lo que manda en esa línea. */
  align-self: stretch;
  padding: 12px 24px;
  border: 0;
  background: var(--marron);
  color: var(--blanco);
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: 4.2px;
  text-transform: uppercase;
  cursor: pointer;
}

.formulario button:hover { opacity: 0.9; }

.formulario .aviso-formulario { margin: 12px 0 0; padding-bottom: 0; }
/* Mientras no diga nada no ocupa: su margen se colapsaría hacia fuera del
   formulario y estiraría la columna doce píxeles. Se queda en el documento,
   eso sí, para que el lector de pantalla anuncie el resultado del envío. */
.formulario .aviso-formulario:empty { margin: 0; }
.aviso-formulario.mal { color: #a3341f; }
.aviso-formulario.bien { color: #1f7a3d; }

/* ----------------------------------------------------------------- legal */
.legal h1 {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  color: var(--tinta);
  padding-bottom: 12px;
}

.legal h2 {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 700;
  color: var(--texto);
  padding-bottom: 0;
  margin-top: 30px;
}

.legal ul { margin: 0 0 1em; padding-left: 1.2em; }
.legal li { margin-bottom: 6px; }

.legal .ficha-datos {
  background: var(--crema);
  padding: 24px 30px;
  margin-bottom: 1em;
}

.legal .ficha-datos p { padding-bottom: 0; }

/* ------------------------------------------------------------------- pie */
.pie {
  padding: 4% 0 0;
  color: var(--blanco);
  background:
    linear-gradient(rgb(52, 33, 7) 30%, rgba(52, 33, 7, 0.85) 100%),
    url('/assets/img/pie.jpg?v=f60f96cb') center / cover no-repeat;
}

.pie p { padding-bottom: 18px; }
.pie p:last-child { padding-bottom: 0; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }

.pie-raya {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 60px;
  padding: 2% 0;
}

.pie-copyright {
  margin: 0;
  padding-bottom: 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--marron);
}

.kit-digital { width: 100%; height: auto; }

/* -------------------------------------------------------------- whatsapp */
.whatsapp {
  position: fixed;
  right: 15px; bottom: 55px;
  z-index: 200;
  width: 50px; height: 50px;
  line-height: 0;
}

.whatsapp svg { width: 50px; height: 50px; }

/* ------------------------------------------------------- tableta (≤980px) */
@media (max-width: 980px) {
  .seccion { padding: 50px 0; }
  /* El hueco que dejan la barra y la cabecera fijas es 10px menor aquí que en
     escritorio, y la sección que va tras el bloque de presentación conserva
     sus 33px de aire arriba. */
  .seccion-primera { padding-top: 160px; }
  .seccion-tras-hero { padding-top: 33px; }
  .fila { padding: 30px 0; }
  .pie { padding-top: 50px; }
  .pie-raya { padding: 30px 0; }

  .columnas-2 > *, .columnas-3 > * { width: 100%; margin-right: 0; }
  .columnas-2 > *:not(:last-child),
  .columnas-3 > *:not(:last-child) { margin-bottom: 30px; }

  .columnas-4 > * { width: 47.25%; }
  .columnas-4 > *:nth-child(2n) { margin-right: 0; }
  .columnas-4 > *:nth-child(-n+2) { margin-bottom: 30px; }

  /* Por debajo de 981px la cabecera es blanca y más baja desde el principio:
     el tema no la deja translúcida en pantallas pequeñas. */
  .cabecera, .cabecera.encogida {
    height: var(--alto-cabecera-movil);
    background: var(--blanco);
  }

  .marca img, .cabecera.encogida .marca img { height: 43px; }

  .navegacion {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: none;
    background: var(--blanco);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  }

  .navegacion.abierta { display: block; }
  .navegacion ul { display: block; padding: 10px 0; }
  .navegacion li { padding: 0; }
  .navegacion a { display: block; padding: 12px 20px; }

  .interruptor { display: block; }

  .hero h1 { font-size: 61.44px; }
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }

  .ficha-contacto h3 { font-size: 20px; }
  .formulario p.medio { width: 100%; }

  .texto-16, .hero p, .ficha-contacto p, .ficha-contacto a { font-size: 15px; }
  .pie-copyright { font-size: 15px; }
}

/* --------------------------------------------------------- móvil (≤767px) */
@media (max-width: 767px) {
  .columnas-4 > * { width: 100%; margin-right: 0; }
  .columnas-4 > *:not(:last-child) { margin-bottom: 30px; }

  .hero h1 { font-size: 31.2px; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }

  .ficha-contacto { padding: 30px; }
  .ficha-contacto h3 { font-size: 16px; }

  .pie-formulario { justify-content: flex-start; flex-wrap: wrap; }

  .texto-16, .hero p, .ficha-contacto p, .ficha-contacto a { font-size: 14px; }
  .pie-copyright { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}