/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 06 2026 | 18:12:43 */
/* ================================================================
   ay_obras® Pricing Page — Elementor Pro Custom CSS
   ================================================================

   MAPA DE CLASES CSS (campo "CSS ID / CSS Classes" en Elementor):
   ─────────────────────────────────────────────────────────────────
   Sección hero              →  CSS Class: ao-hero
   Columna Esencial          →  CSS Class: ao-card-esencial
   Columna Avanzado          →  CSS Class: ao-card-avanzada
   Columna Licencia          →  CSS Class: ao-card-compra
   Sección tabla comparativa →  CSS Class: ao-table-section
   Sección FAQ               →  CSS Class: ao-faq-section
   Sección footer CTA        →  CSS Class: ao-footer-cta
   ─────────────────────────────────────────────────────────────────

   TODO LO DEMÁS se configura desde la UI de Elementor:
   ✓ Gradiente del hero        → Style → Background → Gradient
   ✓ Border-top de cards       → Advanced → Border (por lado)
   ✓ Box shadow de cards       → Style → Box Shadow
   ✓ Hover shadow + translateY → Advanced → Motion Effects
   ✓ Card avanzada elevada     → Advanced → Margin top negativo
   ✓ Padding de columnas       → Advanced → Padding
   ✓ Colores de botones        → Style → Button
   ✓ Colores Icon List         → Style → Icon / Text
   ✓ Estilos del Accordion     → Style → Item / Title / Content
   ================================================================ */


/* ── 1. VARIABLES ────────────────────────────────────────────── */
:root {
  --ao-navy:    #0d2a4a;
  --ao-blue:    #1565c0;
  --ao-orange:  #e8700a;
  --ao-green:   #2e8b57;
  --ao-gray-bg: #f4f7fb;
  --ao-text:    #1a2637;
  --ao-muted:   #5a6e85;
  --ao-border:  #d8e3f0;
  --ao-radius:  14px;
}


/* ── 2. HERO — patrón SVG de fondo ──────────────────────────── */
/* El gradiente va desde la UI: Style → Background → Gradient
   El patrón SVG se añade como segunda capa en Background Overlay
   o con este CSS si prefieres no usar overlay                   */

.ao-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
/* Asegurar que el contenido quede por encima del ::before */
.ao-hero > .e-con { position: relative; z-index: 1; }


/* ── 3. HERO BADGE ───────────────────────────────────────────── */
/* Widget HTML dentro del hero con clase .hero-badge             */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(232,112,10,.18);
  border: 1px solid rgba(232,112,10,.40);
  color: #fbb96a;
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-badge::before { content: '✦'; font-size: 10px; }


/* ── 4. TOGGLE MENSUAL / ANUAL ───────────────────────────────── */
/* Widget HTML en el hero — ver pricing-snippets.html            */

.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50px;
  padding: 6px 8px 6px 20px;
  margin-top: 32px;
}
.toggle-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: color .2s;
  user-select: none;
  white-space: nowrap;
}
.toggle-label.active { color: #fff; }
.toggle-switch {
  position: relative;
  width: 50px;
  height: 26px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  border-radius: 50px;
  transition: background .3s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .3s;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.toggle-switch input:checked + .toggle-slider { background: var(--ao-orange); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(24px); }
.save-pill {
  background: var(--ao-orange);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  white-space: nowrap;
}


/* ── 5. CARDS — lo que NO cubre la UI de Elementor ──────────── */

/* Badge "MÁS POPULAR" en Avanzado
   Alternativa limpia: widget Heading posicionado en la columna
   con Position: Absolute, top:0, centrado.
   Si prefieres ::before, descomenta esto y añade
   CSS Class "ao-card-avanzada" a la columna:               */
/*
.ao-card-avanzada::before {
  content: '★  MÁS POPULAR';
  display: block;
  background: var(--ao-blue);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-align: center;
  padding: 7px 0;
  margin: -20px -20px 20px -20px;
}
*/


/* ── 6. BLOQUES DE PRECIO (Widget HTML por card) ─────────────── */

.plan-price-block { margin-bottom: 20px; }

.plan-price-main {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  line-height: 1;
}
.plan-currency {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ao-navy);
  padding-bottom: 7px;
}
.plan-amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 52px;
  font-weight: 800;
  color: var(--ao-navy);
  letter-spacing: -2px;
  line-height: 1;
}
.plan-period-inline {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--ao-muted);
  padding-bottom: 8px;
  line-height: 1.3;
}
.plan-period-below {
  font-size: 12px;
  line-height: 16px;
  color: var(--ao-muted);
  margin-top: 6px;
}
.plan-note {
  font-size: 12px;
  color: var(--ao-muted);
  margin-top: 4px;
  line-height: 1.5;
}
.plan-note strong { color: var(--ao-navy); }

