/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ==========================================================================
   L'Arancina — Blog Content Styles (styler.css)
   Sistema global de clases para artículos con contenido enriquecido.
   Se carga solo en single posts via functions.php.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS — Paleta corporativa L'Arancina
   -------------------------------------------------------------------------- */

:root {
    --la-cream:       #f7f3ec;
    --la-cream-soft:  #faf7f1;
    --la-brown:       #5a3e1f;
    --la-brown-mid:   #8b6f47;
    --la-brown-soft:  #d4c5a9;
    --la-text:        #2c2218;
    --la-white:       #ffffff;

    /* Transición reutilizable */
    --la-transition:  0.25s ease;
}


/* --------------------------------------------------------------------------
   2. BASE — Artículo contenedor
   -------------------------------------------------------------------------- */

.la-article {
    font-family: inherit;
    line-height: 1.7;
    color: var(--la-text);
}

.la-article p {
    margin-bottom: 1.3em;
}

.la-article h2 {
    color: var(--la-brown);
    font-size: 1.85em;
    line-height: 1.3;
    margin: 50px 0 22px;
}

.la-article a {
    color: var(--la-brown);
}

.la-article strong {
    color: var(--la-brown);
}


/* --------------------------------------------------------------------------
   3. COMPONENTES
   -------------------------------------------------------------------------- */

/* --- Callout (caja destacada con borde lateral) --- */

.la-callout {
    background: var(--la-cream);
    padding: 28px 32px;
    margin: 36px 0;
    border-left: 4px solid var(--la-brown);
}

.la-callout p:first-child { margin-top: 0; }
.la-callout p:last-child  { margin-bottom: 0; }


/* --- Format Grid + Cards --- */

.la-format-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 36px 0;
}

.la-format-card {
    background: var(--la-cream-soft);
    padding: 26px 28px;
    border-top: 3px solid var(--la-brown-mid);
}

.la-format-card h4 {
    color: var(--la-brown);
    margin: 0 0 12px;
    font-size: 1.1em;
    font-weight: 600;
}

.la-format-card p {
    margin: 0;
    font-size: 0.97em;
    line-height: 1.6;
}


/* --- Price Table --- */

.la-price-table {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
    background: var(--la-cream-soft);
}

.la-price-table th {
    background: var(--la-brown);
    color: var(--la-white);
    padding: 16px 18px;
    text-align: left;
    font-weight: 600;
}

.la-price-table td {
    padding: 14px 18px;
    border: 1px solid var(--la-brown-soft);
}

.la-price-table tr:last-child td {
    border-bottom: none;
}


/* --- Compare (2 columnas adultos/niños) --- */

.la-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 36px 0;
}

.la-compare-col {
    background: var(--la-cream);
    padding: 28px 26px;
    border-top: 3px solid var(--la-brown);
}

.la-compare-col h4 {
    color: var(--la-brown);
    font-size: 1.15em;
    margin: 0 0 14px;
}

.la-compare-col ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.75;
}


/* --- Timeline --- */

.la-timeline {
    margin: 36px 0;
    background: var(--la-cream-soft);
    padding: 32px 36px;
}

.la-timeline-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--la-brown-soft);
    align-items: baseline;
}

.la-timeline-row:first-child { padding-top: 0; }
.la-timeline-row:last-child  { border-bottom: none; padding-bottom: 0; }

.la-timeline-time {
    font-weight: 700;
    color: var(--la-brown);
    font-size: 1.05em;
}


/* --- Evocative (frase destacada estilo L'Arancina) --- */

.la-evocative {
    text-align: center;
    font-size: 1.4em;
    font-style: italic;
    color: var(--la-brown-mid);
    padding: 36px 24px;
    margin: 30px 0;
    font-weight: 300;
    line-height: 1.4;
}


/* --- CTA Final --- */

.la-cta-final {
    text-align: center;
    padding: 50px 32px;
    background: var(--la-cream);
    margin: 50px 0 0;
}

.la-cta-final h3 {
    margin: 0 0 14px;
    color: var(--la-brown);
    font-size: 1.45em;
}

.la-cta-final p {
    max-width: 580px;
    margin: 0 auto 26px;
}

.la-cta-final > a {
    display: inline-block;
    background: var(--la-brown);
    color: var(--la-white);
    padding: 14px 32px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background var(--la-transition);
}

.la-cta-final > a:hover {
    background: var(--la-brown-mid);
}


/* --- FAQ --- */

.la-faq-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--la-brown-soft);
}

.la-faq-item:last-child {
    border-bottom: none;
}

.la-faq-item h3 {
    color: var(--la-brown);
    margin: 0 0 10px;
    font-size: 1.1em;
    font-weight: 600;
}

.la-faq-item p {
    margin: 0;
}


/* --- Style Grid + Cards (variante para estilos de tarta, etc.) --- */

.la-style-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 36px 0;
}

.la-style-card {
    background: var(--la-cream-soft);
    padding: 26px 28px;
    border-top: 3px solid var(--la-brown-mid);
}

.la-style-card h4 {
    color: var(--la-brown);
    margin: 0 0 12px;
    font-size: 1.1em;
    font-weight: 600;
}

.la-style-card p {
    margin: 0;
    font-size: 0.97em;
    line-height: 1.6;
}


/* --- Process (pasos numerados) --- */

.la-process {
    margin: 36px 0;
    background: var(--la-cream-soft);
    padding: 32px 36px;
}

.la-process-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--la-brown-soft);
    align-items: baseline;
}

.la-process-row:first-child { padding-top: 0; }
.la-process-row:last-child  { border-bottom: none; padding-bottom: 0; }

.la-process-num {
    font-size: 1.7em;
    font-weight: 700;
    color: var(--la-brown);
    line-height: 1;
}


/* --------------------------------------------------------------------------
   4. RESPONSIVE — Tablet / Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .la-format-grid          { grid-template-columns: 1fr; }
    .la-compare              { grid-template-columns: 1fr; }
    .la-timeline             { padding: 22px 20px; }
    .la-timeline-row         { grid-template-columns: 70px 1fr; gap: 14px; }
    .la-evocative            { font-size: 1.15em; padding: 26px 16px; }
    .la-article h2           { font-size: 1.45em; }
    .la-cta-final            { padding: 36px 22px; }
    .la-style-grid           { grid-template-columns: 1fr; }
    .la-process              { padding: 22px 20px; }
    .la-process-row          { grid-template-columns: 45px 1fr; gap: 14px; }
    .la-process-num          { font-size: 1.4em; }

    /* --- Price Table → Card View --- */
    .la-price-table thead {
        display: none;
    }

    .la-price-table,
    .la-price-table tbody,
    .la-price-table tr,
    .la-price-table td {
        display: block;
        width: 100%;
	}
    .la-price-table td, .la-price-table {
        border-width: 0px!important;
	}
    .la-price-table tr {
        background: var(--la-cream-soft);
        padding: 20px 18px;
        margin-bottom: 12px;
        border-left: 3px solid var(--la-brown);
    }

    .la-price-table tr:last-child {
        margin-bottom: 0;
    }

    .la-price-table td {
        padding: 4px 0;
        border-bottom: none;
        font-size: 0.95em;
    }

    .la-price-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        color: var(--la-brown);
        font-size: 0.85em;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin-bottom: 2px;
    }

    .la-price-table td:first-child {
        font-weight: 600;
        font-size: 1.05em;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--la-brown-soft);
    }
}