/* ==========================================================================
   LBN Calculadora de proteinas - estilos del plugin
   Generado desde el prototipo. Todo va scopeado bajo .lbn-calc para no
   pisar al tema: el prototipo usa nombres genericos (.container, .card,
   .field) que casi seguro ya existen en buena-nutricion.
   El header y el footer del prototipo NO estan: los pone el tema.
   ========================================================================== */

/* ==========================================================================
   La Buena Nutricion - Interna "Calculadora de proteinas"
   Figma: CUENTAS WEBTILIA - JEAN, nodo 2073-33
   Medidas tomadas del diseno a 1905 px (contenido 1665 px, margen 120 px).
   ========================================================================== */
.lbn-calc{
  /* Paleta declarada en el Figma */
  --lbn-blue:        #004876;
  --lbn-blue-dark:   #002238;
  --lbn-sky:         #73C3D5;
  --lbn-heading:     #0F537E;
  --lbn-body:        #3A5464;
  --lbn-card-bg:     #F0F8FA;
  --lbn-card-text:   #323232;
  --lbn-page-bg:     #FAFAFA;
  --lbn-form-bg:     #FCFDFE;
  --lbn-result-bg:   #EBF6E8;
  --lbn-border:      #E0E6EC;
  --lbn-placeholder: #7F8CA8;
  --lbn-table-text:  #293845;
  --lbn-table-sep:   #D6E3E8;
  --lbn-faq-text:    #6B6B6B;
  --lbn-cta-bg:      #F7FBFE;
  --lbn-cta-border:  #030139;
  --lbn-result-placeholder: #4D7F99;
  /* Equivalencias de proteina (nodo 2500:192). La divisoria usa el mismo
     verde de la banda: asi sale en el SVG del Figma. */
  --lbn-equiv-bg:    #D4F0D8;
  --lbn-equiv-card:  #F4FBF4;
  --lbn-equiv-sep:   #D4F0D8;

}
.lbn-calc *, .lbn-calc *::before, .lbn-calc *::after{ box-sizing:border-box; }
.lbn-calc{
  
  
  font-family:"Mukta",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--lbn-body);
  -webkit-font-smoothing:antialiased;
}
.lbn-calc img{ max-width:100%; }
/* El tema pinta h1..h6 con color:#000 apuntando al ELEMENTO. Una regla directa
   le gana siempre al color heredado, por especifico que sea el contenedor: por
   eso el titulo "Indicaciones" salia negro sobre el bloque azul. Dentro del
   componente forzamos la herencia; nuestras reglas con color propio mandan igual. */
.lbn-calc h1,
.lbn-calc h2,
.lbn-calc h3,
.lbn-calc h4,
.lbn-calc h5,
.lbn-calc h6{ color:inherit; }
/* Contenedor: replica EXACTAMENTE el .m-container del tema buena-nutricion.
   El Figma esta hecho a 1665 px, pero el sitio nunca pasa de 1208: si no se
   copia este sistema, el contenido no alinea con el menu ni con el pie. */
.lbn-calc .container{
  margin:auto;
  position:relative;
  width:auto;
  padding-left:20px;
  padding-right:20px;
}

@media only screen and (min-width:450px){
.lbn-calc .container{ padding-left:30px; padding-right:30px; }
}

@media only screen and (min-width:768px){
.lbn-calc .container{ padding-left:0; padding-right:0; width:730px; }
}

@media only screen and (min-width:1024px){
.lbn-calc .container{ width:940px; }
}

@media only screen and (min-width:1280px){
.lbn-calc .container{ width:1080px; }
}

@media only screen and (min-width:1440px){
.lbn-calc .container{ width:1208px; }
}
/* ==========================================================================
   HERO + CALCULADORA
   ========================================================================== */
/* En el Figma el menu va SUPERPUESTO sobre el frame (ocupa de 0 a 144) y el h1
   arranca en el 175 absoluto. Aca el header ocupa lugar en el flujo, asi que el
   hueco real es 175 - 144 = 31. */
