/* ==========================================================================
   VEGAS DEL VERDE — sections/condiciones.css
   Página «Condiciones de alquiler» (condiciones-de-alquiler.html).
   Antes era un modal; ahora es una página propia, así que estas reglas
   viven aparte y espacios.css ya no las necesita.
   Depende de tokens.css y base.css. No declara ningún valor literal.

   v3 «Blackberry» — la página interior come de la misma dieta que la portada:
   esquina viva, ninguna sombra y los rótulos con --tracking-rotulo. Si esta
   página se quedara con el lenguaje de v2 —y aquí se llega desde el pie de
   #espacios, o sea a mitad de la visita— parecería de otro sitio.
   El único redondeo que se conserva es el del disco del icono, por lo mismo
   que .pildora conserva el suyo en base.css: las esquinas vivas mandan en
   foto, tarjeta y botón; en los grafismos diminutos, no.
   ========================================================================== */

/* ==========================================================================
   1. LAS CUATRO CONDICIONES
   Lista vertical: en una columna de lectura se lee mucho mejor de arriba abajo
   que en las cuatro columnas apretadas de v1.
   Los iconos son admisibles aquí porque marcan CONCEPTOS (duración,
   inclusión, exclusión), no sustituyen a nada fotografiable.
   ========================================================================== */
.condiciones__lista {
  display: grid;
  gap: var(--esp-md);
  margin-top: var(--esp-lg);
}

.condicion {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--esp-sm);
  row-gap: var(--esp-3xs);
  align-items: start;
}

.condicion__icono {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: var(--radio-full);
  background-color: rgb(var(--verde-oliva-rgb) / 0.14);
  color: var(--color-acento-texto);
  flex: none;
}

.condicion__icono svg {
  width: 1.35em;
  height: 1.35em;
}

/* Etiqueta, no titular: por eso sí lleva la fuente de etiqueta declarada. */
.condicion__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-cuerpo);
  font-weight: var(--peso-medio);
  line-height: var(--alto-linea-titulo);
  color: var(--color-texto);
  margin: 0;
}

.condicion__detalle {
  font-size: var(--fs-pequeno);
  line-height: var(--alto-linea-base);
  color: var(--color-texto-suave);
  margin: 0;
}

/* La única condición que NO está incluida se marca en el rojo del logo para
   que no se lea de más. El color va sólo en el icono (grafismo, 3,6:1);
   el texto se queda en --color-texto. */
.condicion--excluida .condicion__icono {
  background-color: rgb(var(--rojo-baya-rgb) / 0.14);
  color: var(--color-alerta);
}

/* ---- Puente a los planes --------------------------------------------------
   Aquí había una tira de píldoras con los usos (conciertos, matrimonios, yoga…).
   Los usos son de #planes, así que este bloque quedó en una sola línea que
   pregunta y enlaza. No le devuelvas los chips: se mantendrían en dos sitios.  */
.condiciones__usos {
  margin-top: var(--esp-lg);
  padding-top: var(--esp-md);
  border-top: 1px solid var(--color-borde-suave);
}

.condiciones__intro {
  font-size: var(--fs-cuerpo);
  color: var(--color-texto);
  margin: 0;
}

/* ---- Pie de la página: el CTA a WhatsApp ---------------------------------- */
.condiciones__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-sm) var(--esp-md);
  margin-top: var(--esp-lg);
  padding-top: var(--esp-md);
  border-top: 1px solid var(--color-borde-suave);
}

.condiciones__pie .pildora {
  margin: 0;
}

@media (max-width: 33.99em) {
  .condiciones__pie .btn {
    display: flex;
    width: 100%;
    padding-inline: var(--esp-sm);
  }
}