/*
Theme Name:   Casas Rurales Amigas
Description:  Tema hijo de Kadence para casasruralesamigas.com. Colores y tipografía de la marca, ficha de casa con reserva directa, buscador, zonas, escapadas y blog.
Template:     kadence
Version:      0.6.0
Requires PHP: 8.1
Text Domain:  cra
License:      GPL-2.0-or-later
*/

@font-face { font-family: "Quicksand"; src: url("assets/fuentes/quicksand-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("assets/fuentes/nunito-sans-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

/* Paleta de la web actual (amarillo de botones, turquesa de distintivos, rojo del logotipo)
   sobre fondo blanco, con bandas suaves para separar secciones. */
:root {
  --cra-amarillo: #f3b412;
  --cra-amarillo-osc: #d99a00;
  --cra-amarillo-claro: #fff4d6;
  --cra-turquesa: #0dbfe2;
  --cra-turquesa-osc: #06768d;
  --cra-turquesa-claro: #e8f7fb;
  --cra-banda: #f2f9fb;
  --cra-rojo: #e2370c;
  --cra-marron: #2f0805;
  --cra-tinta: #1c2a31;
  --cra-texto: #3a464d;
  --cra-suave: #66727a;
  --cra-linea: #e1e8eb;
  --cra-fondo: #ffffff;
  --cra-sombra: 0 1px 2px rgba(20, 40, 50, .06), 0 6px 20px rgba(20, 40, 50, .07);
  --cra-sombra-alta: 0 4px 10px rgba(20, 40, 50, .08), 0 18px 40px rgba(20, 40, 50, .12);
  --cra-radio: 16px;
  --cra-titulos: "Quicksand", "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --cra-cuerpo: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* Variables de Kadence */
  --global-palette1: #06768d;
  --global-palette2: #f3b412;
  --global-palette3: #1c2a31;
  --global-palette4: #3a464d;
  --global-palette5: #4f5962;
  --global-palette6: #66727a;
  --global-palette7: #e8f7fb;
  --global-palette8: #ffffff;
  --global-palette9: #ffffff;
  --global-body-font-family: var(--cra-cuerpo);
  --global-heading-font-family: var(--cra-titulos);
}

html, body, .site, #wrapper, #inner-wrap { background: var(--cra-fondo); }
body { font-family: var(--cra-cuerpo); color: var(--cra-texto); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .site-title { font-family: var(--cra-titulos); color: var(--cra-tinta); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
a { color: var(--cra-turquesa-osc); text-underline-offset: 3px; }
a:hover { color: #045566; }
:focus-visible { outline: 3px solid var(--cra-turquesa); outline-offset: 2px; border-radius: 4px; }
.button, button.button, .wp-block-button__link, input[type=submit] { background: var(--cra-amarillo); color: #2a1c00; border-radius: 12px; font-weight: 800; }
.cra-contenedor { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.cra-i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* Título de sección: antetítulo turquesa + barra amarilla */
.cra-antetitulo { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 800; color: var(--cra-turquesa-osc); }
.cra-antetitulo::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--cra-amarillo); }

/* ---------- Ficha de casa ---------- */
.cra-ficha { padding-block: 20px 64px; }
.cra-migas { font-size: .9rem; color: var(--cra-suave); margin: 0 0 14px; }
.cra-migas a { color: var(--cra-suave); text-decoration: none; }
.cra-migas a:hover { color: var(--cra-turquesa-osc); }
/* Galería: mosaico en escritorio (se adapta a 1-5 fotos), carrusel en el móvil */
.cra-galeria-marco { position: relative; }
.cra-galeria { display: grid; gap: 6px; height: clamp(300px, 40vw, 520px); border-radius: 20px; overflow: hidden; }
.cra-galeria a { position: relative; display: block; overflow: hidden; background: var(--cra-turquesa-claro); cursor: zoom-in; }
.cra-galeria a:nth-child(n+6) { display: none; }
.cra-galeria img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease, filter .3s; }
.cra-galeria a:hover img { transform: scale(1.04); filter: brightness(.92); }
.cra-galeria--1 { grid-template-columns: 1fr; }
.cra-galeria--2 { grid-template-columns: 3fr 2fr; }
.cra-galeria--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.cra-galeria--3 a:first-child { grid-row: span 2; }
.cra-galeria--4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cra-galeria--4 a:first-child { grid-row: span 2; }
.cra-galeria--4 a:nth-child(2) { grid-column: span 2; }
.cra-galeria--5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cra-galeria--5 a:first-child { grid-row: span 2; }
.cra-galeria__todas { position: absolute; right: 16px; bottom: 16px; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .95); color: var(--cra-tinta); font: 800 .95rem var(--cra-cuerpo); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.cra-galeria__todas:hover { background: #fff; transform: translateY(-1px); }
.cra-galeria__contador { display: none; }
@media (max-width: 760px) {
  .cra-galeria-marco { margin-inline: calc(-1 * max(20px, env(safe-area-inset-left))); }
  .cra-galeria { display: flex; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 0; gap: 4px; scrollbar-width: none; }
  .cra-galeria::-webkit-scrollbar { display: none; }
  .cra-galeria a, .cra-galeria a:nth-child(n+6) { display: block; flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .cra-galeria__todas { display: none; }
  .cra-galeria__contador { display: block; position: absolute; right: 14px; bottom: 12px; padding: 4px 11px; border-radius: 99px; background: rgba(14, 22, 26, .7); color: #fff; font-size: .82rem; font-weight: 800; pointer-events: none; }
}

.cra-ficha__cab { margin: 22px 0 6px; display: grid; gap: 6px; }
.cra-ficha__cab h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; }
.cra-ficha__lugar { display: flex; align-items: center; gap: 6px; color: var(--cra-suave); margin: 0; font-weight: 600; }
.cra-datos-casa { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 10px 0 0; font-weight: 700; color: var(--cra-tinta); }
.cra-datos-casa li { display: inline-flex; align-items: center; gap: 8px; }
.cra-datos-casa .cra-i { color: var(--cra-turquesa-osc); width: 22px; height: 22px; }
.cra-datos-casa .cra-dato--amiga { color: #7a5300; }
.cra-datos-casa .cra-dato--amiga .cra-i { color: var(--cra-amarillo-osc); }

.cra-ficha__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; margin-top: 28px; }
.cra-ficha__lateral { position: sticky; top: calc(92px + var(--wp-admin--admin-bar--height, 0px)); }
@media (max-width: 1000px) { .cra-ficha__cuerpo { grid-template-columns: 1fr; gap: 24px; } .cra-ficha__lateral { position: static; } }

.cra-ficha__principal > section { padding: 26px 0; border-top: 1px solid var(--cra-linea); }
.cra-ficha__principal > section:first-child { border-top: 0; padding-top: 0; }
.cra-ficha section h2 { font-size: 1.4rem; margin: 0 0 14px; }
.cra-descripcion { max-width: 70ch; }
.cra-esencial { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 20px; list-style: none; padding: 0; margin: 0; }
.cra-esencial li { display: flex; gap: 10px; align-items: flex-start; }
.cra-esencial .cra-i { color: var(--cra-turquesa-osc); margin-top: 3px; }
.cra-grupo { margin: 0 0 18px; }
.cra-grupo h3 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; color: var(--cra-suave); font-family: var(--cra-cuerpo); font-weight: 800; }
.cra-amiga { display: flex; gap: 14px; align-items: center; background: var(--cra-amarillo-claro); border-radius: 14px; padding: 14px 18px; }
.cra-amiga img { width: 72px; height: auto; flex: none; transform: rotate(-6deg); }
.cra-amiga strong { color: #7a5300; }
.cra-mapa-ficha { height: 320px; border-radius: 14px; border: 1px solid var(--cra-linea); }
.cra-condiciones { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 0; }
.cra-condiciones dt { font-weight: 800; color: var(--cra-tinta); }
.cra-condiciones dd { margin: 0; }
@media (max-width: 520px) { .cra-condiciones { grid-template-columns: 1fr; gap: 2px; } .cra-condiciones dd { margin-bottom: 10px; } }
.cra-propietario { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.cra-propietario__inicial { width: 56px; height: 56px; border-radius: 50%; background: var(--cra-turquesa-osc); color: #fff; display: grid; place-items: center; font: 700 1.4rem var(--cra-titulos); flex: none; }
.cra-propietario small { color: var(--cra-suave); }
.cra-contacto { display: flex !important; flex-wrap: wrap; gap: 8px !important; }

.cra-fotos-todas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cra-fotos-todas a:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
.cra-fotos-todas img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 520px) { .cra-fotos-todas { grid-template-columns: 1fr 1fr; } }
.cra-otras { margin-top: 40px; }
.cra-otras h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 16px; }

/* Barra fija de reserva en el móvil */
.cra-barra-reserva { display: none; }
@media (max-width: 1000px) {
  .cra-barra-reserva { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: #fff; border-top: 1px solid var(--cra-linea); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); }
  .cra-barra-reserva strong { font-size: 1.2rem; color: var(--cra-tinta); }
  .cra-barra-reserva a { background: var(--cra-amarillo); color: #2a1c00; border-radius: 12px; padding: 12px 18px; font-weight: 800; text-decoration: none; }
  body.single-alojamiento { padding-bottom: 76px; }
}

/* Calendario de la ficha más compacto (el módulo viene del plugin) */
.cra-reserva { border-radius: var(--cra-radio); box-shadow: var(--cra-sombra-alta); border: 1px solid var(--cra-linea); padding: 16px; }
.cra-reserva .cra-cal__meses { min-height: 0; gap: 12px; }
.cra-reserva .cra-dia { height: 36px; font-size: .84rem; border-radius: 6px; }
.cra-reserva .cra-dia small { font-size: .6rem; }
.cra-reserva .cra-cal__mes th { font-size: .7rem; padding: 0 0 2px; }
.cra-reserva .cra-cal__btn { width: 34px; height: 34px; font-size: 1.1rem; }
.cra-reserva .cra-cal__titulo { font-size: .95rem; }
.cra-reserva__paso { gap: 12px; }
.cra-reserva .cra-contador button { width: 36px; height: 36px; }