.lbn-calc .calc-hero{ padding:31px 0 0; }
.lbn-calc .calc-hero__title{
  margin:0;
  font-size:48px; font-weight:700; line-height:1.16; letter-spacing:-0.72px;
  color:var(--lbn-blue);
  max-width:542px;
}
.lbn-calc .calc-hero__intro{
  margin:27px 0 0;   /* h1 en 175 + 55.68 de caja -> la bajada cae en 258 */
  max-width:963px;
  font-size:18px; font-weight:300; line-height:1.56;
  color:var(--lbn-body);
}
.lbn-calc .calc-grid{
  display:grid;
  grid-template-columns:682fr 962fr;
  gap:21px;
  margin-top:59px;   /* bajada en 258 + 28.08 de caja -> las tarjetas caen en 345 */
  align-items:stretch;
}
/* ---------- Formulario ---------- */
.lbn-calc .calc-form{
  background:var(--lbn-form-bg);
  border-radius:20px;
  padding:31px 42px 30px;
  display:flex;
  flex-direction:column;
  gap:27px;
}
.lbn-calc .calc-form .field{ margin:0; padding:0; border:0; min-width:0; }
.lbn-calc .field__label{
  display:block;
  margin:0 0 15px;
  padding:0;
  font-family:"Inter",sans-serif;
  font-size:18px; font-weight:500; line-height:1.2;
  color:var(--lbn-blue);
}
.lbn-calc .field-row{ display:grid; gap:40px; }
.lbn-calc .field-row--3{ grid-template-columns:repeat(3,1fr); }
.lbn-calc .field-row--2{ grid-template-columns:repeat(2,1fr); gap:27px; }

/* Edad, Altura y Peso comparten una fila de 3 en un formulario que nunca pasa
   de 492px (el .container del tema topa en 1208). Con el gap de 40 y el padding
   de 50/28 del diseno quedaban 29px utiles y un valor como "81.5" (30px) ya no
   entraba; en laptops de 1366 bajaba a 11px. Se recorta el espaciado SOLO en
   esta fila: los campos de ancho completo siguen con el padding original.
   A partir de 768 la fila pasa a una columna y nada de esto hace falta. */
