/* Parcela Eventos Lo Cañas — base.css
   Se encola SIEMPRE al final, con estilos.css como dependencia.
   Aquí van los ajustes propios del tema (carrusel, menú móvil, Contact Form 7,
   barra de cookies y grillas configurables). Nunca se usa !important:
   basta con que este archivo cargue último. */

/* ---------- Grilla de una columna (la maqueta solo trae 2, 3 y 4) ---------- */
.grid--1{grid-template-columns:1fr}

/* En la maqueta, .grid--4 baja a dos columnas bajo 1080px y ahí se queda:
   en un teléfono quedan dos tarjetas de 150px de ancho. Bajo 760px pasa a
   una sola columna, igual que hacen .grid--3 y .grid--2. */
@media (max-width:760px){
  .grid--4{grid-template-columns:1fr}
}

/* ---------- Carrusel de testimonios ---------- */
.carrusel{position:relative; margin-top:40px}
.carrusel__pista{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 52px) / 3);
  gap:26px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 18px; margin:-4px -4px 0;
  scrollbar-width:thin; scrollbar-color:rgba(58,42,30,.28) transparent;
}
.carrusel__pista::-webkit-scrollbar{height:6px}
.carrusel__pista::-webkit-scrollbar-track{background:transparent}
.carrusel__pista::-webkit-scrollbar-thumb{background:rgba(58,42,30,.22); border-radius:999px}
.carrusel__pista > .cita{scroll-snap-align:start; height:100%}
.carrusel__pista:focus-visible{outline:2px solid var(--siena); outline-offset:4px; border-radius:var(--radio)}

.carrusel__nav{display:flex; align-items:center; gap:12px; margin-top:22px}
.carrusel__btn{
  width:46px; height:46px; flex:0 0 auto; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--siena);
  background:var(--papel); border:1.5px solid var(--siena);
  transition:background .16s ease, color .16s ease, opacity .16s ease;
}
.carrusel__btn:hover{background:var(--siena); color:#fff}
.carrusel__btn[disabled]{opacity:.35; cursor:default}
.carrusel__btn[disabled]:hover{background:var(--papel); color:var(--siena)}
.carrusel__btn svg{display:block}

.carrusel__puntos{display:flex; align-items:center; gap:12px; margin-left:6px}
/* Punto visible: 9px, igual que la maqueta. Área táctil real: 24x24 (WCAG
   2.5.8) por medio de un ::after que dibuja el punto, sin agrandar lo que se
   ve. El botón queda transparente y ocupa el espacio de sobra. */
.carrusel__punto{
  width:24px; height:24px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:transparent; position:relative;
}
.carrusel__punto::after{
  content:''; position:absolute; top:50%; left:50%; width:9px; height:9px;
  border-radius:50%; background:rgba(58,42,30,.22); transform:translate(-50%,-50%);
  transition:background .16s ease, transform .16s ease;
}
.carrusel__punto:hover::after{background:rgba(160,82,45,.55)}
.carrusel__punto[aria-selected="true"]::after{background:var(--siena); transform:translate(-50%,-50%) scale(1.35)}

@media (max-width:1080px){
  .carrusel__pista{grid-auto-columns:calc((100% - 26px) / 2)}
}
@media (max-width:760px){
  .carrusel__pista{grid-auto-columns:88%; gap:16px}
  .carrusel__nav{justify-content:center}
}

/* ---------- Menú móvil ---------- */
.cabecera__menu{
  display:none; width:46px; height:46px; margin-left:auto; flex:0 0 auto;
  align-items:center; justify-content:center; cursor:pointer;
  background:transparent; color:var(--tinta);
  border:1px solid var(--linea); border-radius:12px;
  transition:background .16s ease, color .16s ease;
}
.cabecera__menu:hover{background:var(--crema-2); color:var(--siena)}
.cabecera__menu svg{display:block}

@media (max-width:900px){
  .cabecera__menu{display:inline-flex}
  .cabecera__fila{gap:16px}
  .nav[data-abierto="true"]{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0; margin:0;
    padding:10px 24px 20px;
    background:rgba(247,241,232,.98); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--linea); box-shadow:var(--sombra);
  }
  .nav[data-abierto="true"] a{padding:13px 0; border-bottom:1px solid var(--linea); font-size:16px}
  .nav[data-abierto="true"] a:last-child{border-bottom:0}
  /* .cabecera ya viene con position:sticky desde la maqueta; acá solo se
     necesita el contexto de posición para desplegar el menú bajo la fila. */
  .cabecera__fila{position:relative}
}

/* ---------- Contact Form 7 dentro de la tarjeta de la maqueta ---------- */
.tarjeta-form{position:relative}
.tarjeta-form .wpcf7-form p{margin:0}
.campo > span.wpcf7-form-control-wrap{
  display:block; margin:0; font-size:inherit; font-weight:inherit;
  letter-spacing:normal; color:inherit;
}
/* La maqueta mide la textarea en 96px (min-height de .campo textarea); sin
   fila fija, Contact Form 7 la imprime con rows="10" por defecto y sale bien
   más alta que eso. Con height explícito, el atributo rows deja de mandar. */
.tarjeta-form textarea{height:96px}
.tarjeta-form .wpcf7-submit{margin-top:18px}
/* El spinner de Contact Form 7 sigue con visibility:hidden en reposo (su
   propio CSS), pero eso no le quita el alto: 24px + margen siguen empujando
   el resto de la tarjeta hacia abajo aunque no se vea. Se colapsa a 0 en
   reposo y solo recupera tamaño mientras el formulario tiene la clase
   "submitting" que Contact Form 7 agrega por su cuenta al enviar. */
