/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Description: Tema hijo de GeneratePress para Pasión Tour Colombia
Author: Tu Nombre
Author URI: https://tusitio.com
Template: generatepress
Version: 1.0
*/

/* =========================
   Opción 1 — Listones tricolor + tarjeta legible (SIN warnings)
   ========================= */

/* Paleta bandera (ajustada) */
:root{
  --co-yellow:#FCD116;
  --co-blue:#0B5ED7;   /* azul accesible */
  --co-red:#CE1126;
  --co-paper:#FAF7F0;  /* papel cálido */
}

/* Fondo base y listones tricolor en body */
body{
  background: var(--co-paper);
}
body::before,
body::after{
  content:"";
  position:fixed; left:0; right:0; height:12px; z-index:0; pointer-events:none;
}
body::before{
  top:0;
  background:linear-gradient(90deg,
    var(--co-yellow) 0 33.333%,
    var(--co-blue) 33.333% 66.666%,
    var(--co-red) 66.666% 100%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}
body::after{
  bottom:0;
  background:linear-gradient(90deg, var(--co-yellow), var(--co-blue), var(--co-red));
  box-shadow: inset 0 1px 0 rgba(0,0,0,.06);
}

/* Tarjeta “legible” tipo glass SIN warnings */
.surface{
  position: relative;
  background: rgba(255,255,255,.96);         /* un poco más opaco para suplir el blur */
  border:1px solid rgba(15,23,42,.06);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  padding:16px;                               /* base */
  overflow:hidden;                            /* recorta pseudo-elementos */
}

/* Velo suave (simula brillo superior) */
.surface::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events:none;
}

/* Highlights/sombras internas para efecto “cristal” */
.surface::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),   /* brillo arriba */
    inset 0 -1px 0 rgba(15,23,42,.05);     /* sombrita abajo */
  pointer-events:none;
}

/* Padding responsivo (sustituye clamp) */
@media (min-width:768px){
  .surface{ padding:20px; }
}
@media (min-width:1024px){
  .surface{ padding:24px; }
}

/* (Opcional) Micro-acento tricolor dentro de .surface */
.surface .co-accent{ position:relative; padding-top:6px; }
.surface .co-accent::before{
  content:"";
  position:absolute; left:0; top:0; width:96px; height:3px;
  background: linear-gradient(90deg, var(--co-yellow), var(--co-blue), var(--co-red));
  border-radius:2px;
}