.plan-save-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 4px;
}
.plan-price-crossed {
  font-size: 13px;
  color: var(--ao-muted);
  text-decoration: line-through;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}
.plan-save-badge {
  background: #fff3e0;
  color: var(--ao-orange);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  white-space: nowrap;
}

.info-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff8f0;
  border: 1px solid rgba(232,112,10,.25);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--ao-muted);
  margin-top: 10px;
}
.info-tag strong { color: var(--ao-orange); }

.plan-divider {
  border: none;
  border-top: 1px solid var(--ao-border);
  margin: 20px 0;
}
.feat-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ao-muted);
  margin-bottom: 10px;
  font-family: 'Montserrat', sans-serif;
}


/* ── 7. TABLA COMPARATIVA ────────────────────────────────────── */
/* Widget HTML con la tabla — ver pricing-snippets.html
   El widget Table de Elementor Pro no permite filas de grupo
   con estilo diferente, de ahí que vaya como HTML               */

.ao-table-section { background: #fff; }

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
}
.comparison-table thead th {
  background: var(--ao-navy);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  padding: 14px 18px;
  text-align: center;
}
.comparison-table thead th:first-child {
  text-align: left;
  border-radius: 8px 0 0 0;
}
.comparison-table thead th:last-child { border-radius: 0 8px 0 0; }
.comparison-table tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--ao-border);
  text-align: center;
  color: var(--ao-muted);
}
.comparison-table tbody td:first-child {
  text-align: left;
  color: var(--ao-text);
}
.comparison-table tbody tr.section-row td {
  background: var(--ao-gray-bg);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ao-muted);
  text-align: left;
}
.comparison-table .tick   { color: var(--ao-green);  font-size: 16px; font-weight: 700; }
.comparison-table .tick-b { color: var(--ao-blue);   font-size: 16px; font-weight: 700; }
.comparison-table .tick-o { color: var(--ao-orange); font-size: 16px; font-weight: 700; }
.comparison-table .cross  { color: var(--ao-border); font-size: 18px; }


/* ── 8. FAQ ──────────────────────────────────────────────────── */
/* Widget Accordion de Elementor Pro.
   La mayoría del estilo va desde el panel Style del widget.
   Estos son los overrides que el panel no cubre directamente.   */

.ao-faq-section { background: var(--ao-navy); }

/* El panel Style del Accordion cubre: colores, tipografía,
   border, border-radius, padding. Solo necesitas configurarlo:
   - Item Background: rgba(255,255,255,.06)
   - Item Border: 1px solid rgba(255,255,255,.12)
   - Item Border Radius: 8px
   - Title Color: #fff
   - Title Font: Montserrat 600
   - Content Color: rgba(255,255,255,.72)
   - Icon Color: rgba(255,255,255,.5)                            */

.ao-faq-section .e-n-accordion-item {
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  margin-bottom: 20px;
}
.ao-faq-section .e-n-accordion-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}


/* ── 9. FOOTER CTA ───────────────────────────────────────────── */
/* Sección con bg #1565c0 desde la UI.
   Botón blanco y ghost se configuran en Style del widget Button.
   Solo necesitas el ghost si el tema no lo incluye:             */

.btn-ghost-white.elementor-button {
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
  border: 2px solid rgba(255,255,255,.40) !important;
}
.btn-ghost-white.elementor-button:hover {
  border-color: rgba(255,255,255,.75) !important;
  color: #fff !important;
}


/* ── 10. RESPONSIVE ──────────────────────────────────────────── */
/* Elementor gestiona el responsive por breakpoints desde la UI.
   Solo necesitas esto para la card avanzada elevada:            */

@media (max-width: 768px) {
  .ao-card-avanzada.e-con {
    margin-top: 0 !important;
  }
  .toggle-wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .comparison-table td {
    line-height: 1.3;
    padding: 10px 12px;
  }
}