.tarjeta-form .wpcf7-spinner{display:block; margin:0; height:0; overflow:hidden}
.tarjeta-form form.submitting .wpcf7-spinner{height:24px; margin:12px auto 0; overflow:visible}
.campo span.wpcf7-not-valid-tip{color:#B3261E; font-weight:500; letter-spacing:normal; margin-bottom:0}
.wpcf7-not-valid-tip{display:block; margin-top:6px; font-size:13px; color:#B3261E}
.campo input.wpcf7-not-valid,
.campo select.wpcf7-not-valid,
.campo textarea.wpcf7-not-valid{border-color:#B3261E}
.tarjeta-form .wpcf7-response-output{
  margin:18px 0 0; padding:13px 16px; border-radius:10px;
  border:1px solid var(--linea); background:#FCF9F5;
  font-size:14.5px; line-height:1.5; color:var(--tinta-suave);
}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--oliva); color:#4C5836}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:#B3261E; color:#8C1D18}
.campo--oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- Barra de cookies ---------- */
.cookies{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:95;
  max-width:520px; padding:22px 24px 20px; border-radius:16px;
  background:var(--papel); color:var(--tinta);
  border:1px solid var(--linea); box-shadow:var(--sombra-alta);
  /* Con el panel "Elegir qué acepto" abierto en un teléfono, la barra puede
     crecer más que el alto de la pantalla y queda con el título cortado por
     arriba. Se limita a la altura visible real y ella misma hace scroll. */
  max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain;
}
.cookies[hidden]{display:none}
.cookies__titulo{font-family:var(--display); font-size:21px; font-weight:600; margin:0}
.cookies__texto{margin-top:10px; font-size:14.5px; line-height:1.55; color:var(--tinta-suave)}
.cookies__opciones{display:none; margin-top:16px; padding-top:14px; border-top:1px solid var(--linea)}
.cookies[data-panel="abierto"] .cookies__opciones{display:block}
.cookies__opcion{display:flex; align-items:flex-start; gap:10px; margin-top:12px; font-size:14px; color:var(--tinta-suave)}
.cookies__opcion input{margin-top:3px}
.cookies__opcion b{display:block; color:var(--tinta); font-weight:600; font-family:var(--texto); font-size:14.5px}
.cookies__detalle{margin:8px 0 0 28px; padding:0; list-style:none}
.cookies__detalle li{margin-top:8px; font-size:13px; line-height:1.45; color:var(--tinta-suave)}
.cookies__detalle code{
  display:inline-block; font-size:12px; padding:1px 6px; border-radius:5px;
  background:var(--crema-2); color:var(--tinta); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.cookies__detalle span{display:block; margin-top:3px}
.cookies__detalle em{display:block; margin-top:2px; font-style:normal; color:var(--muted); font-size:12.5px}
.cookies__acciones{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.cookies__acciones .btn{min-height:44px; padding:0 20px; font-size:15px}
.cookies__enlace{
  background:none; border:0; padding:0; cursor:pointer; margin-top:14px;
  font-family:var(--texto); font-size:13.5px; font-weight:600; color:var(--siena);
  text-decoration:underline; text-underline-offset:3px;
}
/* Área de toque de 44px sin agrandar el texto: solo dentro de la barra, no en
   el enlace de "preferencias de cookies" del pie, que es otro botón y no el
   que reportó el hallazgo. */
.cookies .cookies__enlace{min-height:44px; padding:10px 0; display:inline-flex; align-items:center}
.pie__legal .cookies__enlace{color:#E8C79A; font-weight:400; font-size:13.5px; margin-top:0}
@media (max-width:760px){
  /* Acá abajo la barra se separa 88px del borde inferior (deja libre el
     flotante de cotización). El max-height de 100dvh - 32px asume el bottom
     de 16px de escritorio: con 88px de por medio, la cuenta ya no alcanza y
     el título vuelve a quedar cortado por arriba. Se ajusta el máximo para
     descontar también ese espacio de abajo. */
  .cookies{left:12px; right:12px; bottom:88px; padding:20px; max-height:calc(100dvh - 100px)}
  .cookies__acciones .btn{flex:1 1 100%}
}

/* ---------- Detalles menores ---------- */
.cabecera__tel{display:inline-flex; align-items:center; gap:8px}
.flotante-cotiza svg{flex:0 0 auto}
.tarjeta__icono svg{width:22px; height:22px}
.pie__rrss{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.pie__rrss a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(232,199,154,.35); color:#E8C79A;
}
.pie__rrss a:hover{color:#fff; border-color:rgba(255,255,255,.5)}
.pie__logo{border-radius:14px}
.doc__volver{margin-top:36px}

/* ---------- Áreas de toque ---------- */
/* El ícono de teléfono de la cabecera mide 20x20: en escritorio queda junto
   al menú y agrandarlo movería el resto de la fila, así que el área de 44x44
   se agrega solo donde vive sin texto, bajo 900px (mismo punto en que aparece
   el botón de menú móvil). */
@media (max-width:900px){
  .cabecera__tel--icono{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px;
  }
}

/* ---------- Anclas bajo la cabecera sticky ---------- */
main > section[id]{scroll-margin-top:88px}

/* ---------- Modal en una sola columna en celular ---------- */
/* La maqueta del modal de cotización es de una columna; los .campo--doble
   solo tienen dos en el formulario grande del hero. Acotado al modal para no
   tocar el formulario de escritorio. */
@media (max-width:520px){
  .modal .campo--doble{grid-template-columns:1fr}
}