/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

/* ==========================================================================
   Proba · Sección Tipologías — v8 · 24-08-2026
   Va en el CSS del child theme (o en Bricks → Settings → Custom code → CSS).
   SUSTITUYE por completo a las versiones anteriores (v3 y tipologias.css).
   No debe convivir con ninguna de ellas: si quedan cargadas, ganan por
   especificidad y el panel vuelve a partirse en dos columnas.

   Clases que escribe tipologias-v8.js (deben coincidir):
     sección lista  -> .tipos-sec.tipos-ready      (NO .is-ready)
     panel activo   -> .tipo-panel.is-active       (NO .on)
     pestaña activa -> .tipo-tab.is-active         (NO .on)

   Estructura que espera:
     .tipos-sec
       .tipos-nav   > .tipo-tab[data-index]        (loop ACF)
       .tipos-body  > .tipos-content > .tipo-panel[data-index]   (loop ACF)
                    > .tipos-form    > .proba-form               (fuera del loop)

   Notas de Bricks:
     · .brxe-block trae display:flex + flex-direction:column + width:100%,
       por eso los hijos de una fila llevan width:auto / flex explícito.
     · Bricks emite el estilo inline como #brxe-xxxx{...}; un ID le gana a la
       clase, así que las reglas de estado (mostrar/ocultar panel) llevan
       !important. Es el único sitio donde se usa.
   ========================================================================== */

