/* ==========================================================================
   Ramón Hermosilla Abogados — hoja de estilos del sitio estático
   Réplica del tema WordPress "ramon_hermosilla" (Wonton, 2015) sin plugins.
   Requiere Bootstrap 3 (rejilla y utilidades) cargado antes.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --rojo: #a2292e;
  --texto: #666666;
  --gris: #5d5d5d;
  --oscuro: #1a1a1a;
  --pie: #808080;
  --serif: Georgia, Times, "Times New Roman", serif;
}

/* ---------- Tipografías (Futura LT, alojadas en /assets/fonts) ---------- */
@font-face {
  font-family: 'futura_ltregular';
  src: url('../fonts/futuralt-webfont.woff2') format('woff2'),
       url('../fonts/futuralt-webfont.woff') format('woff'),
       url('../fonts/futuralt-webfont.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'futura_ltbook';
  src: url('../fonts/futuralt-book-webfont.woff2') format('woff2'),
       url('../fonts/futuralt-book-webfont.woff') format('woff'),
       url('../fonts/futuralt-book-webfont.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'futura_ltlight';
  src: url('../fonts/futuralt-light-webfont.woff2') format('woff2'),
       url('../fonts/futuralt-light-webfont.woff') format('woff'),
       url('../fonts/futuralt-light-webfont.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ---------- Base (sustituye las personalizaciones del bootstrap.min.css del tema) ---------- */
body {
  font-family: 'futura_ltregular', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.92857143;
  letter-spacing: .5px;
  color: var(--texto);
  background: #fff;
  animation: fadein 1s;
}
a { color: var(--rojo); text-decoration: none; }
a:hover, a:focus { color: var(--rojo); text-decoration: underline; }
p { margin: 0 0 20px; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

input:focus, select:focus, textarea:focus, button:focus { outline: none; }

/* Sin borde de foco al hacer clic con el ratón (Bootstrap lo añade a a:focus).
   Se conserva solo para quien navega con teclado (accesibilidad). */
a:focus, button:focus { outline: none; }
a:focus-visible, button:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

.wrapper { margin-bottom: 5em; }
.container { margin-top: 9em; position: relative; }
.center { margin: 0 auto; float: none; text-align: center; }
.main { min-height: 300px; }

/* ---------- Cabecera fija ---------- */
.cbp-af-header {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 10000;
  height: 250px;
  padding-top: 30px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center;
  transition: height .3s;
}
.cbp-af-header .cbp-af-inner { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0; }
.cbp-af-header h1.site-title,
.cbp-af-header nav { display: inline-block; position: relative; }
.cbp-af-header h1.site-title,
.cbp-af-header nav a { line-height: 130px; }
.cbp-af-header h1.site-title {
  color: #fff; letter-spacing: 2px; font-size: 47px; margin: 0;
  float: left; text-align: center; font-family: 'futura_ltlight';
}
.cbp-af-header h1.site-title img { height: auto; max-width: 100%; }
.cbp-af-header nav { float: right; }
.cbp-af-header nav a {
  color: #fff;
  margin: 0 0 0 19px;
  font-size: 12px;
  font-family: 'futura_ltregular';
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: none;
}
.cbp-af-header nav a:hover { color: #ddd; text-decoration: none; }
.cbp-af-header .current-menu-item > a,
.cbp-af-header .current-page-ancestor > a { border-bottom: 1px solid #fff; padding-bottom: 6px; }

.primary-menu-wrap { line-height: 20px; float: left; }
.primary-menu-wrap ul { margin: 0; padding: 0; }
.primary-menu-wrap li { display: inline; }

.cbp-af-header .entry-header { clear: both; margin: 0 auto; width: 100%; }
.cbp-af-header .entry-header h1 {
  float: left; text-align: center; width: 100%;
  line-height: .8; margin: 0;
  color: #fff; letter-spacing: 2px; font-size: 47px;
  font-family: 'futura_ltlight'; font-weight: 500;
}

/* Cabecera compacta al hacer scroll */
.cbp-af-header.cbp-af-header-shrink { height: 100px; }
.cbp-af-header.cbp-af-header-shrink h1.site-title,
.cbp-af-header.cbp-af-header-shrink nav a { line-height: 90px; }
.cbp-af-header.cbp-af-header-shrink h1.site-title { font-size: 2em; }
.cbp-af-header.cbp-af-header-shrink h1.site-title,
.cbp-af-header.cbp-af-header-shrink nav a { margin-top: 25px; }
.cbp-af-header.cbp-af-header-shrink h1.site-title { margin-top: 0; }
.cbp-af-header-shrink .entry-header { display: none; }

/* ---------- Selector de idioma ---------- */
.lang-sel {
  float: right;
  position: relative;
  top: 52px;
  height: 100px;
  overflow: hidden;
  font-family: 'futura_ltregular';
  text-align: left;
  margin-left: 19px;
}
.lang-sel ul { list-style: none; margin: 0; padding: 0; }
.lang-sel li { width: 113px; position: relative; }
.lang-sel a,
.cbp-af-header nav .lang-sel a {
  display: block;
  color: #fff;
  font-size: 12px;
  opacity: .76;
  line-height: 22px;
  margin: 0;
  letter-spacing: 1px;
  text-transform: none;
  padding: 0 0 0 4px;
}
.lang-sel .lang-actual::after { content: " \25BE"; font-size: 10px; }
.lang-sel ul ul { visibility: hidden; padding-top: 6px; }
.lang-sel li:hover ul,
.lang-sel li:focus-within ul { visibility: visible; }
.lang-sel ul ul a:hover { text-decoration: underline; }
.cbp-af-header-shrink .lang-sel { top: 33px; }
.lang-responsive { display: none; }

/* ---------- Home ---------- */
.home .cbp-af-header { height: 140px; background: #fff !important; }
.home .cbp-af-header nav a { color: #171f24; }
.home .cbp-af-header nav a:hover { border-bottom: 1px solid #000; padding-bottom: 6px; }
.home .lang-sel a { color: #171f24; }
.home .lang-sel ul ul a { text-decoration: underline; }
.home .wrapper { margin-bottom: 0; }
.home .container { margin-top: 0; }

/* Slider de portada (sustituye a Slider Revolution) */
.slider {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 480px;
  overflow: hidden;
  background: #171f24;
}
.slider__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex; align-items: center; justify-content: center;
}
.slider__slide.is-active { opacity: 1; z-index: 1; }
.slider__caption {
  width: 738px; max-width: calc(100% - 40px);
  text-align: center;
  color: #fff;
  font-family: 'futura_ltlight';
  font-weight: 100;
  font-size: 38px;
  line-height: 45px;
  letter-spacing: .5px;
  margin-top: 70px; /* compensa la cabecera blanca de 140px */
  opacity: 0;
  transition: opacity .3s ease-in-out .5s;
}
.slider__slide.is-active .slider__caption { opacity: 1; }
.slider__caption--sm { font-size: 34px; }
.slider__timer {
  position: absolute; top: 0; left: 0; z-index: 3;
  height: 5px; width: 0;
  background: rgba(0, 0, 0, .15);
}
.slider__timer.is-running { width: 100%; transition: width 5s linear; }
.slider__dots {
  position: absolute; bottom: 40px; left: 0; right: 0; z-index: 3;
  text-align: center; margin: 0; padding: 0; list-style: none;
}
.slider__dots li { display: inline-block; margin: 0 2px; }
.slider__dots button {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
  transition: background .3s;
}
.slider__dots button:hover,
.slider__dots button[aria-current="true"] { background: #fff; }

/* ---------- Migas de pan ---------- */
.breadcrumbs {
  margin: 0 auto 4em;
  text-align: center;
  font-family: var(--serif);
  color: var(--oscuro);
  font-size: 10px;
  letter-spacing: 1px;
}
.breadcrumbs a { color: var(--oscuro); }
.breadcrumbs a:hover { color: var(--rojo); }

/* ---------- Bloques de contenido ---------- */
.seccion { margin-top: 1.5em; margin-bottom: 5em; }
.seccion img { max-width: 90%; width: 100%; }
.destacado {
  display: block;
  font-size: 26px;
  font-family: 'futura_ltlight';
  letter-spacing: 1px;
  line-height: 1.4em;
}
.site-main img { width: 100%; margin-bottom: 1em; height: auto; }

/* Rejilla de áreas */
.areas { padding-left: 5px; padding-right: 5px; }
.areas > a { display: block; }
.areas a { color: #fff; }
.areas a:hover { text-decoration: none; }
.areas h3 { font-size: 27px; font-family: 'futura_ltlight'; }
.area-practica {
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 10px;
  min-height: 237px;
  padding: 50px 90px 0;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: gray;
  position: relative;
  transition: all .5s ease-in-out;
}
.area-practica:hover { background-size: 130%; }
.superareas .no-padding { padding-left: 0; padding-right: 10px; }
.superareas .no-padding:nth-child(2n+1) { padding-left: 15px; }
.superareas .areas h3 { margin-top: 25%; }
.areas .col-md-8 { float: right; }

/* Menú lateral de áreas */
.menu-lateral { padding-left: 0; }
.menu-lateral .sidenav { max-width: 250px; }
.menu-lateral ul { padding-left: 0; margin: 0; }
.menu-lateral > ul { width: 250px; border-top: 1px solid var(--rojo); }
.menu-lateral li { list-style: none; border-bottom: 1px solid var(--rojo); }
.menu-lateral a {
  display: block;
  padding: 6px 0;
  color: var(--gris);
  text-transform: uppercase;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
}
.menu-lateral a:hover { color: var(--rojo); text-decoration: none; }
.menu-lateral .sub-menu { display: block; margin: .2em 0 1.9em .7em; }
.menu-lateral .sub-menu li { border: none; font-family: var(--serif); font-size: 14px; margin-bottom: 3px; }
.menu-lateral .sub-menu a { text-transform: inherit; padding-left: 3px; color: var(--gris); }
.menu-lateral .sub-menu a::before { content: ">"; margin-right: 3px; }
.menu-lateral .is-current > a { color: var(--rojo); }
.menu-lateral .is-parent > a { color: var(--rojo); }
.menu-lateral .sub-menu .is-current > a { color: var(--rojo); font-weight: bold; }
.menu-lateral .sub-menu .is-current > a::before { color: var(--rojo); }
.menu-lateral.is-sticky { position: sticky; top: 130px; align-self: flex-start; }

.titulo-area {
  margin: 0 0 1em;
  padding-left: 15px;
  color: var(--oscuro);
  font-family: 'futura_ltlight';
  font-size: 35px;
}
.columnas h4 {
  color: var(--rojo);
  font-family: var(--serif);
  font-size: 18px;
  margin: 2em 0 1em;
}
.columnas ul ul { margin: 20px 0; }
.columnas ol ul li { list-style: circle; }

/* ---------- Equipo ---------- */
.equipo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.equipo + .equipo { justify-content: flex-start; gap: 1.875%; margin-top: 20px; }
.equipo__item { width: 18.5%; }
.equipo__item a { display: block; }
.equipo__item a:hover { text-decoration: none; }
.equipo img {
  width: 100%;
  margin-bottom: 0 !important;
  transition: all 150ms linear;
}
.equipo img:hover,
.equipo__item.is-current img { filter: grayscale(1); }
.nombre {
  display: block;
  margin-top: 15px;
  color: var(--gris);
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.5em;
  letter-spacing: 1px;
  text-align: center;
}

/* Ficha de perfil */
.perfil img { width: 100%; }
.perfil .col-md-8 { float: right; }
.perfil h2 {
  font-size: 40px;
  font-family: 'futura_ltlight';
  margin: 0 0 5px;
  color: var(--oscuro);
}
.perfil h4 {
  color: var(--rojo);
  font-family: var(--serif);
  font-size: 18px;
  margin: 3em 0 1em;
}
.vcard { display: block; font-size: 13px; font-family: var(--serif); }
.vcard a { color: var(--oscuro); cursor: pointer; }
.otros { margin-top: 7em; }
.otros h4 { border-bottom: 1px solid var(--rojo); padding-bottom: 8px; margin-left: 5px; margin-right: 19px; }
.otros .equipo { justify-content: flex-start; gap: 1.875%; margin-top: 20px; }

/* ---------- Contacto ---------- */
.ofis { display: flex; justify-content: space-between; padding: 0 30px; }
.ofis .ofi { width: 46%; text-align: center; }
.ofis h3 { font-family: 'futura_ltlight'; color: var(--oscuro); }

/* ---------- Páginas legales ---------- */
.tabla-cookies { width: 100%; max-width: 900px; margin-bottom: 20px; }
.tabla-cookies td { padding: 4px 8px; width: 25%; vertical-align: top; }

/* ---------- Pie ---------- */
.site-footer {
  background: var(--pie);
  padding: 3em 0 2em;
  position: relative;
  z-index: 9999;
}
.site-info {
  display: block;
  margin: 0 auto;
  padding: 0 15px 30px;
  max-width: 1170px;
  color: #fff;
  font-size: 13px;
}
.site-info::after { content: ""; display: table; clear: both; }
.site-info a { color: #fff; }
.site-info a:hover { text-decoration: underline; }
.site-info__dir { padding-bottom: 60px; font-size: 16px; line-height: 23px; text-align: center; }
.site-info__dir img { max-width: 100%; height: auto; }
.site-info__copy { float: left; font-size: 11px; line-height: 14px; }
.site-info__credit { float: right; font-size: 11px; line-height: 14px; }

/* Botón volver arriba */
.scrolltop {
  position: fixed; right: 12px; bottom: 5px; z-index: 99999;
  width: 52px; height: 39px;
  border: 0; padding: 0;
  background: #3b3738 url("../img/arrow-top.png") no-repeat 10px 5px;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .6s, visibility .6s, background-color 150ms linear;
}
.scrolltop.is-visible { opacity: 1; visibility: visible; }
.scrolltop:hover { background-color: var(--rojo); }
/* Si no existe la imagen de la flecha, se dibuja una en CSS */
.scrolltop::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; margin: -3px 0 0 -6px;
  border-left: 2px solid #fdf3e7; border-top: 2px solid #fdf3e7;
  transform: rotate(45deg);
}
.scrolltop.has-img::before { display: none; }

/* ---------- Aviso de cookies ---------- */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000;
  background: #fff;
  color: #000;
  border-top: 2px solid #444;
  padding: 10px 15px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .1);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar__btn {
  display: inline-block;
  margin: 0 5px 0 10px;
  padding: 4px 10px;
  border: 0;
  background: var(--rojo);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.cookie-bar__btn:hover { background: #7f1f23; }
.cookie-bar a { color: #444; }

/* ---------- Aparición suave (sustituye a WOW.js) ---------- */
.reveal { opacity: 0; transition: opacity .8s ease .3s; }
.reveal.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transition: none; }
  body { animation: none; }
  .slider__slide, .slider__caption { transition: none; }
}

/* ---------- Menú móvil ---------- */
.mobile-menu { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .area-practica { min-height: 230px; }
  .menu-lateral { overflow: hidden; }
  .cbp-af-header { transition: height .6s; }
}

@media (max-width: 880px) {
  .cbp-af-header .cbp-af-inner { width: 100%; }
  .cbp-af-header h1.site-title,
  .cbp-af-header nav { display: block; margin: 0 auto; text-align: center; float: none; }
  .cbp-af-header h1.site-title,
  .cbp-af-header nav a { line-height: 115px; }
  .cbp-af-header nav a { margin: 0 10px; }
  .primary-menu-wrap { float: none; }
  .lang-sel { float: none; position: absolute; top: 0; right: 15px; height: auto; }
  .cbp-af-header.cbp-af-header-shrink h1.site-title,
  .cbp-af-header.cbp-af-header-shrink nav a { line-height: 45px; }
  .cbp-af-header h1.site-title img { max-width: 260px; }
}

@media (max-width: 800px) {
  .home .cbp-af-header { height: 250px; }
}

@media (max-width: 768px) {
  .cbp-af-header { height: 270px; }
  .cbp-af-header.cbp-af-header-shrink { height: 110px; }
  .equipo__item { width: 100%; }
  .equipo { gap: 30px; }
  .superareas .no-padding,
  .superareas .no-padding:nth-child(2n+1) { padding-left: 15px; padding-right: 0; }
  .site-info { padding-bottom: 0; }
  .site-info__dir { padding-bottom: 40px; font-size: 15px; }
  .site-info > div { padding-bottom: 20px; float: none !important; text-align: center; }
}

@media (max-width: 767px) {
  .ofis { flex-direction: column; padding: 0; }
  .ofis .ofi { width: 100%; }
  .ofis .ofi:last-child { margin-top: 40px; }

  /* Cabecera móvil: logo centrado + botón de menú */
  .cbp-af-header nav.main-navigation { display: none !important; }
  .cbp-af-header { height: 140px; padding-top: 50px; }
  .cbp-af-header .entry-header h1 { font-size: 34px; margin-top: 10px; }
  .cbp-af-header.cbp-af-header-shrink { height: 120px; }
  .home .cbp-af-header { height: 140px; background: #fff !important; }
  .cbp-af-header h1.site-title { line-height: 60px; }
  .container { margin-top: 6em; }

  .lang-responsive {
    display: block;
    position: fixed; top: 10px; right: 15px;
    z-index: 100001;
  }
  .lang-responsive .lang-sel { position: static; height: auto; overflow: visible; margin: 0; }
  .lang-responsive .lang-sel li { width: 85px; text-align: right; }
  .lang-responsive .lang-sel a { color: #fff; opacity: .9; }
  .home .lang-responsive .lang-sel a { color: #171f24; }

  .mobile-menu { display: block; position: fixed; top: 0; left: 0; width: 100%; z-index: 100000; }
  .mobile-menu__toggle {
    position: absolute; top: 8px; left: 15px;
    width: 41px; height: 36px;
    border: 0; padding: 0;
    background: rgba(163, 41, 44, .63);
    cursor: pointer;
  }
  .mobile-menu__toggle span,
  .mobile-menu__toggle span::before,
  .mobile-menu__toggle span::after {
    position: absolute; left: 10px;
    width: 21px; height: 2px;
    background: #fff;
    content: "";
    transition: transform .25s ease, top .25s ease;
  }
  .mobile-menu__toggle span { top: 17px; }
  .mobile-menu__toggle span::before { left: 0; top: -7px; }
  .mobile-menu__toggle span::after { left: 0; top: 7px; }
  .mobile-menu.is-open .mobile-menu__toggle span { background: transparent; }
  .mobile-menu.is-open .mobile-menu__toggle span::before { top: 0; transform: rotate(45deg); }
  .mobile-menu.is-open .mobile-menu__toggle span::after { top: 0; transform: rotate(-45deg); }

  .mobile-menu__panel {
    display: none;
    margin-top: 52px;
    max-height: calc(100vh - 52px);
    overflow-y: auto;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid #cecece;
    padding: 1rem 0 2rem;
  }
  .mobile-menu.is-open .mobile-menu__panel { display: block; }
  .mobile-menu ul { list-style: none; margin: 0; padding: 0; }
  .mobile-menu li { position: relative; border-top: 1px solid rgba(120, 120, 120, .2); }
  .mobile-menu a {
    display: block;
    padding: 14px 60px 14px 20px;
    color: #000;
    font-family: 'futura_ltlight';
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .mobile-menu ul ul a { padding-left: 35px; font-size: 16px; text-transform: none; }
  .mobile-menu ul ul ul a { padding-left: 50px; }
  .mobile-menu ul ul { display: none; }
  .mobile-menu li.is-open > ul { display: block; }
  .mobile-menu__sub {
    position: absolute; top: 0; right: 0;
    width: 50px; height: 48px;
    border: 0; border-left: 1px solid rgba(120, 120, 120, .2);
    background: transparent;
    cursor: pointer;
  }
  .mobile-menu__sub::before,
  .mobile-menu__sub::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    background: #555;
  }
  .mobile-menu__sub::before { width: 10px; height: 2px; margin: -1px 0 0 -5px; }
  .mobile-menu__sub::after { width: 2px; height: 10px; margin: -5px 0 0 -1px; transition: transform .2s; }
  .mobile-menu li.is-open > .mobile-menu__sub::after { transform: scaleY(0); }

  .menu-lateral.is-sticky { position: static; }
  .slider__caption { font-size: 26px; line-height: 32px; }
  .slider__caption--sm { font-size: 24px; }
  .slider__dots { display: none; }
}

@media (max-width: 480px) {
  .area-practica { padding: 30px 20px 0; background-size: cover; }
  .area-practica:hover { background-size: cover; }
  .destacado { font-size: 22px; }
  .perfil h2 { font-size: 32px; margin-top: 20px; }
}