/* :root { --header-color: #fff; }
    #mainHeader { color: var(--header-color); }
    #mainHeader a { color: inherit; text-decoration: none; }
     Fuerza que TODO el logo use currentColor, aunque el SVG traiga fills/strokes 
    #logoSvg *[fill]:not([fill="none"])   { fill: currentColor !important; }
    #logoSvg *[stroke]:not([stroke="none"]){ stroke: currentColor !important; } */


/* header base (ya usas tailwind, esto es por si quieres clase semántica) */
/*.hdr__brand, .hdr__link { color:#111; transition: color .2s linear; }
.hdr__link.is-active { text-decoration: underline; }
*/
/* estados por elemento, los pone el JS */


/* el SVG del logo toma el color del texto */
/*#logoSvg { display:block; }
#logoSvg, #logoSvg * { fill: currentColor; }*/
/*
.hdr__brand, .hdr__link { color: inherit; transition: color .2s linear; }
.is-dark  { color:#fff !important; }  
.is-light { color:#111 !important; }   */

/* Importar la fuente */
@font-face {
  font-family: 'Helvetica Roman';
  src: url('../fonts/Helvetica-Roman.woff2') format('woff2');
  font-weight: 400; /* o cualquier peso deseado */
  font-style: normal; /* o cualquier estilo deseado */
}

@font-face {
  font-family: 'Helvetica Rounded Black';
  src: url('../fonts/Helvetica-Rounded-Black.woff2') format('woff2');
  font-weight: 900; /* o cualquier peso deseado */
  font-style: normal; /* o cualquier estilo deseado */
}

.helvetica {
	font-family: 'Helvetica Roman';
}

/* Aplicar la fuente a los párrafos */

h1, h2, h3, h4, h5, h6 { font-family: 'Helvetica Roman', sans-serif;}

p, span, a, ul, li {
  font-family: 'Helvetica Roman', sans-serif; /* Especifica la tipografía y una fuente de respaldo */
}

.card-about.relative {
    width: 100%;
    height: 364px !important;
    overflow: hidden;
}

.blur-custom:hover {
    filter: blur(2.5px);
  -webkit-filter: blur(2.5px);
}

.div-oculto {
    opacity: 0;
    position: absolute;
    top: 50%;
    color: white;
    width: 80%;
    margin: 0 auto;
    left: 15%;
    transition: all  0.5 ease-in-out;
}

.card-about:hover .div-oculto{
    opacity: 1;
    transition: all  0.6 ease-in-out;
}

#map {
  width: 100%;
  height: 400px;
}

/*formulario de contacto*/

form.wpcf7-form.init input {
    border: 1px solid black;
    padding: 10px;
    width: 100%;
}

form.wpcf7-form.init input::placeholder {
    color: #A2A2A2;
}

textarea.wpcf7-form-control.wpcf7-textarea {
    width: 100%;
    border: 1px solid;
    height: 20vh;
}

span.wpcf7-form-control.wpcf7-radio span {
    font-size: 13px;
}

span.wpcf7-form-control.wpcf7-radio span.wpcf7-list-item.last {
    left: 5rem;
    position: relative;
}

form.wpcf7-form.init input[type="radio"] {
  appearance: none;        /* Quita el estilo del navegador */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 15px !important;
  height: 15px;
  border: 1px solid #333;
  border-radius: 0px;      /* Cambia el radio: 4px = esquinas redondeadas, 0 = cuadrado total */
  background-color: #fff;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: all 0.2s ease;
  padding: 3px;
  font-size: 13px;
}

input[type="radio"]:checked {
  background-color: #333;
  border-color: #333;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner {
    width: 20%;
    background: black;
    color: white;
}

/* Reveal de entrada */
.project-card {
  opacity: 0;
  transform: translateY(24px);                   /* punto de partida */
  transition: opacity .45s ease, transform .45s ease;
  will-change: transform, opacity;
}

/* Aparece cuando entra al viewport */
.project-card.in-view {
  opacity: 1;
  transform: translateY(var(--py, 0px));         /* parallax vivo */
}

/* Mientras está filtrada (lo que ya tenías) */
.project-card.is-filtered-out {
  opacity: 0;
  transform: translateY(12px) scale(.98);
  pointer-events: none;
}
.project-card.is-hidden { display: none; }

/* Item base */
    .project-card {
      opacity: 1;
      transform: scale(1);
      transition: opacity .28s ease, transform .28s ease;
      will-change: opacity, transform;
    }
    /* En salida (fade-out) */
    .project-card.is-filtered-out {
      opacity: 0;
      transform: scale(.98);
      pointer-events: none;
    }
    /* Fuera de flujo tras la transición */
    .project-card.is-hidden {
      display: none;
    }
    /* Filtro activo */
    #project-filters .filter-link.is-active {
      text-decoration: underline;
    }

/*---------------------------*/
.swiper-button-next, .swiper-button-prev {
    color: white;
    box-shadow: 1px 1px 1px black;
    background: black;
    padding: 39px 20px;
    border-radius: 10%;
}

.swiper-pagination-bullet {
    background: white;
}

.swiper-pagination-bullet-active {
    background: black;
}

input[type="radio"]:checked {
    background-color: #333 !important;
    border-color: #333 !important;
}