---
layout: default
---

{%- assign about = site.posts | find: 'layout', 'about' -%}
{%- assign contacto = site.posts | find: 'layout', 'contacto' -%}
{%- assign posts = site.posts | where: 'layout', 'post' -%}
{%- assign servicios = site.posts | find: 'layout', 'servicios' -%}

{% comment %}
Toda la portada es una gran tarjeta de presentación.
{% endcomment %}
<div itemscope itemtype="https://schema.org/Organization">
  <meta itemprop="name" content="{{ about.title }}" />
  <meta itemprop="description" content="{{ about.description }}" />
  <meta itemprop="url" content="{{ site.url }}" />

  <section id="portada" class="row no-gutters justify-content-center align-items-center h-50vh h-md-100vh background-image-header bg-primary background-size-cover">
    {%- include_cached picture.html src=about.logo.path alt=about.logo.description width=210 img_class="max-w-210px" class="d-flex justify-content-center" -%}
  </section>

  <section id="portada-2" class="row no-gutters">
    {%- include_cached picture.html src=about.image_2.path alt=about.image_2.description width=1049 img_class="w-100 fit-cover" class="col-12" -%}

    <div class="col-12 justify-content-center align-items-center">
      <div class="px-5 px-md-0 w-md-50 mx-auto my-5 text-center content">
        {{ about.content }}
      </div>
    </div>
  </section>

  {%- if servicios -%}
    {% include servicios.html %}
  {%- endif -%}

  {%- unless posts == empty -%}
    <section id="novedades" class="background-primary min-h-100vh row no-gutters justify-content-center">
      <div class="col-10 col-md-9 py-5">
        <div class="container">
          <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
            {% for post in posts %}
              {%- include post.html post=post -%}
            {% endfor %}
          </div>
        </div>
      </div>
    </section>
  {%- endunless -%}

  <section
    id="contacto"
    class="d-flex background-image-contacto align-items-center h-md-100vh py-5 py-md-0">
    <div class="row no-gutters justify-content-center w-100">
      <header class="col-12 col-md-5 px-5 px-md-0 mb-5 mb-md-0">
        <h1 class="mb-3">{{ contacto.title }}</h1>
        <address itemprop="address">{{ about.address }}</address>
        <p><a class="body" href="mailto:{{ about.email }}" itemprop="email">{{ about.email }}</a></p>
        {%- if about.telefono and about.telefono != 0 -%}
          <p><a class="body" href="tel:{{ about.phone }}" itemprop="telephone">{{ about.phone }}</a></p>
        {%- endif -%}
      </header>

      <div class="col-12 col-md-5 px-5 px-md-0">
        {%- include contact.html form=site.data.forms.contacto name='contacto' -%}
      </div>
    </div>
  </section>
</div>