/* =========================
   VARIABLES Y BASE GLOBAL
   ========================= */
:root{
  --color-primary: #0B5FFF;
  --color-primary-dark: #084ACC;
  --color-accent: #E8F0FF;
  --color-text: #1F2937;
  --color-muted: #6B7280;
  --border-soft: #E5E7EB;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 6px 20px rgba(0,0,0,.10);
  --container: 980px;
}

/* Reset mínimo */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

/* Fondo general con tinte suave */
body{
  background:
    radial-gradient(1000px 400px at 50% -200px, var(--color-accent), transparent 60%),
    #f8fbff;
  color: var(--color-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  margin: 0;
}

/* Contenedor genérico tipo landing */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================
   HEADER (look SaaS limpio)
   ========================= */
header{
  background:
    linear-gradient(0deg, #ffffff, #ffffff),
    radial-gradient(1200px 400px at 50% -220px, var(--color-accent), transparent 60%);
  color: var(--color-text);
  text-align: center;
  padding: 64px 20px 44px;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-soft);
}
header h1{ font-size: 2.6rem; margin: 0; }
header h2{ color: var(--color-muted); font-weight: 500; margin: 8px 0 0; }

/* Título + foto alineados */
.header-flex{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* para móviles se acomoda */
}
.flo-foto-header{
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  border: 3px solid #fff; /* resalta un poco más */
}

/* =========================
   SECCIONES
   ========================= */
section.container{
  padding: 28px 24px;
  max-width: var(--container);
  margin: 24px auto;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

h3{
  color: var(--color-primary);
  margin: 0 0 12px;
}

ul{ padding-left: 20px; }

/* Tarjeta opcional para destacar bloques */
.card{
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

/* =========================
   BOTONES Y ENLACES CTA
   ========================= */
.btn{
  display: inline-block;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .04s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-sm);
}
.btn-primary{
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover{
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}
.btn-outline{
  background: #fff;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover{
  background: var(--color-accent);
}

/* Enlace tipo CTA simple (opcional) */
.link-cta{
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.link-cta:hover{ text-decoration: underline; }

/* =========================
   GALERÍA (huincha a todo ancho)
   ========================= */
.galeria-contenedor{
  background: var(--color-accent);
  padding: 28px 0;
  width: 100%;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.galeria-contenedor h3{
  text-align: center;
  font-size: 1.8rem;
  margin: 0 0 16px;
  color: #334155;
}
.galeria{
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 10px 0;
  overflow-x: auto;
}
.galeria img{
  width: 240px;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  transition: transform .2s ease;
}
.galeria img:hover{ transform: scale(1.04); }

/* =========================
   FORMULARIO (Flo)
   ========================= */
.formulario-contenedor{
  background: #fff;
  padding: 30px;
  max-width: var(--container);
  margin: 24px auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
form h3{
  margin-top: 0;
  color: var(--color-primary);
}
form label{
  display: block;
  margin: 12px 0 6px;
  color: var(--color-text);
  font-weight: 600;
}
form input[type="text"],
form input[type="email"],
form input[type="file"],
form textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #fff;
  outline: none;
  transition: border .15s ease, box-shadow .15s ease;
  margin-bottom: 14px;
}
form input:focus,
form textarea:focus{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11,95,255,.12);
}
form button{
  background: var(--color-primary);
  color: #fff;
  padding: 12px 18px;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
form button:hover{
  background: var(--color-primary-dark);
}

/* Separador suave */
hr{
  margin: 28px 0;
  border: none;
  border-top: 1px solid var(--border-soft);
}

/* =========================
   FOOTER
   ========================= */
footer{
  background: #f3f6fb;
  text-align: center;
  padding: 18px;
  font-size: .95em;
  border-top: 1px solid var(--border-soft);
}
/* Mensajes flotantes (toast) */
.toast{
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translateX(-50%) translateY(-15px);
  background: #111827;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  opacity: 0;
  transition: all .25s ease;
  z-index: 9999;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok{ background: #10b981; }      /* verde */
.toast.error{ background: #ef4444; }   /* rojo */
/* Mensajes flotantes (toast) */
.toast{
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translateX(-50%) translateY(-15px);
  background: #111827;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  opacity: 0;
  transition: all .25s ease;
  z-index: 9999;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok{ background: #10b981; }
.toast.error{ background: #ef4444; }

/* Tabla admin */
.table-wrap{ overflow-x:auto; }
.table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table th, .table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  text-align: left;
}
.table thead th{
  background: #f3f6fb;
  color: #374151;
  font-weight: 700;
}
.table tbody tr:nth-child(even){
  background: #fafbff;
}
/* ==== Header con imagen ==== */
.header-principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #007acc;
  color: white;
  padding: 40px 20px;
  flex-wrap: wrap;
}

.texto-header {
  flex: 1;
  min-width: 200px;
}

.texto-header h1 {
  margin: 0;
  font-size: 3em; /* más grande */
}

.texto-header h2 {
  margin-top: 5px;
  font-weight: normal;
  font-size: 1.5em; /* un poco más grande */
}

.imagen-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.imagen-header img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* ===== Tipografía global más moderna (usa Inter si está) ===== */
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

/* ===== HERO moderno ===== */
.hero{
  /* degradado suave + luz radial */
  background:
    radial-gradient(1200px 420px at 80% -200px, var(--color-accent), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  border-bottom: 1px solid var(--border-soft);
  padding: 56px 0 64px;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 32px;
}

.hero-text h1{
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  line-height: 1.1;
  margin: 8px 0 10px;
  color: #0f172a;
  font-weight: 800;
}

.hero-sub{
  color: var(--color-muted);
  font-size: 1.05rem;
  margin: 0 0 18px;
  max-width: 48ch;
}

.hero-actions .btn{ margin-right: 10px; }

/* Etiqueta/chip arriba del título */
.chip{
  display: inline-block;
  background: #eef4ff;
  color: #2146d6;
  border: 1px solid #dbe5ff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
}

/* Foto */
.hero-photo{
  display: grid;
  place-items: center;
}
.hero-photo img{
  width: min(320px, 90%);
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 28px;
  border: 6px solid #fff;
  box-shadow: var(--shadow-md);
}

/* Responsive: en móvil apilamos y centramos */
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; text-align: center; }
  .hero-actions .btn{ margin: 6px 6px 0 6px; }
  .hero-sub{ margin-left: auto; margin-right: auto; }
}

/* ===== Encabezado de páginas internas (galería / formulario) ===== */
.page-header{
  background:
    radial-gradient(900px 320px at 80% -180px, var(--color-accent), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #f6f9ff 100%);
  border-bottom: 1px solid var(--border-soft);
  padding: 32px 0;
}
.page-header .title-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.page-header h1{ margin:0; font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight:800; color:#0f172a; }

/* ===== Secciones tipo “card” para el resto del contenido ===== */
.section-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding:24px;
}

/* ===== Galería modernizada (mantiene huincha + scroll horiz.) ===== */
.galeria-contenedor{
  background: linear-gradient(180deg, #f6f9ff 0%, #eef4ff 100%);
  padding: 28px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.galeria-titulo{
  text-align:center; margin:0 0 14px; color:#0f172a; font-size:1.6rem; font-weight:800;
}
.galeria{
  display:flex; gap:20px; justify-content:center; padding: 10px 0; overflow-x:auto;
}
.galeria img{
  width: 240px; height: 240px; object-fit: cover;
  border-radius: 16px;
  border: 6px solid #fff;
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, box-shadow .18s ease;
}
.galeria img:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }

/* ===== Formulario con encabezados “chip” y mejor espaciado ===== */
.formulario-contenedor{ /* ya existía: reforzamos */
  background:#fff; border:1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding:28px;
}
.formulario-contenedor h3{
  display:inline-block; margin:8px 0 12px; font-size:1.2rem; color:#0f172a;
  background:#eef4ff; border:1px solid #dbe5ff; color:#2146d6;
  padding:6px 10px; border-radius:999px; font-weight:700;
}

/* Dos columnas suaves en pantallas grandes */
@media (min-width: 880px){
  .field-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
}

/* Botón ancho en móvil dentro del formulario */
@media (max-width: 520px){
  form button{ width:100%; }
}