.tipos-sec{ --pb-amarillo:#FBB900; --pb-amarillo-osc:#d99f00; --pb-negro:#2B2A2F; --pb-gris:#6c6976; --pb-linea:#e8e7e3; }

/* ---------- NAV DE TABS ---------- */
.tipos-nav{
  display:flex;
  flex-direction:row;          /* .brxe-block trae column: hay que forzar row */
  flex-wrap:wrap;              /* 2, 3 o N filas segun quepan */
  align-items:stretch;
  gap:10px;
  margin-top:34px;
  padding-bottom:18px;
  border-bottom:1px solid var(--pb-linea);
}

.tipo-tab{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  /* .brxe-block trae width:100%: sin width:auto cada capsula ocupa toda la fila
     (flex-basis:auto respeta ese 100%, por eso flex:0 0 auto no basta) */
  width:auto;
  max-width:100%;
  flex:0 0 auto;
  min-height:44px;             /* area tactil comoda */
  padding:11px 20px;
  border:1px solid var(--pb-linea);
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.tipo-tab :where(p,span){ margin:0; transition:color .18s ease; }

.tipo-tab:hover{ border-color:var(--pb-negro); }
.tipo-tab:hover :where(p,span){ color:var(--pb-negro); }

.tipo-tab.is-active{
  background:var(--pb-amarillo);
  border-color:var(--pb-amarillo);
}
.tipo-tab.is-active :where(p,span){ color:var(--pb-negro); font-weight:800; }

.tipo-tab:focus-visible{ outline:2px solid var(--pb-negro); outline-offset:2px; }

/* ---------- PANELES ---------- */
.tipos-content{ margin-top:44px; position:relative; }

/* El formulario ya NO vive dentro del loop: el cuerpo es un flex row */
.tipos-body{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:56px;
  margin-top:44px;
}
/* .brxe-block trae width:100% de base: hay que soltarlo en los hijos de la fila */
.tipos-content{
  flex:1 1 60%;
  width:60%;
  min-width:0;            /* deja que el plano se encoja en vez de desbordar */
  margin-top:0;
}
.tipos-form{
  flex:1 1 40%;
  width:40%;
  min-width:0;
  max-width:100%;
}

/* el plano ocupa todo el ancho disponible de su columna */
.tipo-plano{ width:100%; align-self:stretch; box-sizing:border-box; }
.tipo-plano img{ width:100%; height:auto; max-width:none; }

/* El panel es UNA sola columna: flex column, nunca grid.
   El display va inline en el elemento (para que el editor de Bricks tambien lo
   respete: ahi el CSS de este elemento code no se ejecuta) y el estado activo/oculto
   lo impone el CSS con !important, porque Bricks emite el inline como
   #brxe-xxxx{...} y un ID le ganaria a la clase. */
.tipo-panel{ display:flex; flex-direction:column; width:100%; }   /* fallback sin JS */
.tipos-ready .tipo-panel{ display:none !important; }              /* con JS: solo el activo */
.tipos-ready .tipo-panel.is-active{
  display:flex !important;
  flex-direction:column;
  animation:tipoFade .28s ease both;
}
.tipo-panel[hidden]{ display:none !important; }

/* Tarjeta del formulario: una sola, acompania el scroll en desktop */
.tipos-form{ align-self:start; position:sticky; top:24px; }
.tipo-actual-linea p{ margin:0; }
.tipo-actual{ color:#2B2A2F; font-weight:800; }
@keyframes tipoFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.tipo-plano{
  background:#f7f6f3;
  border:1px solid var(--pb-linea);
  border-radius:14px;
  padding:26px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tipo-plano img{ width:100%; height:auto; display:block; mix-blend-mode:multiply; }

/* Datos (area total, etc.) */
.tipo-dl{
  display:flex;
  flex-wrap:wrap;
  gap:14px 44px;
  margin:22px 0 26px;
  padding:20px 0;
  border-top:1px solid var(--pb-linea);
  border-bottom:1px solid var(--pb-linea);
}
.tipo-dl > *{ display:flex; flex-direction:column; gap:4px; }
.tipo-dl p{ margin:0; }
.tipo-dl > * > *:first-child p{ font-size:26px; font-weight:900; color:var(--pb-negro); letter-spacing:-0.02em; line-height:1; }
.tipo-dl > * > *:last-child p{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--pb-gris); }

/* Caracteristicas (loop) — sin estilos: los define el propio elemento (#brxe-fbtyxt) */

/* ---------- RESPONSIVE ---------- */
@media (max-width:991px){
  .tipos-body{ flex-direction:column; flex-wrap:wrap; gap:36px; margin-top:34px; }
  .tipos-content{ flex:1 1 auto; width:100%; }
  .tipos-form{ flex:1 1 auto; width:100%; position:static; }
}

@media (max-width:767px){
  .tipos-body{ gap:26px; margin-top:26px; }
  .tipos-nav{ gap:8px; margin-top:26px; padding-bottom:14px; }
  .tipo-tab{ padding:10px 16px; width:auto; flex:0 0 auto; }  /* siguen midiendo lo que su texto */
  .tipo-plano{ padding:18px; border-radius:10px; }
  .tipo-dl{ gap:12px 30px; margin:18px 0 22px; }
  .tipo-dl > * > *:first-child p{ font-size:22px; }
}

@media (max-width:420px){
  .tipo-tab{ width:auto; flex:0 0 auto; }   /* nunca a ancho completo */
}


/* ---------- Select de Tipologia en el formulario ---------- */
.brxe-form select[name*="tipologia"]{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236c6976' stroke-width='2'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px;
  padding-right:42px;
}
.brxe-form select[name*="tipologia"]:invalid{ color:#9a97a3; }

/* ============================================================
   FORMULARIO PROBA (.proba-form) — mismo form en tipologias y contacto
   ============================================================ */
.proba-form .form-group{ margin-bottom:16px; }
.proba-form .form-group label{
  display:block; margin-bottom:8px;
  font-family:Inter,system-ui,sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#6c6976;
}
.proba-form .form-group label .required{ color:#d99f00; }
.proba-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.proba-form select,
.proba-form textarea{
  width:100%; background:#fff; color:#2B2A2F;
  font-family:Inter,system-ui,sans-serif; font-size:15px; font-weight:400; line-height:1.4;
  border:1px solid #e8e7e3; border-radius:10px; padding:14px 16px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.proba-form input::placeholder,
.proba-form textarea::placeholder{ color:#9a97a3; }
.proba-form input:focus,
.proba-form select:focus,
.proba-form textarea:focus{
  outline:none; border-color:#FBB900; box-shadow:0 0 0 3px rgba(251,185,0,.18);
}
.proba-form .bricks-button,
.proba-form button[type="submit"]{
  width:100%; cursor:pointer; border:0; border-radius:50px;
  background:#FBB900; color:#2B2A2F;
  font-family:Inter,system-ui,sans-serif; font-size:14.5px; font-weight:800;
  padding:16px 30px; margin-top:6px;
  transition:background-color .18s ease, transform .18s ease;
}
.proba-form .bricks-button:hover,
.proba-form button[type="submit"]:hover{ background:#e3a800; }
.proba-form .bricks-form__submit-button-wrapper{ margin-bottom:0; }
.proba-form .message{
  font-family:Inter,system-ui,sans-serif; font-size:14px; line-height:1.6;
  border-radius:10px; padding:14px 16px; margin-top:14px;
}
.proba-form .message.success{ background:rgba(251,185,0,.14); color:#2B2A2F; }

/* el form dentro de la tipologia respira un poco menos */
.proba-form--tipologia .form-group{ margin-bottom:14px; }

@media (max-width:767px){
  .proba-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .proba-form select,
  .proba-form textarea{ font-size:16px; }   /* evita el zoom de iOS */
}