@charset "utf-8";
/*
Theme Name: Casa de Lanas
Text Domain: casadelanas
Author: Ricardo Juárez
Author URI: https://rjvv.com/
Version: 1.0
License: GNU/GPL Version 2 or later
Copyright: (c) 2026 Ricardo Juárez
*/



:root {

}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    height: 100%;
    background: var(--crema);
    color: var(--carbon);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    overflow: hidden;
}


:root {


        --crema:  #F2EBD9;
    --tierra: #7A4F2E;
    --carbon: #1E1710;
    --humo:   #9E8E78;


    /* Colores */
    --primary:  var(--crema);
    --contrast: var(--carbon);
    --accent:   red;
    --grey:     var(--tierra);

    /* Espaciados */
    --pad2: 10px;
    --pad:  20px;
    --padb: 60px;
    --padh: 120px;

    /* Tipografía — tamaños */
    --fs-small:  13px;
    --fs-body:   16px;
    --fs-medium: 20px;
    --fs-big:    32px;
    --fs-huge:   64px;

    /* Tipografía — line-height */
    --lh-small:  1.3;
    --lh-body:   1.5;
    --lh-medium: 1.3;
    --lh-big:    1.1;
    --lh-huge:   1.0;

    /* Tipografía — letter-spacing */
    --ls-small:  0;
    --ls-body:   0;
    --ls-medium: 0;
    --ls-big:    -0.02em;
    --ls-huge:   -0.03em;

    /* Fuentes */
    --sans:  sans-serif;  /* → reemplazar */
    --serif: serif;

    /* Misc */
    --real100:   100vh;
    --radius:    4px;
    --transition: 0.3s ease;
}


/* ============================================================
   BASE BODY
   ============================================================ */

body {
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    font-weight: 400;
    color: var(--contrast);
    background-color: var(--primary);
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}


/* ============================================================
   TIPOGRAFÍA — clases de tamaño
   ============================================================ */

.small {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--ls-small);
}
.body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
}
.medium {
    font-size: var(--fs-medium);
    line-height: var(--lh-medium);
    letter-spacing: var(--ls-medium);
}
.big {
    font-size: var(--fs-big);
    line-height: var(--lh-big);
    letter-spacing: var(--ls-big);
}
.huge {
    font-size: var(--fs-huge);
    line-height: var(--lh-huge);
    letter-spacing: var(--ls-huge);
}


/* ============================================================
   UTILIDADES TIPOGRÁFICAS
   ============================================================ */

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.italic     { font-style: italic; }
.bold       { font-weight: 700; }
.normal     { font-weight: 400; }
.nowrap     { white-space: nowrap; }
.strike     { text-decoration: line-through; }

.t-primary  { color: var(--primary); }
.t-contrast { color: var(--contrast); }
.t-accent   { color: var(--accent); }
.t-grey     { color: var(--grey); }

.aligncenter { text-align: center; }
.alignleft   { text-align: left; }
.alignright  { text-align: right; }


/* ============================================================
   POST CONTENT
   ============================================================ */

.post-content p,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.post-content blockquote,
.post-content ol,
.post-content ul {
    margin-bottom: calc(var(--fs-body) * var(--lh-body));
}

.post-content *:last-child {
    margin-bottom: 0;
}

.post-content ul,
.post-content ol {
    padding-left: 1.4em;
}

.post-content ul li { list-style: disc; }
.post-content ol li { list-style: decimal; }

.post-content a {
    text-decoration: underline;
}

.post-content blockquote {
    padding-left: 1em;
    border-left: 2px solid var(--contrast);
    font-style: italic;
}

.post-content img {
    margin-top: calc(var(--fs-body) * var(--lh-body));
    margin-bottom: calc(var(--fs-body) * var(--lh-body));
}


/* ============================================================
   UTILIDADES DE LAYOUT
   ============================================================ */

.none  { display: none; }
.block { display: block; }
.flex  { display: flex; }
.clear { clear: both; }

.left  { float: left !important; }
.right { float: right !important; }

.rel    { position: relative; }
.abs    { position: absolute; }
.fixed  { position: fixed; }
.sticky { position: sticky; }

.overflow-hidden { overflow: hidden; }
.pointer         { cursor: pointer; }
.no-select       { user-select: none; -webkit-user-select: none; }

.mobile  { display: none; }
.desktop { display: block; }

.padded   { padding: var(--pad); }
.padded-v { padding: var(--pad) 0; }
.padded-h { padding: 0 var(--pad); }

.margined  { margin-bottom: var(--pad); }
.marginedb { margin-bottom: var(--padb); }
.marginedh { margin-bottom: var(--padh); }


/* Menu overlay */
.menu-hover {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--primary);
}

.menu-hover.appear {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.menu-open {
    overflow: hidden;
}

/* ============================================================
   INPUTS — reset
   ============================================================ */

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--grey);
    opacity: 1;
}

input[type="submit"],
button[type="submit"] {
    cursor: pointer;
}

textarea {
    resize: none;
}


/* ============================================================
   SWIPER
   ============================================================ */

.swiper-slide {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


/* ============================================================
   LANDING
   ============================================================ */

.page-template-templates-landing #header,
.page-template-templates-landing #footer,
.page-template-templates-landing #main { display: none; }

.landing {
    height: 100dvh;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 3rem 4rem;
    background: var(--crema);
    color: var(--carbon);
}

.landing-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo-word {
    display: block;
    font-family: 'fino-sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--carbon);
    font-size: clamp(3rem, 10vw, 10rem);
    text-transform: uppercase;
    text-align: center;
}

.tagline {
    margin-top: 2.5rem;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--carbon);
    font-weight: 400;
    text-align: center;
}

.landing-footer {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 2rem;
}

.contact-group {
    display: flex;
    gap: 3rem;
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-val {
    font-size: 0.8rem;
    color: var(--carbon);
    text-decoration: none;
    transition: color 0.2s;
}

.contact-val:hover { color: var(--tierra); }

.location {
    font-size: 0.75rem;
    color: var(--carbon);
    line-height: 1.5;
}

@media (max-width: 640px) {
    html, body { overflow: auto; }

    .landing {
        padding: 2rem 1.5rem;
        min-height: 100dvh;
        height: auto;
    }

    .logo-word { font-size: clamp(4rem, 20vw, 6rem); }

    .tagline { margin-top: 1.5rem; }

    .landing-footer { flex-direction: column; }

    .contact-group {
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}


/* ============================================================
   RESET
   ============================================================ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins,
kbd, q, samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, figure, figcaption,
hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    outline: none;
}

article, aside, canvas, figure, figcaption,
hgroup, section, audio, video { display: block; }

html, body {
    width: 100%;
    overscroll-behavior: none;
}

html {
    margin-top: 0 !important;
    background-color: var(--primary);
}
@media screen and (max-width: 782px) {
    html { margin-top: 0 !important; }
}

table  { border-collapse: collapse; }
li     { list-style: none; }
abbr   { text-decoration: none; }
button { outline: none; cursor: pointer; }
p      { margin-bottom: 0; }

a {
    text-decoration: none;
    outline: none;
    color: inherit;
}
a img { border: none !important; }

figure     { position: relative; }
figure img { width: 100%; }

img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

img::selection      { background: transparent; }
img::-moz-selection { background: transparent; }

::selection      { background: var(--contrast); color: var(--primary); }
::-moz-selection { background: var(--contrast); color: var(--primary); }