@media (min-width:768px){
  .lbn-calc .field-row--3{ gap:16px; }
  .lbn-calc .field-row--3 .control__input{ padding-left:42px; padding-right:12px; }
  .lbn-calc .field-row--3 .control__icon{ left:16px; }
}
/* Radios Sexo */
.lbn-calc .radio-row{ display:flex; align-items:center; gap:40px; }
.lbn-calc .radio{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.lbn-calc .radio input{ position:absolute; opacity:0; width:0; height:0; }
.lbn-calc .radio__mark{
  width:22px; height:22px; border-radius:50%;
  border:1px solid var(--lbn-border);
  background:#fff;
  flex:none;
  display:grid; place-items:center;
  transition:border-color .15s ease;
}
.lbn-calc .radio__mark::after{
  content:""; width:12px; height:12px; border-radius:50%;
  background:var(--lbn-blue);
  transform:scale(0); transition:transform .15s ease;
}
.lbn-calc .radio input:checked + .radio__mark{ border-color:var(--lbn-blue); }
.lbn-calc .radio input:checked + .radio__mark::after{ transform:scale(1); }
.lbn-calc .radio__text{
  font-family:"Inter",sans-serif;
  font-size:18px; font-weight:500; color:var(--lbn-blue);
  padding-left:4px;
}
/* Inputs y selects */
.lbn-calc .control{
  position:relative;
  height:60px;
  border:1px solid var(--lbn-border);
  border-radius:50px;
  background:#fff;
  display:flex;
  align-items:center;
}
.lbn-calc .control:focus-within{ border-color:var(--lbn-sky); }
/* Sistema de foco unificado: un solo color, un solo grosor, un solo offset */
.lbn-calc .control:focus-within,
.lbn-calc .radio input:focus-visible + .radio__mark,
.lbn-calc .btn-calcular:focus-visible,
.lbn-calc .faq__btn:focus-visible{
  outline: 2px solid var(--lbn-blue-dark);
  outline-offset: 3px;
}
.lbn-calc .control__icon{
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; object-fit:contain; pointer-events:none;
}
.lbn-calc .control__icon--tall{ width:12px; height:26px; }
.lbn-calc .control--select .control__icon{ width:22px; height:22px; }
.lbn-calc .control__input{
  width:100%; height:100%;
  padding:0 28px 0 50px;
  border:0; background:transparent; outline:none;
  border-radius:50px;
  font-family:"Inter",sans-serif;
  font-size:16px; font-weight:400;
  color:var(--lbn-blue);
}
.lbn-calc .control__input::placeholder{ color:var(--lbn-placeholder); opacity:1; }
.lbn-calc .control__input[type=number]{ -moz-appearance:textfield; }
.lbn-calc .control__input[type=number]::-webkit-outer-spin-button,
.lbn-calc .control__input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.lbn-calc .control--select .control__input{
  appearance:none; -webkit-appearance:none;
  padding-right:56px;
  background-image:url("../img/ico-chevron.svg");
  background-repeat:no-repeat;
  background-position:right 28px center;
  background-size:17.5px 8.5px;
  cursor:pointer;
}
.lbn-calc .control--select .control__input:invalid{ color:var(--lbn-placeholder); }
.lbn-calc .control--select .control__input option{ color:var(--lbn-blue); }
.lbn-calc .control.has-error{ border-color:#C0392B; }
/* mismo resaltado de error para el grupo de radios, que no tiene .control */
.lbn-calc .field--sexo.has-error .radio__mark{ border-color:#C0392B; }
.lbn-calc .calc-form__error{
  margin:0;
  font-family:"Inter",sans-serif;
  font-size:14px; color:#C0392B;
}
.lbn-calc .btn-calcular{
  margin-top:7px;
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:18px 40px;
  border:0; border-radius:32px;
  background:var(--lbn-blue);
  color:#fff;
  font-family:"Mukta",sans-serif;
  font-size:19px; font-weight:700; line-height:1.2;
  cursor:pointer;
  transition:background .18s ease;
}
.lbn-calc .btn-calcular:hover{ background:#00395e; }
.lbn-calc .btn-calcular img{ width:20px; height:10px; }
/* ---------- Resultado ---------- */
.lbn-calc .calc-result{
  position:relative;
  overflow:hidden;
  background:var(--lbn-result-bg);
  border-radius:20px;
  padding:32px 42px 34px;
  min-height:596px;
  /* el header del tema es sticky: sin esto el scroll al resultado lo tapa */
  scroll-margin-top:160px;
}
.lbn-calc .calc-result__head{ display:flex; align-items:center; gap:17px; }
.lbn-calc .calc-result__check{ width:45px; height:45px; flex:none; }
.lbn-calc .calc-result__kicker{
  margin:0;
  font-family:"Inter",sans-serif;
  font-size:20px; font-weight:700; color:var(--lbn-blue);
}
.lbn-calc .calc-result__body{ position:relative; z-index:2; margin-top:18px; }
.lbn-calc .calc-result__label{
  margin:0;
  font-family:"Inter",sans-serif;
  font-size:18px; font-weight:500; color:var(--lbn-blue);
}
.lbn-calc .calc-result__value{
  margin:7px 0 0;   /* el Figma deja 7 px entre la bajada y el numero */
  font-family:"Inter",sans-serif;
  font-size:80px; font-weight:700; line-height:1.2; color:var(--lbn-blue);
  white-space:nowrap;
  transition:color .2s ease;
}

@media (prefers-reduced-motion:reduce){
.lbn-calc .calc-result__value{ transition:none; }
}
/* Estado vacio: el Figma no lo define. Mismo layout, color plano atenuado. */
.lbn-calc .calc-result.is-empty .calc-result__value{ color:var(--lbn-result-placeholder); }
/* ---------- Equivalencias de proteina (nodo 2500:192) ----------
   La banda mide 900 dentro de una tarjeta de 962 que lleva 42 px de padding:
   por eso se sale 11 px a cada lado. El Figma no le pone radio. */
.lbn-calc .calc-equiv{
  position:relative; z-index:2;
  margin:31px -11px 0;
  background:var(--lbn-equiv-bg);
  padding:17px 13px;
}
.lbn-calc .calc-equiv__title{
  margin:0 0 18px;
  font-family:"Inter",sans-serif;
  font-size:25px; font-weight:700; line-height:1.2; color:var(--lbn-blue);
}
.lbn-calc .calc-equiv__list{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:0; padding:0; list-style:none;
}
.lbn-calc .calc-equiv__item{
  display:flex; flex-direction:column; align-items:center;
  background:var(--lbn-equiv-card);
  border-radius:10px;
  padding:1px 11px 19px;
  text-align:center;
}
.lbn-calc .calc-equiv__img{
  width:65px; height:65px; flex:none; object-fit:contain;
}
/* El nombre arranca en 74 y la divisoria cae siempre en 128, lleve el texto
   dos renglones o tres (el de carnes ocupa tres). El min-height clava esa
   geometria del Figma; el flex:1 es lo que la sostiene cuando la columna se
   angosta y el texto largo de carnes pasa a cuatro renglones: al crecer el
   hueco en vez del texto, la divisoria de las 5 tarjetas sigue alineada.
   El align-self:stretch es necesario porque el item centra en el eje
   transversal, y sin el la caja de texto se encoge al ancho del contenido y
   cada tarjeta cortaria el renglon donde quisiera. */
.lbn-calc .calc-equiv__name{
  margin:8px 0 9px;
  min-height:45px;
  flex:1 0 auto;
  align-self:stretch;
  display:flex; flex-direction:column;
  font-family:"Inter",sans-serif;
  font-size:15px; line-height:15px; color:#000;
}
.lbn-calc .calc-equiv__porcion,
.lbn-calc .calc-equiv__food{ font-weight:600; }
.lbn-calc .calc-equiv__detalle{ font-weight:400; }
.lbn-calc .calc-equiv__amount{
  margin:0;
  width:100%;
  border-top:1px solid var(--lbn-equiv-sep);
  padding-top:7px;
  font-family:"Inter",sans-serif;
  color:var(--lbn-blue);
}
.lbn-calc .calc-equiv__grams{
  display:block;
  font-size:30px; font-weight:700; line-height:36px;
}
.lbn-calc .calc-equiv__unit{
  display:block;
  font-size:12px; font-weight:600; line-height:15px;
}
/* ---------- Indicaciones ---------- */
.lbn-calc .calc-notes{
  margin-top:39px;
  background:var(--lbn-blue);
  border-radius:10px;
  color:#fff;
  padding:26px 50px;
  display:flex; flex-direction:column; gap:7px;
}
.lbn-calc .calc-notes__title{
  margin:0;
  color:#fff;
  font-size:20px; font-weight:700; line-height:1.16; letter-spacing:-0.3px;
}
.lbn-calc .calc-notes p{ margin:0; color:#fff; font-size:16px; font-weight:300; line-height:1.2; }
/* ==========================================================================
   SECCIONES DE CONTENIDO
   ========================================================================== */
.lbn-calc .calc-section{ background:#fff; padding:65px 0 65px; }
.lbn-calc .calc-hero + .calc-section{ margin-top:72px; }
.lbn-calc .section-title{
  margin:0;
  font-size:42px; font-weight:700; line-height:1.3; letter-spacing:0.17px;
  color:var(--lbn-heading);
}
.lbn-calc .section-title--sm{ font-size:25px; }
.lbn-calc .section-intro{
  margin:18px 0 0;
  max-width:1244px;
  font-size:20px; font-weight:300; line-height:1.2;
  color:var(--lbn-body);
}
.lbn-calc .section-intro--wide{ max-width:none; }
.lbn-calc .card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:21px;
  margin-top:45px;
}
.lbn-calc .card{
  background:var(--lbn-card-bg);
  border-radius:20px;
  padding:27px 42px 30px 30px;
  letter-spacing:0.17px;
  min-height:250px;
}
.lbn-calc .card__title{
  /* El Figma alinea el titulo por su base (1 o 2 lineas terminan al mismo alto) */
  display:flex; align-items:flex-end;
  min-height:50px;
  margin:0 0 18px;
  font-size:25px; font-weight:700; line-height:1; color:var(--lbn-blue);
}
.lbn-calc .card__text{
  margin:0;
  max-width:469px;
  font-size:20px; font-weight:300; line-height:1.3;
  color:var(--lbn-card-text);
}
.lbn-calc .card--dark{ background:var(--lbn-blue); }
.lbn-calc .card--dark .card__title{ color:#fff; }
.lbn-calc .card--dark .card__text{ color:#fff; max-width:682px; }
/* ==========================================================================
   TABLA DE ALIMENTOS
   ========================================================================== */
.lbn-calc .tabla-title{
  margin:40px 0 0;
  font-size:25px; font-weight:700; line-height:1; letter-spacing:0.17px;
  color:var(--lbn-blue);
}
.lbn-calc .tabla-wrap{ margin-top:44px; overflow-x:auto; position:relative; -webkit-overflow-scrolling:touch; }
.lbn-calc .tabla-alimentos{
  width:100%;
  min-width:900px;
  border-collapse:collapse;
  background:var(--lbn-card-bg);
  border-right:1px solid var(--lbn-table-sep);
  font-family:"Mukta",sans-serif;
}
.lbn-calc .tabla-alimentos th{
  background:var(--lbn-blue);
  color:#fff;
  font-size:18px; font-weight:700; text-align:left;
  height:43px;
  padding:0 18px;
}
.lbn-calc .tabla-alimentos th:nth-child(1){ width:41.62%; }
.lbn-calc .tabla-alimentos th:nth-child(2){ width:37.66%; padding-left:0; }
.lbn-calc .tabla-alimentos th:nth-child(3){ width:20.72%; padding-left:0; }
.lbn-calc .tabla-alimentos td{
  height:43px;
  padding:0 18px;
  font-size:17px; font-weight:500;
  color:var(--lbn-blue-dark);
  border-bottom:1px solid var(--lbn-table-sep);
}
.lbn-calc .tabla-alimentos td:nth-child(1){ color:var(--lbn-table-text); font-weight:400; }
.lbn-calc .tabla-alimentos td:nth-child(2){ padding-left:6px; }
.lbn-calc .tabla-alimentos td:nth-child(3){ padding-left:40px; }
.lbn-calc .tabla-alimentos tbody tr:nth-child(even){ background:#fff; }
/* ==========================================================================
   FAQ
   ========================================================================== */
.lbn-calc .calc-section--faq .faq{ margin-top:109px; }
.lbn-calc .faq__item{ border-top:1px solid var(--lbn-border); }
.lbn-calc .faq__item:last-child{ border-bottom:1px solid var(--lbn-border); }
.lbn-calc .faq__heading{ margin:0; }
.lbn-calc .faq__btn{
  width:100%;
  display:flex; align-items:center; gap:28px;
  padding:42px 0;
  background:none; border:0;
  text-align:left; cursor:pointer;
  font-family:"Roboto",sans-serif;
  transition:padding-bottom .25s ease;
}
/* Fila abierta: el Figma la deja en 152 px contra los 121 de una cerrada.
   Con la respuesta (25) y su margen inferior (35), el boton cede 29 px. */
.lbn-calc .faq__item.is-open .faq__btn{ padding-bottom:13px; }
.lbn-calc .faq__num{
  flex:none;
  width:30px; height:30px; border-radius:50%;
  background:var(--lbn-blue);
  color:#fff;
  display:grid; place-items:center;
  font-size:14px; font-weight:800; line-height:1.06;
}
.lbn-calc .faq__q{
  flex:1;
  font-size:25px; font-weight:700; color:var(--lbn-blue);
}
.lbn-calc .faq__toggle{
  flex:none;
  width:36px; height:36px; border-radius:50%;
  background:var(--lbn-sky);
  display:grid; place-items:center;
  transition:background .2s ease;
}
.lbn-calc .faq__toggle img{
  width:17.5px; height:8.5px;
  filter:brightness(0) invert(1);
  transition:transform .2s ease;
}
.lbn-calc .faq__item.is-open .faq__toggle{ background:var(--lbn-blue); }
.lbn-calc .faq__item.is-open .faq__toggle img{ transform:rotate(180deg); }
.lbn-calc .faq__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .25s ease;
}
.lbn-calc .faq__item.is-open .faq__panel{ grid-template-rows:1fr; }
.lbn-calc .faq__answer{ overflow:hidden; }
.lbn-calc .faq__answer p{
  margin:0;
  padding:0 0 35px;
  font-family:"Roboto",sans-serif;
  font-size:20px; font-weight:400; line-height:25px;
  color:var(--lbn-faq-text);
}

@media (prefers-reduced-motion:reduce){
.lbn-calc .faq__btn{ transition:none; }
.lbn-calc .faq__panel{ transition:none; }
}
/* ==========================================================================
   CTA CONTACTO
   ========================================================================== */
.lbn-calc .calc-cta{ background:#fff; padding:40px 0 60px; }
.lbn-calc .calc-cta__box{
  width:100%;
  max-width:1000px;
  margin-inline:auto;
  background:var(--lbn-cta-bg);
  border-radius:20px;
  padding:8px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.lbn-calc .calc-cta__left{ display:flex; align-items:center; gap:8px; }
.lbn-calc .calc-cta__left img{ width:60px; height:82px; object-fit:cover; flex:none; }
.lbn-calc .calc-cta__left p{
  margin:0;
  font-size:20px; font-weight:400; line-height:27px; letter-spacing:0.5px;
  color:#000;
}
.lbn-calc .calc-cta__link{
  flex:none;
  width:200px;
  display:flex; align-items:center; justify-content:center;
  padding:12px 0;
  border:2px solid var(--lbn-cta-border);
  border-radius:120px;
  color:#000; text-decoration:none;
  font-size:20px; font-weight:400; line-height:27px; letter-spacing:0.08px;
  transition:background .18s ease,color .18s ease;
}
.lbn-calc .calc-cta__link:hover{ background:var(--lbn-cta-border); color:#fff; }

@media (max-width:1439.98px){
.lbn-calc .calc-hero__title{ font-size:42px; }
.lbn-calc .section-title{ font-size:36px; }
.lbn-calc .section-intro{ font-size:19px; }
.lbn-calc .card__text{ font-size:18px; }
.lbn-calc .card__title{ font-size:23px; }
.lbn-calc .faq__q{ font-size:22px; }
.lbn-calc .calc-result__value{ font-size:68px; }
}

@media (max-width:1279.98px){
.lbn-calc .calc-grid{ grid-template-columns:1fr; }
.lbn-calc .calc-result{ min-height:0; }
.lbn-calc .card-grid{ grid-template-columns:repeat(2,1fr); }
.lbn-calc .calc-hero__title{ font-size:38px; }
.lbn-calc .section-title{ font-size:32px; }
}

@media (max-width:1023.98px){
.lbn-calc .calc-hero{ padding-top:40px; }
.lbn-calc .calc-section{ padding:52px 0; }
.lbn-calc .calc-section--faq .faq{ margin-top:48px; }
.lbn-calc .faq__q{ font-size:20px; }
.lbn-calc .calc-result__value{ font-size:60px; }
}

@media (max-width:767.98px){
.lbn-calc .calc-hero{ padding-top:32px; }
.lbn-calc .calc-hero__title{ font-size:32px; }
.lbn-calc .calc-hero__intro{ font-size:17px; margin-top:18px; }
.lbn-calc .calc-grid{ margin-top:32px; }
.lbn-calc .calc-form{ padding:24px 20px; gap:22px; }
.lbn-calc .field-row--3{ grid-template-columns:1fr; gap:22px; }
.lbn-calc .field-row--2{ grid-template-columns:1fr; gap:22px; }
.lbn-calc .calc-result{ padding:24px 20px; }
.lbn-calc .calc-result__value{ font-size:52px; }
/* La tarjeta cae a ~310 px utiles: cinco columnas darian 60 px cada una y
   la foto sola mide 65. Se deja envolver en dos o tres por fila. */
.lbn-calc .calc-equiv{ margin:28px -6px 0; padding:14px 10px; }
.lbn-calc .calc-equiv__title{ font-size:22px; margin-bottom:14px; }
/* auto-fit dejaba 4+1 con el queso solo en la segunda fila. Numero fijo de
   columnas por tramo: 3+2 aca, 2+2+1 en movil. */
.lbn-calc .calc-equiv__list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.lbn-calc .calc-notes{ padding:22px 24px; margin-top:28px; }
.lbn-calc .card-grid{ grid-template-columns:1fr; margin-top:32px; }
.lbn-calc .card{ min-height:0; padding:24px 24px 28px; }
.lbn-calc .card__title{ min-height:0; font-size:22px; margin-bottom:12px; }
.lbn-calc .card__text{ font-size:18px; }
.lbn-calc .section-title{ font-size:28px; }
.lbn-calc .section-intro{ font-size:18px; }
.lbn-calc .calc-section{ padding:44px 0; }
.lbn-calc .tabla-title{ margin-top:28px; font-size:22px; }
.lbn-calc .tabla-wrap{
    margin-top:24px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
.lbn-calc .calc-section--faq .faq{ margin-top:32px; }
.lbn-calc .faq__btn{ padding:24px 0; gap:14px; }
.lbn-calc .faq__item.is-open .faq__btn{ padding-bottom:10px; }
.lbn-calc .faq__q{ font-size:18px; }
.lbn-calc .faq__answer p{ font-size:17px; line-height:23px; padding-bottom:24px; }
.lbn-calc .calc-cta{ padding:28px 0 44px; }
.lbn-calc .calc-cta__box{ flex-direction:column; align-items:flex-start; padding:20px; }
.lbn-calc .calc-cta__link{ width:100%; }
}

@media (max-width:449.98px){
.lbn-calc .calc-hero__title{ font-size:28px; }
.lbn-calc .calc-result__value{ font-size:42px; }
.lbn-calc .calc-equiv__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.lbn-calc .radio-row{ gap:24px; }
.lbn-calc .section-title{ font-size:25px; }
}

/* --------------------------------------------------------------------------
   Fila de UNA sola tarjeta (Aviso Legal).
   Va al final del archivo a proposito: las media queries de arriba redefinen
   .card-grid con la misma especificidad, y con empate gana la ultima regla.
   -------------------------------------------------------------------------- */
.lbn-calc .card-grid--1{ grid-template-columns:1fr; gap:20px; }
/* A ancho completo el texto entra en 2-3 lineas: el alto minimo pensado para
   tarjetas en columna dejaria un hueco grande debajo. */
.lbn-calc .card-grid--1 .card{ min-height:0; }
.lbn-calc .card-grid--1 .card__title{ min-height:0; }